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 { useFilter, matches } from './useFilter';
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);
  const filter = useFilter('Filter contacts');

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

  // Everything a person might half-remember about someone: the name, either address, the company.
  const shown = contacts.filter((c) => matches(filter.query, c.fullName, c.org, c.title, ...c.emails, ...c.phones));

  // 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. A filter that matches nothing says SO — otherwise it reads as an
  // address book that lost its contacts.
  const notice = error
    ? t('dav.readFailed', { name: selected.displayName, reason: String(error) })
    : isLoading
      ? 'Loading contacts…'
      : contacts.length === 0
        ? `${selected.displayName} has no contacts.`
        : shown.length === 0
          ? `No contact matches “${filter.query}”.`
          : null;
  const sorted = [...shown].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">
            {filter.query ? `${shown.length} of ${contacts.length}` : contacts.length}{' '}
            {contacts.length === 1 ? 'contact' : 'contacts'}
          </div>
        </div>
        {filter.input}
        <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>
);