caldav/web/dav/ContactsView.tsx

import { useState } from 'react';
import { Building2, Mail, Phone, User, Pencil, Trash2, Check, X, Plus } from 'lucide-react';
import { useDavContacts, useSelectedCollection } from './useDavData';
import { useDavEdit, CREATING } from './useDavEdit';
import { useTranslation } from 'officerdev';

// Right panel of /contacts: the selected address book as cards, sorted by name.
//
// `hasPhoto` is a flag, not the bytes — the sidecar keeps embedded photos out of the list response so a
// book with a hundred cards is not a hundred base64 blobs. Until there is an endpoint that serves one
// card's photo, an initial stands in.

const initials = (name: string) =>
  name
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase() ?? '')
    .join('') || '?';

const FIELD = 'rounded-md border bg-background px-2 py-1 text-sm';

const blankDraft = () => ({ fullName: '', email: '', phone: '' });

export const ContactsView = () => {
  const { t } = useTranslation();
  const { selected, isLoading: loadingCollections } = useSelectedCollection('addressbook');
  const { contacts, isLoading, error } = useDavContacts(selected?.path ?? null);
  const edit = useDavEdit(['caldav', 'contacts', selected?.path ?? null]);
  const [editing, setEditing] = useState<string | null>(null);
  const [draft, setDraft] = useState({ fullName: '', email: '', phone: '' });
  const [confirming, setConfirming] = useState<string | null>(null);
  const [draftNew, setDraftNew] = useState<ReturnType<typeof blankDraft> | null>(null);

  if (loadingCollections) return <Placeholder text="Loading address books…" />;
  if (!selected) return <Placeholder text="No address books yet. Create one from a CardDAV client." />;

  // Not an early return: the header carries the only way to ADD a card, and an empty address book is
  // exactly when somebody wants it.
  const notice = error
    ? t('dav.readFailed', { name: selected.displayName, reason: String(error) })
    : isLoading
      ? 'Loading contacts…'
      : contacts.length === 0
        ? `${selected.displayName} has no contacts.`
        : null;

  const sorted = [...contacts].sort((a, b) => a.fullName.localeCompare(b.fullName));

  const submitNew = (e: React.FormEvent) => {
    e.preventDefault();
    if (!draftNew?.fullName.trim()) return;
    void edit
      .createContact(selected.path, {
        fullName: draftNew.fullName.trim(),
        emails: [draftNew.email].filter(Boolean),
        phones: [draftNew.phone].filter(Boolean),
      })
      .then((ok) => ok && setDraftNew(null));
  };

  return (
    <div className="flex h-full flex-col">
      <header className="flex shrink-0 items-center justify-between gap-3 border-b px-6 py-3">
        <div className="min-w-0">
          <div className="truncate text-sm font-semibold leading-tight">{selected.displayName}</div>
          <div className="text-xs text-muted-foreground">
            {contacts.length} {contacts.length === 1 ? 'contact' : 'contacts'}
          </div>
        </div>
        <button
          onClick={() => setDraftNew((d) => (d ? null : blankDraft()))}
          className="flex shrink-0 items-center gap-1.5 rounded-lg bg-primary/10 px-3 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-primary/20"
        >
          <Plus className="h-3.5 w-3.5" />
          New contact
        </button>
      </header>

      <div className="flex-1 overflow-y-auto">
        {/* Name, one email, one phone. A card can hold far more, and a CardDAV client can put it there —
            this is the form for adding somebody from their business card, not for modelling a person. */}
        {draftNew && (
          <form onSubmit={submitNew} className="mx-auto flex max-w-4xl flex-col gap-3 px-6 pt-6">
            <div className="flex flex-col gap-3 rounded-xl border bg-card p-4">
              <input
                autoFocus
                value={draftNew.fullName}
                onChange={(e) => setDraftNew({ ...draftNew, fullName: e.target.value })}
                placeholder="Name"
                className={FIELD}
              />
              <div className="flex flex-wrap gap-2">
                <input
                  value={draftNew.email}
                  onChange={(e) => setDraftNew({ ...draftNew, email: e.target.value })}
                  placeholder="Email"
                  className={`${FIELD} min-w-0 flex-1 text-xs`}
                />
                <input
                  value={draftNew.phone}
                  onChange={(e) => setDraftNew({ ...draftNew, phone: e.target.value })}
                  placeholder="Phone"
                  className={`${FIELD} min-w-0 flex-1 text-xs tabular-nums`}
                />
              </div>
              <div className="flex items-center gap-2">
                <button
                  type="submit"
                  disabled={edit.busy === CREATING || !draftNew.fullName.trim()}
                  className="flex items-center gap-1 rounded-md bg-primary/10 px-3 py-1.5 text-xs font-medium text-primary disabled:opacity-50"
                >
                  <Check className="h-3 w-3" /> {edit.busy === CREATING ? 'Creating…' : 'Create'}
                </button>
                <button
                  type="button"
                  onClick={() => setDraftNew(null)}
                  className="rounded-md px-2 py-1.5 text-xs text-muted-foreground"
                >
                  Cancel
                </button>
                {edit.error && <span className="text-xs text-destructive">{edit.error}</span>}
              </div>
            </div>
          </form>
        )}

        {notice && <Placeholder text={notice} />}
        <div className="mx-auto grid max-w-4xl grid-cols-1 gap-3 p-6 sm:grid-cols-2">
          {sorted.map((contact) => (
          <article key={contact.uid} className="flex gap-3 rounded-xl border bg-card p-3">
            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sky-500/15 text-sm font-semibold text-sky-600">
              {initials(contact.fullName)}
            </div>
            <div className="min-w-0 flex-1">
              <div className="truncate text-sm font-medium">{contact.fullName || '(no name)'}</div>
              {(contact.title || contact.org) && (
                <div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
                  <Building2 className="h-3 w-3 shrink-0" />
                  <span className="truncate">{[contact.title, contact.org].filter(Boolean).join(' · ')}</span>
                </div>
              )}
              {contact.emails.map((email) => (
                <a
                  key={email}
                  href={`mailto:${email}`}
                  className="mt-1 flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
                >
                  <Mail className="h-3 w-3 shrink-0" />
                  <span className="truncate">{email}</span>
                </a>
              ))}
              {contact.phones.map((phone) => (
                <a
                  key={phone}
                  href={`tel:${phone}`}
                  className="mt-1 flex items-center gap-1 text-xs tabular-nums text-muted-foreground hover:text-foreground"
                >
                  <Phone className="h-3 w-3 shrink-0" />
                  <span className="truncate">{phone}</span>
                </a>
              ))}

              {/* Name, one email, one phone — the three fields worth correcting from a list. A card can
                  hold several of each; editing rewrites the FIRST and leaves the rest untouched, which
                  is why `setProperty` replaces a line rather than rebuilding the card. */}
              {editing === contact.href && (
                <form
                  className="mt-2 flex flex-col gap-2"
                  onSubmit={(e) => {
                    e.preventDefault();
                    if (!contact.href) return;
                    /* The form shows the FIRST email and phone; a card can hold several. Sending just
                       the one would delete the rest, so the others are carried through untouched. */
                    void edit
                      .save(contact.href, {
                        fullName: draft.fullName,
                        emails: [draft.email, ...contact.emails.slice(1)].filter(Boolean),
                        phones: [draft.phone, ...contact.phones.slice(1)].filter(Boolean),
                      })
                      .then((ok) => ok && setEditing(null));
                  }}
                >
                  <input
                    autoFocus
                    value={draft.fullName}
                    onChange={(e) => setDraft((d) => ({ ...d, fullName: e.target.value }))}
                    placeholder="Name"
                    className="rounded-md border bg-background px-2 py-1 text-sm"
                  />
                  <input
                    value={draft.email}
                    onChange={(e) => setDraft((d) => ({ ...d, email: e.target.value }))}
                    placeholder="Email"
                    className="rounded-md border bg-background px-2 py-1 text-xs"
                  />
                  <input
                    value={draft.phone}
                    onChange={(e) => setDraft((d) => ({ ...d, phone: e.target.value }))}
                    placeholder="Phone"
                    className="rounded-md border bg-background px-2 py-1 text-xs tabular-nums"
                  />
                  <div className="flex items-center gap-2">
                    <button
                      type="submit"
                      disabled={edit.busy === contact.href}
                      className="flex items-center gap-1 rounded-md bg-primary/10 px-2 py-1 text-xs text-primary disabled:opacity-50"
                    >
                      <Check className="h-3 w-3" /> {edit.busy === contact.href ? 'Saving…' : 'Save'}
                    </button>
                    <button
                      type="button"
                      onClick={() => setEditing(null)}
                      className="rounded-md px-2 py-1 text-xs text-muted-foreground"
                    >
                      Cancel
                    </button>
                  </div>
                </form>
              )}
            </div>

            {contact.href && editing !== contact.href && (
              <div className="flex shrink-0 items-start gap-1">
                {confirming === contact.href ? (
                  <>
                    <button
                      onClick={() => void edit.remove(contact.href!).then(() => setConfirming(null))}
                      disabled={edit.busy === contact.href}
                      title="Delete this contact"
                      className="rounded p-1 text-destructive hover:bg-destructive/10 disabled:opacity-50"
                    >
                      <Check className="h-3.5 w-3.5" />
                    </button>
                    <button onClick={() => setConfirming(null)} className="rounded p-1 opacity-50 hover:opacity-100">
                      <X className="h-3.5 w-3.5" />
                    </button>
                  </>
                ) : (
                  <>
                    <button
                      onClick={() => {
                        setDraft({
                          fullName: contact.fullName ?? '',
                          email: contact.emails[0] ?? '',
                          phone: contact.phones[0] ?? '',
                        });
                        setEditing(contact.href!);
                      }}
                      title="Edit"
                      className="rounded p-1 text-muted-foreground hover:text-foreground"
                    >
                      <Pencil className="h-3.5 w-3.5" />
                    </button>
                    <button
                      onClick={() => setConfirming(contact.href!)}
                      title="Delete"
                      className="rounded p-1 text-muted-foreground hover:text-destructive"
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </button>
                  </>
                )}
              </div>
            )}
            </article>
          ))}
        </div>
      </div>
    </div>
  );
};

const Placeholder = ({ text }: { text: string }) => (
  <div className="flex h-full flex-col items-center justify-center gap-2 p-6 text-center text-sm text-muted-foreground">
    <User className="h-6 w-6 opacity-40" />
    <span>{text}</span>
  </div>
);