'use client';

/**
 * Linked-berths list - plan §5.5.
 *
 * Shows every berth currently linked to the interest with per-row controls:
 *   - "Specifically pitching" toggle (`is_specific_interest`) - drives the
 *     public-map "Under Offer" sub-status. Each state surfaces its consequence
 *     in plain text below the toggle.
 *   - "Mark in EOI bundle" toggle (`is_in_eoi_bundle`).
 *   - "Set as primary" button when this row isn't already primary. The
 *     service helper handles the demote-prior-primary case in a single tx.
 *   - "Bypass EOI for this berth" with a reason textarea. Only rendered when
 *     the parent interest's `eoiStatus === 'signed'`. Writes
 *     `eoi_bypass_reason`, `eoi_bypassed_by`, `eoi_bypassed_at`.
 *   - "Remove" - calls `removeInterestBerth`.
 */

import { useMemo, useState } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { Anchor, Loader2, Pin, Plus, Star, Trash2 } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/ui/command';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { StatusPill, type StatusPillStatus } from '@/components/ui/status-pill';
import { BerthOccupancyChip } from '@/components/berths/berth-occupancy-chip';
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { HelpCircle } from 'lucide-react';
import { apiFetch } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';
import { cn } from '@/lib/utils';
import { toast } from 'sonner';

// ─── Types (mirror the API GET shape - see interest-berths.service.ts) ─────

export interface LinkedBerthRow {
  id: string;
  interestId: string;
  berthId: string;
  isPrimary: boolean;
  isSpecificInterest: boolean;
  isInEoiBundle: boolean;
  eoiBypassReason: string | null;
  eoiBypassedBy: string | null;
  eoiBypassedAt: string | null;
  addedBy: string | null;
  addedAt: string;
  notes: string | null;
  priceOverride: string | null;
  priceOverrideCurrency: string | null;
  mooringNumber: string | null;
  area: string | null;
  status: string;
  statusOverrideMode: string | null;
  lengthFt: string | null;
  widthFt: string | null;
  draftFt: string | null;
}

interface LinkedBerthsResponse {
  data: LinkedBerthRow[];
  meta: { eoiStatus: string | null };
}

interface LinkedBerthsListProps {
  interestId: string;
}

// ─── Helpers ────────────────────────────────────────────────────────────────

function statusToPill(status: string): StatusPillStatus {
  switch (status) {
    case 'available':
      return 'active';
    case 'under_offer':
      return 'sent';
    case 'sold':
      return 'completed';
    case 'reserved':
      return 'partial';
    default:
      return 'pending';
  }
}

function formatStatus(status: string): string {
  return status.replace(/_/g, ' ').replace(/\b\w/g, (m) => m.toUpperCase());
}

function formatDimensions(
  length: string | null,
  width: string | null,
  draft: string | null,
): string | null {
  const parts: string[] = [];
  const toNum = (v: string | null) => {
    if (v === null) return null;
    const n = parseFloat(v);
    return Number.isFinite(n) ? n : null;
  };
  const l = toNum(length);
  const w = toNum(width);
  // Draft intentionally omitted from the inline row strip per UAT 2026-05-24
  // — opaque to sales reps; still visible on the berth detail page.
  void toNum(draft);
  if (l !== null) parts.push(`${l.toFixed(1)} ft`);
  if (w !== null) parts.push(`${w.toFixed(1)} ft`);
  return parts.length > 0 ? parts.join(' × ') : null;
}

const SPECIFIC_CONSEQUENCE_ON =
  'This berth will show as “Under Offer” on the public-facing marina map.';
const SPECIFIC_CONSEQUENCE_OFF =
  'This berth stays marked “Available” on the public map  -  the link is internal only.';

// ─── Hooks ──────────────────────────────────────────────────────────────────

function useLinkedBerths(interestId: string) {
  return useQuery({
    queryKey: ['interest-berths', interestId] as const,
    queryFn: () => apiFetch<LinkedBerthsResponse>(`/api/v1/interests/${interestId}/berths`),
    staleTime: 30_000,
  });
}

interface PatchPayload {
  isPrimary?: boolean;
  isSpecificInterest?: boolean;
  isInEoiBundle?: boolean;
  eoiBypassReason?: string | null;
}

function useUpdateLink(interestId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: async (args: { berthId: string; patch: PatchPayload }) =>
      apiFetch(`/api/v1/interests/${interestId}/berths/${args.berthId}`, {
        method: 'PATCH',
        body: args.patch,
      }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['interest-berths', interestId] });
      qc.invalidateQueries({ queryKey: ['interests', interestId] });
    },
  });
}

function useAddLink(interestId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: async (args: { berthId: string; isSpecificInterest: boolean }) =>
      apiFetch(`/api/v1/interests/${interestId}/berths`, {
        method: 'POST',
        body: args,
      }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['interest-berths', interestId] });
      qc.invalidateQueries({ queryKey: ['interests', interestId] });
      qc.invalidateQueries({ queryKey: ['berth-recommendations', interestId] });
    },
  });
}

function useRemoveLink(interestId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: async (berthId: string) =>
      apiFetch(`/api/v1/interests/${interestId}/berths/${berthId}`, { method: 'DELETE' }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['interest-berths', interestId] });
      qc.invalidateQueries({ queryKey: ['interests', interestId] });
      qc.invalidateQueries({ queryKey: ['berth-recommendations', interestId] });
    },
  });
}

// CM-2 Part B: set/clear the deal-specific price override for one berth.
function useSetBerthPrice(interestId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: async (args: { berthId: string; price: number | null }) =>
      apiFetch(`/api/v1/interests/${interestId}/berths/${args.berthId}/price`, {
        method: 'PUT',
        body: { price: args.price },
      }),
    onSuccess: (_data, args) => {
      toast.success(args.price == null ? 'Reverted to list price.' : 'Deal price saved.');
      qc.invalidateQueries({ queryKey: ['interest-berths', interestId] });
      qc.invalidateQueries({ queryKey: ['interests', interestId] });
    },
    onError: (e: Error) => toastError(e),
  });
}

// ─── Bypass dialog ──────────────────────────────────────────────────────────

interface BypassDialogProps {
  row: LinkedBerthRow;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSubmit: (reason: string | null) => void;
  isPending: boolean;
}

function BypassDialog({ row, open, onOpenChange, onSubmit, isPending }: BypassDialogProps) {
  const [reason, setReason] = useState(row.eoiBypassReason ?? '');
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Bypass EOI for berth {row.mooringNumber}</DialogTitle>
          <DialogDescription>
            Record why this berth&apos;s individual EOI is being waived. The interest&apos;s primary
            EOI signature will cover it instead.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-2">
          <Label htmlFor={`bypass-reason-${row.berthId}`} className="text-xs">
            Reason
          </Label>
          <Textarea
            id={`bypass-reason-${row.berthId}`}
            value={reason}
            onChange={(e) => setReason(e.target.value)}
            placeholder="e.g. covered under bundle EOI signed 2025-04-12"
            rows={4}
          />
        </div>
        <DialogFooter className="gap-2 sm:gap-2">
          {row.eoiBypassReason ? (
            <Button
              type="button"
              variant="outline"
              onClick={() => onSubmit(null)}
              disabled={isPending}
            >
              Clear bypass
            </Button>
          ) : null}
          <Button
            type="button"
            variant="outline"
            onClick={() => onOpenChange(false)}
            disabled={isPending}
          >
            Cancel
          </Button>
          <Button
            type="button"
            onClick={() => onSubmit(reason.trim().length > 0 ? reason.trim() : null)}
            disabled={isPending || reason.trim().length === 0}
          >
            {isPending ? <Loader2 className="mr-1.5 size-3.5 animate-spin" aria-hidden /> : null}
            Save bypass
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// ─── Row ────────────────────────────────────────────────────────────────────

interface RowProps {
  row: LinkedBerthRow;
  portSlug: string;
  /** Current interest id so the BerthOccupancyChip can exclude this
   *  interest from the "competing" list (self-conflict makes no
   *  sense to flag). */
  interestId: string;
  eoiStatus: string | null;
  onUpdate: (berthId: string, patch: PatchPayload) => void;
  onRemove: (berthId: string) => void;
  isPending: boolean;
  /** When true, this is the deal berth - render with elevated styling. */
  highlight?: boolean;
}

function LinkedBerthRowItem({
  row,
  portSlug,
  interestId,
  eoiStatus,
  onUpdate,
  onRemove,
  isPending,
  highlight,
}: RowProps) {
  const [bypassOpen, setBypassOpen] = useState(false);
  const [confirmRemove, setConfirmRemove] = useState(false);
  const [priceDraft, setPriceDraft] = useState(row.priceOverride ?? '');
  const setBerthPrice = useSetBerthPrice(interestId);
  const dims = formatDimensions(row.lengthFt, row.widthFt, row.draftFt);
  const showBypassControl = eoiStatus === 'signed';

  const commitPrice = () => {
    const raw = priceDraft.replace(/[,\s]/g, '');
    const next = raw === '' ? null : Number(raw);
    if (next !== null && (!Number.isFinite(next) || next < 0)) return; // ignore garbage
    const prev = row.priceOverride == null ? null : Number(row.priceOverride);
    if (next === prev) return;
    setBerthPrice.mutate({ berthId: row.berthId, price: next });
  };

  return (
    <div
      className={cn(
        'rounded-lg border bg-card p-3 text-sm',
        highlight ? 'border-brand-300 ring-1 ring-brand-200 shadow-sm' : 'border-border',
      )}
    >
      <div className="flex flex-wrap items-start justify-between gap-2">
        <div className="min-w-0 space-y-1">
          <div className="flex flex-wrap items-center gap-2">
            <Link
              href={`/${portSlug}/berths/${row.berthId}`}
              className="font-semibold text-primary hover:underline"
            >
              {row.mooringNumber ?? row.berthId}
            </Link>
            {/* `row.area` is the area letter (A, B, C…) which is already the
                leading character of the mooring number rendered above, so
                surfacing it again is pure noise. Hidden 2026-05-15. */}
            <StatusPill status={statusToPill(row.status)}>{formatStatus(row.status)}</StatusPill>
            {row.status !== 'available' ? (
              <BerthOccupancyChip
                berthId={row.berthId}
                portSlug={portSlug}
                excludeInterestId={interestId}
                compact
              />
            ) : null}
            {row.isPrimary ? (
              <span className="inline-flex items-center gap-1 rounded-md border border-brand-200 bg-brand-50 px-2 py-0.5 text-xs font-medium text-brand-800">
                <Star className="size-3" aria-hidden />
                Primary
              </span>
            ) : null}
            {row.eoiBypassReason ? (
              <span className="inline-flex items-center rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-800">
                EOI bypassed
              </span>
            ) : null}
            {row.isSpecificInterest && row.statusOverrideMode === 'manual' ? (
              <span
                className="inline-flex items-center gap-1 rounded-md border border-amber-300 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-900"
                title={`This berth's status is manually pinned, which overrides "Specifically pitching" on the public map. It will display as "${formatStatus(row.status)}" — not "Under Offer" — until the pin is cleared (edit the berth's status).`}
              >
                <Pin className="size-3" aria-hidden />
                Pin overrides pitch
              </span>
            ) : null}
          </div>
          {dims ? <div className="text-xs text-muted-foreground">{dims}</div> : null}
        </div>
        <div className="flex flex-wrap items-center gap-2">
          {!row.isPrimary ? (
            <Button
              type="button"
              size="sm"
              variant="outline"
              onClick={() => onUpdate(row.berthId, { isPrimary: true })}
              disabled={isPending}
            >
              <Star className="mr-1.5 size-3.5" aria-hidden />
              Set as primary
            </Button>
          ) : null}
          <Button
            type="button"
            size="sm"
            variant="ghost"
            onClick={() => setConfirmRemove(true)}
            disabled={isPending}
            className="text-destructive hover:text-destructive"
            aria-label={`Remove berth ${row.mooringNumber ?? row.berthId}`}
          >
            <Trash2 className="size-3.5" aria-hidden />
          </Button>
        </div>
      </div>

      <TooltipProvider delayDuration={200}>
        <div className="mt-3 grid grid-cols-1 gap-3 border-t pt-3 sm:grid-cols-2">
          <div className="space-y-1">
            {/* Switch sits next to its label (gap-2.5) instead of being
                flexed to the far right via justify-between  -  when the
                column is wide, justify-between created a confusing visual
                gulf between the action and what it controls. */}
            <div className="flex items-center gap-2.5">
              <Switch
                id={`specific-${row.berthId}`}
                checked={row.isSpecificInterest}
                disabled={isPending}
                onCheckedChange={(checked) =>
                  onUpdate(row.berthId, { isSpecificInterest: checked })
                }
              />
              <Label
                htmlFor={`specific-${row.berthId}`}
                className="text-sm font-medium cursor-pointer"
              >
                Specifically pitching
              </Label>
              <Tooltip>
                <TooltipTrigger asChild>
                  <button
                    type="button"
                    className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground hover:bg-muted/60 hover:text-foreground"
                    aria-label="What does Specifically pitching do?"
                  >
                    <HelpCircle className="h-3.5 w-3.5" aria-hidden />
                  </button>
                </TooltipTrigger>
                <TooltipContent side="top" className="max-w-xs text-xs leading-snug">
                  Mark this berth as one your client is actively considering. When on, the berth
                  appears as <strong>Under Offer</strong> on the public map and counts toward the
                  recommender&apos;s &quot;heat&quot; score. Turn off if the link is legal/EOI-only.
                </TooltipContent>
              </Tooltip>
            </div>
            <p className="text-xs text-muted-foreground">
              {row.isSpecificInterest && row.statusOverrideMode === 'manual'
                ? `Overridden: this berth's status is manually pinned, so the public map shows “${formatStatus(row.status)}”, not “Under Offer”. Clear the pin on the berth to let this take effect.`
                : row.isSpecificInterest
                  ? SPECIFIC_CONSEQUENCE_ON
                  : SPECIFIC_CONSEQUENCE_OFF}
            </p>
          </div>
          <div className="space-y-1">
            <div className="flex items-center gap-2.5">
              <Switch
                id={`bundle-${row.berthId}`}
                checked={row.isInEoiBundle}
                disabled={isPending}
                onCheckedChange={(checked) => onUpdate(row.berthId, { isInEoiBundle: checked })}
              />
              <Label
                htmlFor={`bundle-${row.berthId}`}
                className="text-sm font-medium cursor-pointer"
              >
                Include in EOI
              </Label>
              <Tooltip>
                <TooltipTrigger asChild>
                  <button
                    type="button"
                    className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground hover:bg-muted/60 hover:text-foreground"
                    aria-label="What does Include in EOI do?"
                  >
                    <HelpCircle className="h-3.5 w-3.5" aria-hidden />
                  </button>
                </TooltipTrigger>
                <TooltipContent side="top" className="max-w-xs text-xs leading-snug">
                  Include this berth in the EOI&apos;s signed berth range. When on, the berth is
                  covered by the same signature and shows up in the EOI&apos;s{' '}
                  <strong>Berth Range</strong> form field (e.g. &quot;A1-A3, B5-B7&quot;). Turn off
                  to keep the link without legal coverage.
                </TooltipContent>
              </Tooltip>
            </div>
            <p className="text-xs text-muted-foreground">
              {row.isInEoiBundle
                ? 'Covered by the interest’s EOI signature.'
                : 'Not covered by the EOI bundle.'}
            </p>
          </div>
        </div>
      </TooltipProvider>

      {/* CM-2 Part B: deal-specific price. Overrides the berth's list price for
          this interest only; flows into the EOI/document {{berth.price}} token. */}
      <div className="mt-3 flex flex-wrap items-center gap-3 border-t pt-3">
        <div className="min-w-0 flex-1 space-y-0.5">
          <p className="text-sm font-medium">Deal price</p>
          <p className="text-xs text-muted-foreground">
            Overrides the berth&apos;s list price for this deal only. Leave blank to use the list
            price.
          </p>
        </div>
        <div className="flex items-center gap-2">
          <input
            type="text"
            inputMode="numeric"
            className="w-36 rounded-md border px-2 py-1 text-sm tabular-nums"
            placeholder="List price"
            value={priceDraft}
            disabled={isPending || setBerthPrice.isPending}
            onChange={(e) => setPriceDraft(e.target.value)}
            onBlur={commitPrice}
            aria-label={`Deal price for ${row.mooringNumber ?? row.berthId}`}
          />
          {row.priceOverrideCurrency ? (
            <span className="text-xs text-muted-foreground">{row.priceOverrideCurrency}</span>
          ) : null}
        </div>
      </div>

      {showBypassControl ? (
        // Bypass section reads as a third toggle-style row: label + description
        // on the left, action button inline with the description so it doesn't
        // float far-right while the toggles above are anchored left.
        <div className="mt-3 flex flex-wrap items-center gap-3 border-t pt-3">
          <div className="min-w-0 flex-1 space-y-0.5">
            <p className="text-sm font-medium">Bypass EOI for this berth</p>
            {row.eoiBypassReason ? (
              <p className="text-xs text-muted-foreground">
                <span className="font-medium text-foreground/80">Bypassed:</span>{' '}
                {row.eoiBypassReason}
              </p>
            ) : (
              <p className="text-xs text-muted-foreground">
                Record a reason if this berth doesn&apos;t need its own EOI.
              </p>
            )}
          </div>
          <Button
            type="button"
            size="sm"
            variant="outline"
            onClick={() => setBypassOpen(true)}
            disabled={isPending}
          >
            {row.eoiBypassReason ? 'Edit bypass' : 'Add bypass'}
          </Button>
        </div>
      ) : null}

      {bypassOpen ? (
        <BypassDialog
          row={row}
          open={bypassOpen}
          onOpenChange={setBypassOpen}
          isPending={isPending}
          onSubmit={(reason) => {
            onUpdate(row.berthId, { eoiBypassReason: reason });
            setBypassOpen(false);
          }}
        />
      ) : null}

      <Dialog open={confirmRemove} onOpenChange={setConfirmRemove}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Remove berth {row.mooringNumber} from interest?</DialogTitle>
            <DialogDescription>
              The berth itself isn&apos;t deleted - only its link to this interest.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="gap-2 sm:gap-2">
            <Button
              type="button"
              variant="outline"
              onClick={() => setConfirmRemove(false)}
              disabled={isPending}
            >
              Cancel
            </Button>
            <Button
              type="button"
              variant="destructive"
              onClick={() => {
                onRemove(row.berthId);
                setConfirmRemove(false);
              }}
              disabled={isPending}
            >
              Remove
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

// ─── Add berth dialog ───────────────────────────────────────────────────────

interface BerthOption {
  id: string;
  mooringNumber: string;
  area: string | null;
  status: string;
}

interface AddBerthDialogProps {
  open: boolean;
  onOpenChange: (next: boolean) => void;
  interestId: string;
  /** IDs already linked - filtered out of the picker so the rep can't double-add. */
  excludeIds: Set<string>;
}

function AddBerthDialog({ open, onOpenChange, interestId, excludeIds }: AddBerthDialogProps) {
  const [selected, setSelected] = useState<BerthOption | null>(null);
  const [markSpecific, setMarkSpecific] = useState(false);
  const mutation = useAddLink(interestId);

  const { data: options, isLoading } = useQuery<{ data: BerthOption[] }>({
    queryKey: ['berth-options', 'add-to-interest'],
    queryFn: () => apiFetch<{ data: BerthOption[] }>('/api/v1/berths/options'),
    enabled: open,
    staleTime: 60_000,
  });

  // Filter out berths already linked to the interest so the rep can't
  // double-add. Pre-natural-sorted by the service.
  const available = useMemo<BerthOption[]>(() => {
    const list = options?.data ?? [];
    return list.filter((b) => !excludeIds.has(b.id));
  }, [options, excludeIds]);

  async function handleAdd() {
    if (!selected) return;
    try {
      await mutation.mutateAsync({
        berthId: selected.id,
        isSpecificInterest: markSpecific,
      });
      toast.success(`Linked berth ${selected.mooringNumber}`);
      onOpenChange(false);
    } catch (err) {
      toastError(err);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>Add berth to interest</DialogTitle>
          <DialogDescription>
            Link an existing berth. Defaults to a non-primary, non-bundle link. Edit those flags on
            the row after it lands.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-3">
          <div className="rounded-md border">
            <Command>
              <CommandInput placeholder="Search by mooring number…" />
              <CommandList>
                {isLoading ? (
                  <div className="p-3 text-sm text-muted-foreground">Loading berths…</div>
                ) : (
                  <>
                    <CommandEmpty>No berths available.</CommandEmpty>
                    <CommandGroup heading={`${available.length} available`}>
                      {available.map((b) => (
                        <CommandItem
                          key={b.id}
                          value={`${b.mooringNumber} ${b.area ?? ''} ${b.status}`}
                          onSelect={() => setSelected(b)}
                          className={cn('cursor-pointer', selected?.id === b.id ? 'bg-muted' : '')}
                        >
                          <span className="font-medium">{b.mooringNumber}</span>
                          <span className="ml-2 text-xs text-muted-foreground">
                            {formatStatus(b.status)}
                          </span>
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </>
                )}
              </CommandList>
            </Command>
          </div>
          {selected ? (
            <div className="rounded-md border bg-muted/30 px-3 py-2 text-sm">
              Selected: <span className="font-semibold">{selected.mooringNumber}</span>
            </div>
          ) : null}
          <div className="flex items-center gap-2">
            <Switch
              id="add-berth-specific"
              checked={markSpecific}
              onCheckedChange={setMarkSpecific}
            />
            <Label htmlFor="add-berth-specific" className="text-sm">
              Mark as Specifically pitching (shows Under Offer on the public map)
            </Label>
          </div>
        </div>
        <DialogFooter>
          <Button
            variant="outline"
            onClick={() => onOpenChange(false)}
            disabled={mutation.isPending}
          >
            Cancel
          </Button>
          <Button onClick={handleAdd} disabled={!selected || mutation.isPending}>
            {mutation.isPending ? (
              <Loader2 className="mr-1.5 size-3.5 animate-spin" aria-hidden />
            ) : (
              <Plus className="mr-1.5 size-3.5" aria-hidden />
            )}
            Add berth
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// ─── Component ──────────────────────────────────────────────────────────────

export function LinkedBerthsList({ interestId }: LinkedBerthsListProps) {
  const params = useParams<{ portSlug: string }>();
  const portSlug = params?.portSlug ?? '';
  const { data, isLoading } = useLinkedBerths(interestId);
  const updateMutation = useUpdateLink(interestId);
  const removeMutation = useRemoveLink(interestId);

  const rows = data?.data ?? [];
  const eoiStatus = data?.meta.eoiStatus ?? null;
  const isPending = updateMutation.isPending || removeMutation.isPending;
  const [addOpen, setAddOpen] = useState(false);
  const linkedBerthIds = useMemo(() => new Set(rows.map((r) => r.berthId)), [rows]);

  // Three-bucket split per the Deal-berth + Bundle model:
  //   • dealBerth: the single is_primary row - the one templates/EOI
  //     resolve through ("the berth for this deal").
  //   • bundleRows: in EOI bundle but not primary.
  //   • exploringRows: everything else (also-considering, internal-only links).
  // The same row never appears in two buckets - primary takes precedence,
  // then bundle, then exploring.
  const dealBerth = rows.find((r) => r.isPrimary) ?? null;
  const bundleRows = rows.filter((r) => !r.isPrimary && r.isInEoiBundle);
  const exploringRows = rows.filter((r) => !r.isPrimary && !r.isInEoiBundle);

  const renderRow = (row: LinkedBerthRow, options?: { highlight?: boolean }) => (
    <LinkedBerthRowItem
      key={row.id}
      row={row}
      portSlug={portSlug}
      interestId={interestId}
      eoiStatus={eoiStatus}
      onUpdate={(berthId, patch) => updateMutation.mutate({ berthId, patch })}
      onRemove={(berthId) => removeMutation.mutate(berthId)}
      isPending={isPending}
      highlight={options?.highlight}
    />
  );

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
        <CardTitle className="flex items-center gap-2 text-base">
          <Anchor className="size-4 text-brand-600" aria-hidden />
          Linked berths{rows.length > 0 ? ` (${rows.length})` : ''}
        </CardTitle>
        <Button
          type="button"
          size="sm"
          variant="outline"
          onClick={() => setAddOpen(true)}
          aria-label="Add a berth to this interest"
        >
          <Plus className="mr-1.5 size-3.5" aria-hidden />
          Add berth
        </Button>
      </CardHeader>
      <CardContent className="space-y-5">
        {isLoading ? (
          <div className="space-y-2">
            {[0, 1].map((i) => (
              <div key={i} className="h-24 animate-pulse rounded-lg bg-muted" />
            ))}
          </div>
        ) : rows.length === 0 ? (
          <p className="py-6 text-center text-sm text-muted-foreground">
            No berths linked yet. Use the recommender below to add one.
          </p>
        ) : (
          <>
            <BerthSection
              title="Deal berth"
              hint="The one berth this interest is anchored to  -  drives templates, the EOI primary slot, and the public-map status. Promote any other berth to take its place."
              emptyText="No deal berth selected. Pick one of the linked berths below as the primary."
              count={dealBerth ? 1 : 0}
            >
              {dealBerth ? renderRow(dealBerth, { highlight: true }) : null}
            </BerthSection>

            {bundleRows.length > 0 ? (
              <BerthSection
                title="In EOI bundle"
                hint="Additional berths covered by the same EOI signature. Won't drive templates, but the client's signature applies to all of them."
                count={bundleRows.length}
              >
                {bundleRows.map((row) => renderRow(row))}
              </BerthSection>
            ) : null}

            {exploringRows.length > 0 ? (
              <BerthSection
                title="Also considering"
                hint="Linked for sales context (alternates the client glanced at, fallback options, etc.). No EOI coverage; toggle “In EOI bundle” to promote one here."
                count={exploringRows.length}
              >
                {exploringRows.map((row) => renderRow(row))}
              </BerthSection>
            ) : null}
          </>
        )}
        {updateMutation.isError ? (
          <p className="text-sm text-destructive">
            {(updateMutation.error as Error)?.message ?? 'Failed to update berth.'}
          </p>
        ) : null}
        {removeMutation.isError ? (
          <p className="text-sm text-destructive">
            {(removeMutation.error as Error)?.message ?? 'Failed to remove berth.'}
          </p>
        ) : null}
      </CardContent>
      {addOpen ? (
        <AddBerthDialog
          open
          onOpenChange={setAddOpen}
          interestId={interestId}
          excludeIds={linkedBerthIds}
        />
      ) : null}
    </Card>
  );
}

/** Section header + body wrapper for the three-bucket layout. Kept inline
 *  because it's only used here - promoting it to /shared isn't worth the
 *  indirection for a card-header + a help line. */
function BerthSection({
  title,
  hint,
  count,
  emptyText,
  children,
}: {
  title: string;
  hint: string;
  count: number;
  emptyText?: string;
  children: React.ReactNode;
}) {
  return (
    <section className="space-y-2">
      <div className="space-y-0.5">
        <div className="flex items-center gap-2">
          <h4 className="text-sm font-semibold text-foreground">
            {title}
            {count > 0 ? (
              <span className="ml-1.5 text-xs font-normal text-muted-foreground">({count})</span>
            ) : null}
          </h4>
        </div>
        <p className="text-xs text-muted-foreground">{hint}</p>
      </div>
      {count === 0 && emptyText ? (
        <p className="rounded-md border border-dashed bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
          {emptyText}
        </p>
      ) : (
        <div className="space-y-2">{children}</div>
      )}
    </section>
  );
}
