'use client';

import Link from 'next/link';
import type { Route } from 'next';
import { useQuery } from '@tanstack/react-query';
import { ArrowLeft, Bell, Download, FileSignature, Mail } 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 { EmptyState } from '@/components/ui/empty-state';
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { apiFetch } from '@/lib/api/client';

interface ReservationDoc {
  id: string;
  title: string;
  status: string;
  documentType: string;
  signedFileId: string | null;
  signers: Array<{ id: string; status: string; signerName: string }>;
}

interface ReservationData {
  id: string;
  status: string;
  startDate: string;
  endDate: string | null;
  tenureType: string;
  contractFileId: string | null;
  berthId: string;
  yachtId: string;
  clientId: string;
  notes: string | null;
}

const RESERVATION_PILL: Record<string, StatusPillStatus> = {
  pending: 'pending',
  active: 'active',
  ended: 'archived',
  cancelled: 'cancelled',
};

interface ReservationDetailProps {
  reservationId: string;
  portSlug: string;
}

export function ReservationDetail({ reservationId, portSlug }: ReservationDetailProps) {
  const reservation = useQuery<{ data: ReservationData }>({
    queryKey: ['reservation', reservationId],
    queryFn: () => apiFetch(`/api/v1/berth-reservations/${reservationId}`),
  });

  const documentsForRes = useQuery<{ data: ReservationDoc[] }>({
    queryKey: ['documents', 'by-reservation', reservationId],
    queryFn: () =>
      apiFetch(
        `/api/v1/documents?documentType=reservation_agreement&signatureOnly=true&limit=10`,
      ).then((res) => {
        const r = res as { data: ReservationDoc[] & Array<{ reservationId?: string }> };
        return {
          data: r.data.filter(
            (d: ReservationDoc & { reservationId?: string }) => d.reservationId === reservationId,
          ),
        } as { data: ReservationDoc[] };
      }),
  });

  useRealtimeInvalidation({
    'document:created': [['documents', 'by-reservation', reservationId]],
    'document:completed': [
      ['documents', 'by-reservation', reservationId],
      ['reservation', reservationId],
    ],
    'document:cancelled': [['documents', 'by-reservation', reservationId]],
  });

  if (reservation.isLoading) {
    return <div className="h-32 animate-pulse rounded-md bg-muted/40" />;
  }

  if (reservation.error || !reservation.data) {
    return (
      <PageHeader
        title="Reservation not found"
        actions={
          <Button asChild variant="outline">
            <Link href={`/${portSlug}/berths`}>
              <ArrowLeft className="mr-1.5 h-4 w-4" /> Back
            </Link>
          </Button>
        }
      />
    );
  }

  const res = reservation.data.data;
  const docs = documentsForRes.data?.data ?? [];
  const activeAgreement = docs.find((d) => ['sent', 'partially_signed'].includes(d.status));
  const completedAgreement = docs.find((d) => ['completed', 'signed'].includes(d.status));

  const renderAgreementCard = (): React.ReactNode => {
    if (completedAgreement) {
      return (
        <div className="flex flex-col gap-3 rounded-md border bg-success-bg/50 p-4">
          <div className="flex items-start justify-between gap-2">
            <div>
              <h3 className="text-sm font-semibold text-foreground">Agreement signed</h3>
              <p className="mt-1 text-xs text-muted-foreground">{completedAgreement.title}</p>
            </div>
            <StatusPill status="completed" withDot>
              Completed
            </StatusPill>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            {completedAgreement.signedFileId ? (
              <Button asChild size="sm" variant="outline">
                <Link href={`/api/v1/files/${completedAgreement.signedFileId}/download`}>
                  <Download className="mr-1.5 h-4 w-4" /> Download signed PDF
                </Link>
              </Button>
            ) : null}
            <Button asChild size="sm" variant="outline">
              <Link href={`/${portSlug}/documents/${completedAgreement.id}`}>
                <Mail className="mr-1.5 h-4 w-4" /> View document
              </Link>
            </Button>
          </div>
          <p className="text-xs text-muted-foreground">
            Signed contract attached to this reservation.
          </p>
        </div>
      );
    }

    if (activeAgreement) {
      const signedCount = activeAgreement.signers.filter((s) => s.status === 'signed').length;
      return (
        <div className="flex flex-col gap-3 rounded-md border bg-brand-50 p-4">
          <div className="flex items-start justify-between gap-2">
            <div>
              <h3 className="text-sm font-semibold text-foreground">Agreement out for signing</h3>
              <p className="mt-1 text-xs text-muted-foreground">
                {signedCount}/{activeAgreement.signers.length} signed · {activeAgreement.title}
              </p>
            </div>
            <StatusPill
              status={activeAgreement.status === 'partially_signed' ? 'partial' : 'sent'}
              withDot
            >
              {activeAgreement.status.replace(/_/g, ' ')}
            </StatusPill>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <Button asChild size="sm">
              <Link href={`/${portSlug}/documents/${activeAgreement.id}`}>
                <FileSignature className="mr-1.5 h-4 w-4" /> View document
              </Link>
            </Button>
            <Button
              size="sm"
              variant="outline"
              onClick={async () => {
                try {
                  await apiFetch(`/api/v1/documents/${activeAgreement.id}/remind`, {
                    method: 'POST',
                  });
                  toast.success('Reminder sent');
                } catch (err) {
                  toast.error(err instanceof Error ? err.message : 'Failed');
                }
              }}
            >
              <Bell className="mr-1.5 h-4 w-4" /> Remind signers
            </Button>
          </div>
        </div>
      );
    }

    return (
      <EmptyState
        icon={<FileSignature className="h-7 w-7" />}
        title="No reservation agreement yet"
        body="Generate an agreement for the parties to sign before activation."
        actions={
          <Button asChild>
            <Link
              href={
                `/${portSlug}/documents/new?reservationId=${reservationId}&documentType=reservation_agreement` as Route
              }
            >
              Generate agreement
            </Link>
          </Button>
        }
      />
    );
  };

  return (
    <div className="flex flex-col gap-4">
      <PageHeader
        eyebrow="Berth reservation"
        title={`Reservation #${res.id.slice(0, 8)}`}
        description={`${res.tenureType.replace(/_/g, ' ')} · ${new Date(res.startDate).toLocaleDateString('en-GB')}${res.endDate ? ` → ${new Date(res.endDate).toLocaleDateString('en-GB')}` : ''}`}
        kpiLine={
          <>
            <StatusPill status={RESERVATION_PILL[res.status] ?? 'pending'} withDot>
              {res.status}
            </StatusPill>
            {res.contractFileId ? <span>Contract attached</span> : <span>No contract</span>}
          </>
        }
        actions={
          <Button asChild variant="outline">
            <Link href={`/${portSlug}/berths`}>
              <ArrowLeft className="mr-1.5 h-4 w-4" /> Back to berths
            </Link>
          </Button>
        }
        variant="gradient"
      />

      <div className="grid gap-4 lg:grid-cols-[2fr_1fr]">
        <div className="flex flex-col gap-4">
          <section className="rounded-md border bg-white p-4">
            <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
              Reservation details
            </h2>
            <dl className="grid grid-cols-2 gap-3 text-sm">
              <div>
                <dt className="text-xs text-muted-foreground">Berth</dt>
                <dd>
                  <Link
                    href={`/${portSlug}/berths/${res.berthId}` as Route}
                    className="font-medium text-brand hover:underline"
                  >
                    {res.berthId.slice(0, 8)}…
                  </Link>
                </dd>
              </div>
              <div>
                <dt className="text-xs text-muted-foreground">Yacht</dt>
                <dd>
                  <Link
                    href={`/${portSlug}/yachts/${res.yachtId}` as Route}
                    className="font-medium text-brand hover:underline"
                  >
                    {res.yachtId.slice(0, 8)}…
                  </Link>
                </dd>
              </div>
              <div>
                <dt className="text-xs text-muted-foreground">Client</dt>
                <dd>
                  <Link
                    href={`/${portSlug}/clients/${res.clientId}` as Route}
                    className="font-medium text-brand hover:underline"
                  >
                    {res.clientId.slice(0, 8)}…
                  </Link>
                </dd>
              </div>
              <div>
                <dt className="text-xs text-muted-foreground">Tenure</dt>
                <dd className="font-medium">{res.tenureType.replace(/_/g, ' ')}</dd>
              </div>
            </dl>
            {res.notes ? (
              <div className="mt-3 border-t pt-3 text-sm">
                <div className="text-xs text-muted-foreground">Notes</div>
                <p className="mt-1 text-foreground whitespace-pre-wrap">{res.notes}</p>
              </div>
            ) : null}
          </section>
        </div>

        <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">
              Agreement
            </h2>
            {renderAgreementCard()}
          </section>
        </div>
      </div>
    </div>
  );
}