pn-new-crm/src/components/documents/document-detail.tsx

'use client';

import { useMemo, useState } from 'react';
import Link from 'next/link';
import type { Route } from 'next';
import { useRouter } from 'next/navigation';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { ArrowLeft, Bell, Download, Mail, Send, Trash2, UserPlus, X } from 'lucide-react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
import { PageHeader } from '@/components/shared/page-header';
import { StatusPill, type StatusPillStatus } from '@/components/ui/status-pill';
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { useConfirmation } from '@/hooks/use-confirmation';
import { apiFetch } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';
import { cleanSignerName } from '@/components/documents/signing-progress';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

/** Capitalize the first letter; rest stays as-is. Used for normalising
 *  free-text enum values ('signer'/'approver'/'sent'/'pending') for
 *  display without resorting to full ALL-CAPS that other surfaces use. */
function capFirst(s: string | null | undefined): string {
  if (!s) return '';
  return s.charAt(0).toUpperCase() + s.slice(1);
}

interface DetailDoc {
  id: string;
  title: string;
  status: string;
  documentType: string;
  documensoId: string | null;
  signedFileId: string | null;
  reservationId: string | null;
  interestId: string | null;
  clientId: string | null;
  yachtId: string | null;
  companyId: string | null;
  createdAt: string;
  createdBy: string;
}

interface DetailSigner {
  id: string;
  signerName: string;
  signerEmail: string;
  signerRole: string;
  signingOrder: number;
  status: string;
  /** Null = never invited yet → "Send invitation" CTA.
   *  Set + status pending → "Send reminder" CTA. */
  invitedAt: string | null;
  signedAt: string | null;
  signingUrl: string | null;
}

interface DetailEvent {
  id: string;
  eventType: string;
  createdAt: string;
  signerId: string | null;
  eventData: Record<string, unknown> | null;
}

interface DetailWatcher {
  userId: string;
  addedBy: string;
  addedAt: string;
}

interface DetailResponse {
  data: {
    document: DetailDoc;
    signers: DetailSigner[];
    events: DetailEvent[];
    watchers: DetailWatcher[];
  };
}

const STATUS_PILL_MAP: Record<string, StatusPillStatus> = {
  draft: 'draft',
  sent: 'sent',
  partially_signed: 'partial',
  completed: 'completed',
  signed: 'signed',
  expired: 'expired',
  cancelled: 'cancelled',
  rejected: 'rejected',
  pending: 'pending',
  declined: 'declined',
};

const SIGNER_PILL_MAP: Record<string, StatusPillStatus> = {
  pending: 'pending',
  signed: 'signed',
  declined: 'declined',
};

interface DocumentDetailProps {
  documentId: string;
  portSlug: string;
}

export function DocumentDetail({ documentId, portSlug }: DocumentDetailProps) {
  const router = useRouter();
  const queryClient = useQueryClient();
  const [isCancelling, setIsCancelling] = useState(false);
  const { confirm, dialog: confirmDialog } = useConfirmation();

  const { data, isLoading, error } = useQuery<DetailResponse>({
    queryKey: ['document-detail', documentId],
    queryFn: () => apiFetch<DetailResponse>(`/api/v1/documents/${documentId}?detail=true`),
  });

  useRealtimeInvalidation({
    'document:updated': [['document-detail', documentId]],
    'document:sent': [['document-detail', documentId]],
    'document:completed': [['document-detail', documentId]],
    'document:cancelled': [['document-detail', documentId]],
    'document:rejected': [['document-detail', documentId]],
    'document:expired': [['document-detail', documentId]],
    'document:signer:signed': [['document-detail', documentId]],
    'document:signer:opened': [['document-detail', documentId]],
  });

  if (isLoading) {
    return (
      <div className="flex flex-col gap-4">
        <div className="h-24 animate-pulse rounded-xl bg-muted/40" />
        <div className="grid gap-4 lg:grid-cols-[2fr_1fr]">
          <div className="h-64 animate-pulse rounded-md bg-muted/40" />
          <div className="h-64 animate-pulse rounded-md bg-muted/40" />
        </div>
      </div>
    );
  }

  if (error || !data) {
    return (
      <div className="flex flex-col gap-4">
        <PageHeader
          title="Document not found"
          description="This document was deleted or you don't have access to it."
          actions={
            <Button asChild variant="outline">
              <Link href={`/${portSlug}/documents`}>
                <ArrowLeft className="mr-1.5 h-4 w-4" aria-hidden />
                Back to documents
              </Link>
            </Button>
          }
        />
      </div>
    );
  }

  const { document: doc, signers, events, watchers } = data.data;

  const handleRemind = async (signerId: string) => {
    try {
      await apiFetch(`/api/v1/documents/${documentId}/remind`, {
        method: 'POST',
        body: { signerId },
      });
      toast.success('Reminder sent');
      queryClient.invalidateQueries({ queryKey: ['document-detail', documentId] });
    } catch (err) {
      toastError(err);
    }
  };

  // #67: state-aware action button. When a signer has no `invitedAt`
  // they've never been mailed — fire the initial invitation (the same
  // route the EOI tab uses; handles v2 distribute-or-self-heal).
  const handleSendInvitation = async (signerId: string) => {
    try {
      await apiFetch(`/api/v1/documents/${documentId}/send-invitation`, {
        method: 'POST',
        body: { signerId },
      });
      toast.success('Invitation sent');
      queryClient.invalidateQueries({ queryKey: ['document-detail', documentId] });
    } catch (err) {
      toastError(err);
    }
  };

  const handleCancel = async () => {
    const ok = await confirm({
      title: 'Cancel document',
      description: 'Cancel this document? This cancels the signing request and cannot be undone.',
      confirmLabel: 'Cancel document',
    });
    if (!ok) return;
    setIsCancelling(true);
    try {
      await apiFetch(`/api/v1/documents/${documentId}/cancel`, { method: 'POST' });
      toast.success('Document cancelled');
      router.push(`/${portSlug}/documents`);
    } catch (err) {
      toastError(err);
      setIsCancelling(false);
    }
  };

  const handleEmailSignedPdf = async () => {
    try {
      const draft = await apiFetch<{
        data: { to: string[]; subject: string; attachments: Array<{ fileId: string }> };
      }>(`/api/v1/documents/${documentId}/compose-completion-email`, { method: 'POST' });
      toast.info(
        `Email composer prepared for ${draft.data.to.length} signer${draft.data.to.length === 1 ? '' : 's'} - opens in PR8 wizard`,
      );
    } catch (err) {
      toastError(err);
    }
  };

  const isInFlight = ['sent', 'partially_signed'].includes(doc.status);
  const isComplete = ['completed', 'signed'].includes(doc.status);

  const subjectLink = doc.reservationId
    ? { href: `/${portSlug}/berth-reservations/${doc.reservationId}`, label: 'Reservation' }
    : doc.interestId
      ? { href: `/${portSlug}/interests/${doc.interestId}`, label: 'Interest' }
      : doc.clientId
        ? { href: `/${portSlug}/clients/${doc.clientId}`, label: 'Client' }
        : doc.yachtId
          ? { href: `/${portSlug}/yachts/${doc.yachtId}`, label: 'Yacht' }
          : doc.companyId
            ? { href: `/${portSlug}/companies/${doc.companyId}`, label: 'Company' }
            : null;

  return (
    <div className="flex flex-col gap-4">
      <PageHeader
        eyebrow={doc.documentType.replace(/_/g, ' ')}
        title={doc.title}
        description={`Created ${new Date(doc.createdAt).toLocaleDateString('en-GB')}`}
        kpiLine={
          <>
            <StatusPill status={STATUS_PILL_MAP[doc.status] ?? 'pending'} withDot>
              {capFirst(doc.status.replace(/_/g, ' '))}
            </StatusPill>
            <span>
              {signers.filter((s) => s.status === 'signed').length}/{signers.length} signed
            </span>
            {watchers.length > 0 ? <span>{watchers.length} watching</span> : null}
          </>
        }
        actions={
          <div className="flex items-center gap-2">
            <Button asChild variant="outline" size="sm">
              <Link href={`/${portSlug}/documents`}>
                <ArrowLeft className="mr-1.5 h-4 w-4" aria-hidden /> Back
              </Link>
            </Button>
            {isComplete && doc.signedFileId ? (
              <>
                <Button asChild size="sm">
                  <Link href={`/api/v1/files/${doc.signedFileId}/download`}>
                    <Download className="mr-1.5 h-4 w-4" aria-hidden /> Download signed PDF
                  </Link>
                </Button>
                <Button size="sm" variant="outline" onClick={handleEmailSignedPdf}>
                  <Mail className="mr-1.5 h-4 w-4" aria-hidden /> Email signatories
                </Button>
              </>
            ) : null}
            {isInFlight ? (
              <Button size="sm" variant="outline" onClick={handleCancel} disabled={isCancelling}>
                <X className="mr-1.5 h-4 w-4" /> Cancel
              </Button>
            ) : null}
          </div>
        }
        variant="gradient"
      />

      <div className="grid gap-4 lg:grid-cols-[2fr_1fr]">
        {/* Left column */}
        <div className="flex flex-col gap-4">
          <section className="rounded-md border bg-white p-4">
            <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
              Signers
            </h2>
            {signers.length === 0 ? (
              <p className="text-sm text-muted-foreground">No signers attached.</p>
            ) : (
              <ul className="space-y-3">
                {signers.map((signer, idx) => (
                  <li
                    key={signer.id}
                    className="flex items-start gap-3 rounded-md border bg-white p-3 shadow-xs transition-colors hover:bg-muted/30"
                  >
                    <div
                      className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold ${
                        signer.status === 'signed'
                          ? 'bg-success-bg text-success'
                          : signer.status === 'declined'
                            ? 'bg-error-bg text-error'
                            : 'bg-slate-100 text-slate-600'
                      }`}
                    >
                      {idx + 1}
                    </div>
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center justify-between gap-2">
                        <div className="font-medium text-foreground">
                          {/* #67 cleanup: strip `(was: …)` / `(placeholder)`
                              email-redirect leak suffixes that the EOI tab
                              already scrubs on its own SigningProgress card. */}
                          {cleanSignerName(signer.signerName) || signer.signerEmail}
                        </div>
                        <StatusPill status={SIGNER_PILL_MAP[signer.status] ?? 'pending'}>
                          {capFirst(signer.status)}
                        </StatusPill>
                      </div>
                      <div className="text-xs text-muted-foreground">
                        {signer.signerEmail} · {capFirst(signer.signerRole)}
                      </div>
                      <div className="mt-1 text-xs text-muted-foreground">
                        {signer.signedAt
                          ? `Signed ${new Date(signer.signedAt).toLocaleDateString('en-GB')}`
                          : signer.invitedAt
                            ? `Invited ${new Date(signer.invitedAt).toLocaleDateString('en-GB')}`
                            : 'Not yet invited'}
                      </div>
                      {signer.status === 'pending' && doc.documensoId && isInFlight ? (
                        <div className="mt-2 flex items-center gap-2">
                          {/* #67 state-aware CTA: invited yet? remind. else: send. */}
                          {signer.invitedAt ? (
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => handleRemind(signer.id)}
                            >
                              <Bell className="mr-1.5 h-3 w-3" aria-hidden /> Send reminder
                            </Button>
                          ) : (
                            <Button size="sm" onClick={() => handleSendInvitation(signer.id)}>
                              <Send className="mr-1.5 h-3 w-3" aria-hidden /> Send invitation
                            </Button>
                          )}
                          {signer.signingUrl ? (
                            <button
                              type="button"
                              onClick={() => {
                                navigator.clipboard.writeText(signer.signingUrl!);
                                toast.success('Signing link copied');
                              }}
                              className="text-xs text-brand hover:underline"
                            >
                              Copy signing link
                            </button>
                          ) : null}
                        </div>
                      ) : null}
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </section>

          {subjectLink ? (
            <section className="rounded-md border bg-white p-4">
              <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
                Linked entity
              </h2>
              <Link
                href={subjectLink.href as Route}
                className="text-sm font-medium text-brand hover:underline"
              >
                {subjectLink.label} →
              </Link>
            </section>
          ) : null}
        </div>

        {/* Right column */}
        <div className="flex flex-col gap-4">
          <WatchersCard documentId={documentId} watchers={watchers} />

          <section className="rounded-md border bg-white p-4">
            <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
              Activity
            </h2>
            {events.length === 0 ? (
              <p className="text-xs text-muted-foreground">No events yet.</p>
            ) : (
              <ul className="space-y-2">
                {events.slice(0, 12).map((e) => (
                  <li key={e.id} className="text-xs">
                    <div className="font-medium text-foreground">
                      {e.eventType.replace(/_/g, ' ')}
                    </div>
                    <div className="text-muted-foreground">
                      {new Date(e.createdAt).toLocaleString('en-GB')}
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </section>
        </div>
      </div>
      {confirmDialog}
    </div>
  );
}

/**
 * #67 watcher Add UI. The watchers list previously displayed only
 * user-id stubs (truncated UUID) with a delete button and no way to
 * add new watchers. This card resolves user IDs to display names
 * via the existing `/api/v1/admin/users/picker` endpoint (already
 * used by the registry-driven settings form), surfaces a "+ Add"
 * select, and keeps the delete affordance unchanged.
 */
interface PickerUser {
  id: string;
  email: string;
  name: string | null;
}

function WatchersCard({ documentId, watchers }: { documentId: string; watchers: DetailWatcher[] }) {
  const queryClient = useQueryClient();
  const [selected, setSelected] = useState('');

  const { data: usersData } = useQuery({
    queryKey: ['admin', 'users-picker'],
    queryFn: () => apiFetch<{ data: PickerUser[] }>('/api/v1/admin/users/picker'),
  });
  const users = usersData?.data ?? [];

  const userById = useMemo(() => {
    const map = new Map<string, PickerUser>();
    for (const u of users) map.set(u.id, u);
    return map;
  }, [users]);

  const watcherIds = new Set(watchers.map((w) => w.userId));
  const candidates = users.filter((u) => !watcherIds.has(u.id));

  async function addWatcher(userId: string) {
    if (!userId) return;
    try {
      await apiFetch(`/api/v1/documents/${documentId}/watchers`, {
        method: 'POST',
        body: { userId },
      });
      toast.success('Watcher added');
      setSelected('');
      queryClient.invalidateQueries({ queryKey: ['document-detail', documentId] });
    } catch (err) {
      toastError(err);
    }
  }

  async function removeWatcher(userId: string) {
    try {
      await apiFetch(`/api/v1/documents/${documentId}/watchers/${userId}`, {
        method: 'DELETE',
      });
      toast.success('Watcher removed');
      queryClient.invalidateQueries({ queryKey: ['document-detail', documentId] });
    } catch (err) {
      toastError(err);
    }
  }

  return (
    <section className="rounded-md border bg-white p-4">
      <h2 className="mb-1 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
        Watchers
      </h2>
      <p className="mb-3 text-xs text-muted-foreground">
        Watchers receive an in-app notification on every signing event (opened, signed, declined,
        completed).
      </p>

      {watchers.length === 0 ? (
        <p className="text-xs text-muted-foreground">No one is watching this document yet.</p>
      ) : (
        <ul className="mb-3 space-y-1">
          {watchers.map((w) => {
            const u = userById.get(w.userId);
            return (
              <li key={w.userId} className="flex items-center justify-between text-sm">
                <span className="truncate">
                  {u?.name ?? u?.email ?? `User ${w.userId.slice(0, 8)}…`}
                </span>
                <button
                  type="button"
                  aria-label="Remove watcher"
                  onClick={() => removeWatcher(w.userId)}
                  className="text-muted-foreground hover:text-destructive"
                >
                  <Trash2 className="h-3.5 w-3.5" aria-hidden />
                </button>
              </li>
            );
          })}
        </ul>
      )}

      <div className="flex items-center gap-2">
        <Select value={selected} onValueChange={setSelected}>
          <SelectTrigger className="h-9 flex-1 text-xs">
            <SelectValue placeholder="Add a watcher…" />
          </SelectTrigger>
          <SelectContent>
            {candidates.length === 0 ? (
              <div className="px-2 py-3 text-xs text-muted-foreground">
                All users in this port are already watching.
              </div>
            ) : (
              candidates.map((u) => (
                <SelectItem key={u.id} value={u.id}>
                  {u.name ?? u.email}
                </SelectItem>
              ))
            )}
          </SelectContent>
        </Select>
        <Button
          size="sm"
          variant="outline"
          disabled={!selected}
          onClick={() => addWatcher(selected)}
        >
          <UserPlus className="mr-1.5 h-3 w-3" aria-hidden /> Add
        </Button>
      </div>
    </section>
  );
}