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 { apiFetch } from '@/lib/api/client';
import { cn } from '@/lib/utils';

interface Contact {
  id: string;
  channel: string;
  value: string;
  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' | '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; 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' | '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">
          <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; label?: string }) => Promise<void>;
  onCancel: () => void;
}) {
  const [channel, setChannel] = useState('email');
  const [value, setValue] = useState('');
  const [label, setLabel] = useState('');
  const [saving, setSaving] = useState(false);

  async function submit() {
    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);
    }
  }

  return (
    <div className="flex items-center gap-2 p-2 rounded-lg border bg-muted/30 text-sm">
      <Select value={channel} onValueChange={setChannel}>
        <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>

      <Input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder={channel === 'email' ? 'name@example.com' : '+1 555 0100'}
        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={!value.trim() || saving}>
        {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>
  );
}