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, MoreHorizontal, Phone, Plus, Star, Trash2 } from 'lucide-react';
import { WhatsAppIcon } from '@/components/icons/whatsapp';
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 { useConfirmation } from '@/hooks/use-confirmation';
import { apiFetch } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';
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: WhatsAppIcon,
  other: MoreHorizontal,
};

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

  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 () => {
            const ok = await confirm({
              title: 'Remove contact',
              description: 'Remove this contact?',
              confirmLabel: 'Remove',
            });
            if (!ok) 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" aria-hidden />
          Add contact
        </Button>
      )}
      {confirmDialog}
    </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;
  const [phoneEditing, setPhoneEditing] = useState(false);

  async function togglePrimary() {
    try {
      await onUpdate({ isPrimary: !contact.isPrimary });
    } catch (err) {
      toastError(err);
    }
  }

  async function changeChannel(next: string) {
    if (next === contact.channel) return;
    try {
      await onUpdate({ channel: next });
    } catch (err) {
      toastError(err);
    }
  }

  return (
    <div
      data-editing={phoneEditing ? 'true' : undefined}
      className={cn(
        'group rounded-lg border text-sm transition-all duration-150',
        // Active-edit dilation: lift the row out of the muted baseline with a
        // soft primary ring + slightly brighter surface. Single visual signal
        // replaces the need for any "now editing" label.
        phoneEditing
          ? 'bg-card border-primary/30 ring-2 ring-primary/15 shadow-sm p-3 gap-3'
          : 'bg-muted/30 p-2 gap-2',
        // Stack value editor / action cluster on mobile; single row on sm+.
        'flex flex-col sm:flex-row sm:items-center',
      )}
    >
      {/* Top / left: channel + value */}
      <div className="flex min-w-0 flex-1 items-center gap-2">
        <ChannelPicker value={contact.channel} onChange={changeChannel}>
          <Icon className="h-3.5 w-3.5 text-muted-foreground" aria-hidden />
        </ChannelPicker>
        <div className="min-w-0 flex-1">
          {contact.channel === 'phone' || contact.channel === 'whatsapp' ? (
            <InlinePhoneField
              e164={contact.valueE164 ?? null}
              country={contact.valueCountry ?? null}
              onEditingChange={setPhoneEditing}
              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>

      {/* Bottom / right: tag + actions.
          Two layers of hiding compose here:
            (a) phoneEditing - when the phone editor is open, hide the entire
                action cluster (tag + star + trash) so the user can focus on
                the form without chips fighting for space.
            (b) contact.value - when the value is empty (stale import row,
                aborted edit), hide just the tag + Make-primary star;
                neither makes sense without a value. The trash icon stays
                so the user can clean up the empty entry.
          On touch (no hover), trash is always rendered; on desktop it
          fades in on hover only (sm:opacity-0 + sm:group-hover:opacity-100). */}
      {!phoneEditing ? (
        <div className="flex shrink-0 items-center justify-end gap-2">
          {contact.value ? (
            <>
              <div className="w-28 text-right text-xs text-muted-foreground">
                <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(
                  'rounded p-1 transition-colors hover:bg-background/60',
                  contact.isPrimary ? 'text-primary' : 'text-muted-foreground/50',
                )}
              >
                <Star className={cn('h-3.5 w-3.5', contact.isPrimary && 'fill-current')} />
              </button>
            </>
          ) : null}

          <button
            type="button"
            onClick={onRemove}
            title="Remove"
            className="rounded p-1 text-muted-foreground/50 transition-all hover:bg-background/60 hover:text-destructive sm:opacity-0 sm:group-hover:opacity-100"
          >
            <Trash2 className="h-3.5 w-3.5" aria-hidden />
          </button>
        </div>
      ) : null}
    </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) {
        toastError(err);
      } finally {
        setSaving(false);
      }
      return;
    }
    if (!value.trim()) return;
    setSaving(true);
    try {
      await onSave({ channel, value: value.trim(), label: label.trim() || undefined });
    } catch (err) {
      toastError(err);
    } finally {
      setSaving(false);
    }
  }

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

  return (
    // Single row on sm+; wraps onto multiple lines below 640px so the channel
    // picker, value field, label, and buttons each get their own usable width.
    <div className="flex flex-wrap items-center gap-2 rounded-lg border bg-muted/30 p-2 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="min-w-0 flex-1 basis-full sm:basis-auto">
          <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 min-w-0 flex-1 basis-full text-sm sm:basis-auto"
          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 w-28 text-xs"
        disabled={saving}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            e.preventDefault();
            void submit();
          }
          if (e.key === 'Escape') onCancel();
        }}
      />

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