pn-new-crm/src/components/shared/inline-phone-field.tsx

'use client';

import { useState } from 'react';
import { Loader2, Pencil } from 'lucide-react';
import { toast } from 'sonner';

import { PhoneInput, type PhoneInputValue } from '@/components/shared/phone-input';
import { parsePhone } from '@/lib/i18n/phone';
import type { CountryCode } from '@/lib/i18n/countries';
import { cn } from '@/lib/utils';

interface InlinePhoneFieldProps {
  /** E.164 form ('+442079460958'), null when unset. */
  e164: string | null | undefined;
  /** ISO-3166-1 alpha-2 the number was parsed against. */
  country: string | null | undefined;
  /** Falls back to this country if `country` isn't set. */
  defaultCountry?: CountryCode;
  onSave: (next: { e164: string | null; country: CountryCode }) => Promise<void>;
  emptyText?: string;
  disabled?: boolean;
  className?: string;
  'data-testid'?: string;
}

export function InlinePhoneField({
  e164,
  country,
  defaultCountry,
  onSave,
  emptyText = '—',
  disabled,
  className,
  'data-testid': testId,
}: InlinePhoneFieldProps) {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState<PhoneInputValue | null>(() => {
    if (!e164 && !country) return null;
    return {
      e164: e164 ?? null,
      country: (country as CountryCode | null) ?? defaultCountry ?? 'US',
    };
  });
  const [saving, setSaving] = useState(false);

  async function commit() {
    const next = draft ?? { e164: null, country: defaultCountry ?? 'US' };
    if (next.e164 === (e164 ?? null) && next.country === (country ?? null)) {
      setEditing(false);
      return;
    }
    setSaving(true);
    try {
      await onSave(next);
      setEditing(false);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to save');
    } finally {
      setSaving(false);
    }
  }

  if (editing) {
    return (
      <div className={cn('flex items-center gap-1', className)}>
        <PhoneInput
          value={draft}
          onChange={(v) => setDraft(v)}
          defaultCountry={defaultCountry}
          data-testid={testId}
        />
        <button
          type="button"
          onClick={() => void commit()}
          disabled={saving}
          className="rounded px-2 py-1 text-xs font-medium hover:bg-muted disabled:opacity-50"
        >
          {saving ? <Loader2 className="h-3 w-3 animate-spin" /> : 'Save'}
        </button>
        <button
          type="button"
          onClick={() => {
            setDraft(
              e164 || country
                ? {
                    e164: e164 ?? null,
                    country: (country as CountryCode | null) ?? defaultCountry ?? 'US',
                  }
                : null,
            );
            setEditing(false);
          }}
          disabled={saving}
          className="rounded px-2 py-1 text-xs text-muted-foreground hover:bg-muted disabled:opacity-50"
        >
          Cancel
        </button>
      </div>
    );
  }

  // Display: prefer the parsed national format (more readable than raw E.164).
  let display: string | null = null;
  if (e164) {
    const parsed = parsePhone(e164, (country as CountryCode | undefined) ?? defaultCountry);
    display = parsed.national ?? e164;
  }

  return (
    <button
      type="button"
      disabled={disabled}
      onClick={() => setEditing(true)}
      data-testid={testId}
      className={cn(
        'group inline-flex items-center gap-1.5 rounded px-1 -mx-1 py-0.5 text-left text-sm',
        'hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
        disabled && 'cursor-not-allowed opacity-60 hover:bg-transparent',
        className,
      )}
    >
      <span className={cn('flex-1', !display && 'text-muted-foreground')}>
        {display ?? emptyText}
      </span>
      {!disabled && (
        <Pencil className="h-3 w-3 opacity-0 transition-opacity group-hover:opacity-50" />
      )}
    </button>
  );
}