pn-new-crm/src/components/clients/contacts-editor.tsx

'use client';

import { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import {
  Loader2,
  Mail,
  MessageSquare,
  MoreHorizontal,
  Phone,
  Plus,
  Star,
  Trash2,
} from 'lucide-react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { InlineEditableField } from '@/components/shared/inline-editable-field';
import { InlinePhoneField } from '@/components/shared/inline-phone-field';
import { PhoneInput, type PhoneInputValue } from '@/components/shared/phone-input';
import { apiFetch } from '@/lib/api/client';
import { cn } from '@/lib/utils';

interface Contact {
  id: string;
  channel: string;
  value: string;
  valueE164?: string | null;
  valueCountry?: string | null;
  label?: string | null;
  isPrimary: boolean;
}

const CHANNEL_OPTIONS = [
  { value: 'email', label: 'Email' },
  { value: 'phone', label: 'Phone' },
  { value: 'whatsapp', label: 'WhatsApp' },
  { value: 'other', label: 'Other' },
];

const CHANNEL_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
  email: Mail,
  phone: Phone,
  whatsapp: MessageSquare,
  other: MoreHorizontal,
};

export function ContactsEditor({ clientId, contacts }: { clientId: string; contacts: Contact[] }) {
  const qc = useQueryClient();
  const [adding, setAdding] = useState(false);

  function invalidate() {
    qc.invalidateQueries({ queryKey: ['clients', clientId] });
  }

  const updateMutation = useMutation({
    mutationFn: async ({
      contactId,
      patch,
    }: {
      contactId: string;
      patch: Partial<
        Pick<Contact, 'channel' | 'value' | 'valueE164' | 'valueCountry' | 'label' | 'isPrimary'>
      >;
    }) =>
      apiFetch(`/api/v1/clients/${clientId}/contacts/${contactId}`, {
        method: 'PATCH',
        body: patch,
      }),
    onSuccess: invalidate,
  });

  const addMutation = useMutation({
    mutationFn: async (data: {
      channel: string;
      value: string;
      valueE164?: string | null;
      valueCountry?: string | null;
      label?: string;
    }) =>
      apiFetch(`/api/v1/clients/${clientId}/contacts`, {
        method: 'POST',
        body: { ...data, isPrimary: false },
      }),
    onSuccess: invalidate,
  });

  const removeMutation = useMutation({
    mutationFn: async (contactId: string) =>
      apiFetch(`/api/v1/clients/${clientId}/contacts/${contactId}`, { method: 'DELETE' }),
    onSuccess: invalidate,
  });

  return (
    <div className="space-y-2">
      {contacts.length === 0 && !adding && (
        <p className="text-sm text-muted-foreground">No contacts yet</p>
      )}

      {contacts.map((c) => (
        <ContactRow
          key={c.id}
          contact={c}
          onUpdate={(patch) => updateMutation.mutateAsync({ contactId: c.id, patch })}
          onRemove={async () => {
            if (!confirm('Remove this contact?')) return;
            await removeMutation.mutateAsync(c.id);
          }}
        />
      ))}

      {adding ? (
        <NewContactForm
          onCancel={() => setAdding(false)}
          onSave={async (data) => {
            await addMutation.mutateAsync(data);
            setAdding(false);
          }}
        />
      ) : (
        <Button
          type="button"
          variant="outline"
          size="sm"
          onClick={() => setAdding(true)}
          className="w-full justify-center"
        >
          <Plus className="h-3.5 w-3.5 mr-1.5" />
          Add contact
        </Button>
      )}
    </div>
  );
}

function ContactRow({
  contact,
  onUpdate,
  onRemove,
}: {
  contact: Contact;
  onUpdate: (
    patch: Partial<
      Pick<Contact, 'channel' | 'value' | 'valueE164' | 'valueCountry' | 'label' | 'isPrimary'>
    >,
  ) => Promise<unknown>;
  onRemove: () => void;
}) {
  const Icon = CHANNEL_ICONS[contact.channel] ?? MoreHorizontal;

  async function togglePrimary() {
    try {
      await onUpdate({ isPrimary: !contact.isPrimary });
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to update');
    }
  }

  async function changeChannel(next: string) {
    if (next === contact.channel) return;
    try {
      await onUpdate({ channel: next });
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to update');
    }
  }

  return (
    <div className="group flex items-center gap-2 p-2 rounded-lg border bg-muted/30 text-sm">
      {/* Left: channel + value */}
      <div className="flex items-center gap-2 flex-1 min-w-0">
        <ChannelPicker value={contact.channel} onChange={changeChannel}>
          <Icon className="h-3.5 w-3.5 text-muted-foreground" />
        </ChannelPicker>
        <div className="min-w-0">
          {contact.channel === 'phone' || contact.channel === 'whatsapp' ? (
            <InlinePhoneField
              e164={contact.valueE164 ?? null}
              country={contact.valueCountry ?? null}
              onSave={async ({ e164, country }) => {
                if (!e164) {
                  toast.error('Phone number is required');
                  return;
                }
                await onUpdate({ value: e164, valueE164: e164, valueCountry: country });
              }}
            />
          ) : (
            <InlineEditableField
              value={contact.value}
              onSave={async (v) => {
                if (!v) {
                  toast.error('Value is required');
                  return;
                }
                await onUpdate({ value: v });
              }}
            />
          )}
        </div>
      </div>

      {/* Right: tag + actions */}
      <div className="flex items-center gap-2 shrink-0">
        <div className="w-28 text-xs text-muted-foreground text-right">
          <InlineEditableField
            value={
              contact.label && contact.label.toLowerCase() !== 'primary' ? contact.label : null
            }
            emptyText="Add tag"
            placeholder="work, home…"
            onSave={async (v) => {
              await onUpdate({ label: v });
            }}
          />
        </div>

        <button
          type="button"
          onClick={togglePrimary}
          title={contact.isPrimary ? 'Primary' : 'Make primary'}
          className={cn(
            'p-1 rounded hover:bg-background/60 transition-colors',
            contact.isPrimary ? 'text-primary' : 'text-muted-foreground/50',
          )}
        >
          <Star className={cn('h-3.5 w-3.5', contact.isPrimary && 'fill-current')} />
        </button>

        <button
          type="button"
          onClick={onRemove}
          title="Remove"
          className="p-1 rounded text-muted-foreground/50 hover:text-destructive hover:bg-background/60 opacity-0 group-hover:opacity-100 transition-all"
        >
          <Trash2 className="h-3.5 w-3.5" />
        </button>
      </div>
    </div>
  );
}

function ChannelPicker({
  value,
  onChange,
  children,
}: {
  value: string;
  onChange: (next: string) => void;
  children: React.ReactNode;
}) {
  return (
    <Select value={value} onValueChange={onChange}>
      <SelectTrigger
        className="h-7 w-7 p-0 border-none bg-transparent hover:bg-background/60 [&>svg]:hidden justify-center"
        aria-label="Channel"
      >
        <SelectValue>{children}</SelectValue>
      </SelectTrigger>
      <SelectContent>
        {CHANNEL_OPTIONS.map((o) => (
          <SelectItem key={o.value} value={o.value}>
            {o.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

function NewContactForm({
  onSave,
  onCancel,
}: {
  onSave: (data: {
    channel: string;
    value: string;
    valueE164?: string | null;
    valueCountry?: string | null;
    label?: string;
  }) => Promise<void>;
  onCancel: () => void;
}) {
  const [channel, setChannel] = useState('email');
  const [value, setValue] = useState('');
  const [phoneValue, setPhoneValue] = useState<PhoneInputValue | null>(null);
  const [label, setLabel] = useState('');
  const [saving, setSaving] = useState(false);

  const isPhoneChannel = channel === 'phone' || channel === 'whatsapp';

  async function submit() {
    if (isPhoneChannel) {
      if (!phoneValue?.e164) return;
      setSaving(true);
      try {
        await onSave({
          channel,
          value: phoneValue.e164,
          valueE164: phoneValue.e164,
          valueCountry: phoneValue.country,
          label: label.trim() || undefined,
        });
      } catch (err) {
        toast.error(err instanceof Error ? err.message : 'Failed to add contact');
      } finally {
        setSaving(false);
      }
      return;
    }
    if (!value.trim()) return;
    setSaving(true);
    try {
      await onSave({ channel, value: value.trim(), label: label.trim() || undefined });
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to add contact');
    } finally {
      setSaving(false);
    }
  }

  const submitDisabled = saving || (isPhoneChannel ? !phoneValue?.e164 : !value.trim());

  return (
    <div className="flex items-center gap-2 p-2 rounded-lg border bg-muted/30 text-sm">
      <Select
        value={channel}
        onValueChange={(next) => {
          setChannel(next);
          // Reset cross-mode state so a stale email doesn't ride along on a phone submit.
          if (next === 'phone' || next === 'whatsapp') setValue('');
          else setPhoneValue(null);
        }}
      >
        <SelectTrigger className="h-7 w-28 text-xs">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {CHANNEL_OPTIONS.map((o) => (
            <SelectItem key={o.value} value={o.value}>
              {o.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      {isPhoneChannel ? (
        <div className="flex-1 min-w-0">
          <PhoneInput
            value={phoneValue}
            onChange={(v) => setPhoneValue(v)}
            data-testid="new-contact-phone"
          />
        </div>
      ) : (
        <Input
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder={channel === 'email' ? 'name@example.com' : 'value'}
          className="h-7 text-sm flex-1 min-w-0"
          autoFocus
          disabled={saving}
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              e.preventDefault();
              void submit();
            }
            if (e.key === 'Escape') onCancel();
          }}
        />
      )}

      <Input
        value={label}
        onChange={(e) => setLabel(e.target.value)}
        placeholder="tag (optional)"
        className="h-7 text-xs w-28"
        disabled={saving}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            e.preventDefault();
            void submit();
          }
          if (e.key === 'Escape') onCancel();
        }}
      />

      <Button type="button" size="sm" onClick={submit} disabled={submitDisabled}>
        {saving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : 'Save'}
      </Button>
      <Button type="button" size="sm" variant="ghost" onClick={onCancel} disabled={saving}>
        Cancel
      </Button>
    </div>
  );
}