'use client';

import { useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useParams } from 'next/navigation';

import { DetailLayout } from '@/components/shared/detail-layout';
import { DetailNotFound } from '@/components/shared/detail-not-found';
import { InterestDetailHeader } from '@/components/interests/interest-detail-header';
import { getInterestTabs } from '@/components/interests/interest-tabs';
import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { useBreadcrumbHint } from '@/hooks/use-breadcrumb-hint';
import { apiFetch } from '@/lib/api/client';
import { deriveInterestBerthLabel } from '@/lib/templates/interest-berth-label';

interface InterestData {
  id: string;
  portId: string;
  clientId: string;
  clientName: string | null;
  /** Linked client's primary email (display value). Powers the header
   *  "Email" button and the EOI prereq checklist. */
  clientPrimaryEmail: string | null;
  /** Linked client's primary phone (display value). Powers the header
   *  "Call" button. */
  clientPrimaryPhone: string | null;
  /** Linked client's primary phone in E.164 form ("+1XXXXXXXXXX"). Used
   *  by wa.me to assemble the WhatsApp deep-link. */
  clientPrimaryPhoneE164: string | null;
  /** True when the linked client has any primary address row. Used by
   *  the EOI prereq checklist on the Documents tab. */
  clientHasAddress: boolean;
  /** Surfaced for the bell badge on the detail header (pending/snoozed
   *  reminders linked to this interest). */
  activeReminderCount?: number;
  /** Surfaced for the most-recent-note teaser on the Overview tab. */
  notesCount?: number;
  recentNote?: {
    id: string;
    content: string;
    authorId: string;
    authorName: string | null;
    createdAt: string;
  } | null;
  berthId: string | null;
  berthMooringNumber: string | null;
  /** Every linked berth's mooring (sorted). Drives the multi-berth label
   *  rendered in the breadcrumb + header. Falls back to the primary
   *  mooring alone when empty/absent. */
  berthMoorings?: string[];
  /** Linked yacht - null until the rep ties one to the deal. Required to
   *  leave Enquiry; surfaced inline in the stage picker as a prereq. */
  yachtId: string | null;
  /** Yacht-fit dimensions (numeric strings from postgres). Drive the
   *  recommender panel guard ("Set desired dimensions to see recommendations"). */
  desiredLengthFt: string | null;
  desiredWidthFt: string | null;
  desiredDraftFt: string | null;
  pipelineStage: string;
  leadCategory: string | null;
  source: string | null;
  eoiStatus: string | null;
  contractStatus: string | null;
  depositStatus: string | null;
  reservationStatus: string | null;
  dateFirstContact: string | null;
  dateLastContact: string | null;
  dateEoiSent: string | null;
  dateEoiSigned: string | null;
  dateContractSent: string | null;
  dateContractSigned: string | null;
  dateDepositReceived: string | null;
  reminderEnabled: boolean;
  reminderDays: number | null;
  reminderLastFired: string | null;
  /** Phase 2 risk-signal dates derived in getInterestById from event
   *  tables (document_events, berth_tenancies, conflicting won
   *  interests). Feed DealPulseChip; null when no matching event. */
  dateDocumentDeclined: string | null;
  dateReservationCancelled: string | null;
  dateBerthSoldToOther: string | null;
  notes: string | null;
  archivedAt: string | null;
  createdAt: string;
  updatedAt: string;
  outcome?: string | null;
  outcomeReason?: string | null;
  tags: Array<{ id: string; name: string; color: string }>;
}

interface InterestDetailProps {
  interestId: string;
  currentUserId?: string;
}

export function InterestDetail({ interestId, currentUserId }: InterestDetailProps) {
  const params = useParams<{ portSlug: string }>();
  const portSlug = params?.portSlug ?? '';

  const { data, isLoading, error } = useQuery<InterestData>({
    queryKey: ['interests', interestId],
    queryFn: () =>
      apiFetch<{ data: InterestData }>(`/api/v1/interests/${interestId}`).then((r) => r.data),
    // F17: don't retry 404s - they're intentional (wrong port, archived,
    // deleted). Let the error state render the EmptyState below.
    retry: (failureCount, err) => {
      const status = (err as { status?: number } | null | undefined)?.status;
      if (status === 404 || status === 403) return false;
      return failureCount < 2;
    },
  });

  useRealtimeInvalidation({
    'interest:updated': [['interests', interestId]],
    'interest:stageChanged': [['interests', interestId]],
    'interest:archived': [['interests', interestId]],
    'interest:berthLinked': [['interests', interestId]],
    'interest:berthUnlinked': [['interests', interestId]],
  });

  const { setChrome } = useMobileChrome();
  const titleForChrome: string | null = data?.clientName ?? null;
  useEffect(() => {
    setChrome({ title: titleForChrome, showBackButton: true });
    return () => setChrome({ title: null, showBackButton: false });
  }, [titleForChrome, setChrome]);

  // Topbar breadcrumb: Clients › Mary Smith › Interest › B17.
  // Parent client links straight back to the client detail; the
  // current crumb is the primary berth's mooring (or "Interest" if
  // no berth linked yet - same trick the page H1 uses).
  useBreadcrumbHint(
    data
      ? {
          parents:
            data.clientId && data.clientName
              ? [{ label: data.clientName, href: `/${portSlug}/clients/${data.clientId}` }]
              : [],
          current:
            deriveInterestBerthLabel(data.berthMoorings) ?? data.berthMooringNumber ?? 'Interest',
        }
      : null,
  );

  // F17: explicit "not found" state when the API 404'd or 403'd.
  if (error && !isLoading) {
    const status = (error as { status?: number } | null | undefined)?.status;
    return (
      <DetailNotFound
        entity="interest"
        backHref={`/${portSlug}/interests`}
        backLabel="Back to interests"
        status={status}
      />
    );
  }

  const tabs = data
    ? getInterestTabs({
        interestId,
        currentUserId,
        clientId: data.clientId ?? null,
        interest: data,
      })
    : [];

  return (
    <DetailLayout
      header={data ? <InterestDetailHeader portSlug={portSlug} interest={data} /> : null}
      tabs={tabs}
      defaultTab="overview"
      isLoading={isLoading}
    />
  );
}
