pn-new-crm/src/components/interests/berth-recommender-panel.tsx

'use client';

import { useState, useMemo } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import { ChevronDown, ChevronUp, Filter, Flame, Plus, RefreshCw, Sparkles } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { StatusPill, type StatusPillStatus } from '@/components/ui/status-pill';
import { AddBerthToInterestDialog } from '@/components/interests/add-berth-to-interest-dialog';
import { apiFetch } from '@/lib/api/client';
import { cn } from '@/lib/utils';

// ─── Types (mirror the recommender service Recommendation shape) ───────────

type Tier = 'A' | 'B' | 'C' | 'D';

interface HeatBreakdown {
  recency: number;
  furthestStage: number;
  interestCount: number;
  eoiCount: number;
  total: number;
}

export interface Recommendation {
  berthId: string;
  mooringNumber: string;
  area: string | null;
  tier: Tier;
  fitScore: number;
  sizeBufferPct: number | null;
  heat: HeatBreakdown | null;
  reasons: {
    dimensional: string;
    pipeline: string;
    amenities?: string;
    heat?: string;
  };
  lengthFt: number | null;
  widthFt: number | null;
  draftFt: number | null;
  status: string;
  amenities: {
    powerCapacity: number | null;
    voltage: number | null;
    access: string | null;
    mooringType: string | null;
    cleatCapacity: string | null;
  };
}

interface AmenityFilters {
  minPowerCapacityKw?: number;
  requiredVoltage?: number;
  requiredAccess?: string;
  requiredMooringType?: string;
  requiredCleatCapacity?: string;
}

interface BerthRecommenderPanelProps {
  interestId: string;
  /** Display label for the dimensions in the header. */
  desiredLengthFt: number | null;
  desiredWidthFt: number | null;
  desiredDraftFt: number | null;
}

const TIER_LABELS: Record<Tier, { label: string; tone: string }> = {
  A: { label: 'Open', tone: 'border-emerald-200 bg-emerald-50 text-emerald-800' },
  B: { label: 'Fall-through', tone: 'border-amber-200 bg-amber-50 text-amber-800' },
  C: { label: 'Active interest', tone: 'border-sky-200 bg-sky-50 text-sky-800' },
  D: { label: 'Late stage', tone: 'border-slate-300 bg-slate-100 text-slate-700' },
};

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: number | null,
  width: number | null,
  draft: number | null,
): string {
  const parts: string[] = [];
  if (length !== null) parts.push(`${length.toFixed(1)}ft L`);
  if (width !== null) parts.push(`${width.toFixed(1)}ft W`);
  if (draft !== null) parts.push(`${draft.toFixed(1)}ft D`);
  return parts.join(' · ');
}

function formatDesired(length: number | null, width: number | null, draft: number | null): string {
  const parts: string[] = [];
  if (length !== null) parts.push(`${length}ft L`);
  if (width !== null) parts.push(`${width}ft W`);
  if (draft !== null) parts.push(`${draft}ft D`);
  return parts.length > 0 ? parts.join(' · ') : 'no dimensions set';
}

interface RecommendationCardProps {
  rec: Recommendation;
  portSlug: string;
  onAdd: (rec: Recommendation) => void;
}

function RecommendationCard({ rec, portSlug, onAdd }: RecommendationCardProps) {
  const [expanded, setExpanded] = useState(false);
  const tier = TIER_LABELS[rec.tier];
  const showHeat = rec.heat && rec.heat.total > 0;

  return (
    <div className="rounded-lg border bg-card text-sm">
      <button
        type="button"
        onClick={() => setExpanded((v) => !v)}
        className="flex w-full items-start gap-3 p-3 text-left hover:bg-muted/40"
      >
        <div className="min-w-0 flex-1 space-y-1">
          <div className="flex flex-wrap items-center gap-2">
            <span className="font-semibold">{rec.mooringNumber}</span>
            {rec.area ? <span className="text-xs text-muted-foreground">{rec.area}</span> : null}
            <StatusPill status={statusToPill(rec.status)}>{formatStatus(rec.status)}</StatusPill>
            <span
              className={cn(
                'inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium',
                tier.tone,
              )}
            >
              Tier {rec.tier} · {tier.label}
            </span>
            {showHeat ? (
              <span className="inline-flex items-center gap-1 rounded-md border border-rose-200 bg-rose-50 px-2 py-0.5 text-xs font-medium text-rose-800">
                <Flame className="size-3" aria-hidden />
                Heat {Math.round(rec.heat!.total)}
              </span>
            ) : null}
          </div>
          <div className="text-xs text-muted-foreground">
            {formatDimensions(rec.lengthFt, rec.widthFt, rec.draftFt)}
            {rec.sizeBufferPct !== null ? (
              <span>
                {' '}
                · {rec.sizeBufferPct >= 0 ? '+' : ''}
                {rec.sizeBufferPct}% vs desired
              </span>
            ) : null}
            <span className="ml-2 font-medium text-foreground">Fit {rec.fitScore}</span>
          </div>
        </div>
        {expanded ? (
          <ChevronUp className="size-4 shrink-0 text-muted-foreground" aria-hidden />
        ) : (
          <ChevronDown className="size-4 shrink-0 text-muted-foreground" aria-hidden />
        )}
      </button>

      {expanded ? (
        <div className="space-y-3 border-t bg-muted/20 p-3">
          <dl className="space-y-1 text-xs">
            <div className="flex gap-2">
              <dt className="w-28 shrink-0 text-muted-foreground">Dimensional</dt>
              <dd>{rec.reasons.dimensional}</dd>
            </div>
            <div className="flex gap-2">
              <dt className="w-28 shrink-0 text-muted-foreground">Pipeline</dt>
              <dd>{rec.reasons.pipeline}</dd>
            </div>
            {rec.reasons.amenities ? (
              <div className="flex gap-2">
                <dt className="w-28 shrink-0 text-muted-foreground">Amenities</dt>
                <dd>{rec.reasons.amenities}</dd>
              </div>
            ) : null}
            {rec.reasons.heat ? (
              <div className="flex gap-2">
                <dt className="w-28 shrink-0 text-muted-foreground">Heat</dt>
                <dd>{rec.reasons.heat}</dd>
              </div>
            ) : null}
          </dl>
          <div className="flex flex-wrap gap-2">
            <Button
              type="button"
              size="sm"
              onClick={(e) => {
                e.stopPropagation();
                onAdd(rec);
              }}
            >
              <Plus className="mr-1.5 size-3.5" aria-hidden />
              Add to interest
            </Button>
            <Button asChild size="sm" variant="outline">
              <Link href={`/${portSlug}/berths/${rec.berthId}`}>View berth</Link>
            </Button>
          </div>
        </div>
      ) : null}
    </div>
  );
}

interface AmenityFilterFormProps {
  filters: AmenityFilters;
  onChange: (next: AmenityFilters) => void;
}

function AmenityFilterForm({ filters, onChange }: AmenityFilterFormProps) {
  const update = <K extends keyof AmenityFilters>(key: K, value: AmenityFilters[K]) => {
    const next = { ...filters };
    if (value === undefined || value === '' || (typeof value === 'number' && Number.isNaN(value))) {
      delete next[key];
    } else {
      next[key] = value;
    }
    onChange(next);
  };
  return (
    <div className="grid grid-cols-1 gap-3 rounded-lg border bg-muted/20 p-3 sm:grid-cols-2 lg:grid-cols-3">
      <div className="space-y-1">
        <Label htmlFor="filter-power" className="text-xs">
          Min power (kW)
        </Label>
        <Input
          id="filter-power"
          type="number"
          min={0}
          step="0.1"
          value={filters.minPowerCapacityKw ?? ''}
          onChange={(e) =>
            update('minPowerCapacityKw', e.target.value ? parseFloat(e.target.value) : undefined)
          }
        />
      </div>
      <div className="space-y-1">
        <Label htmlFor="filter-voltage" className="text-xs">
          Voltage
        </Label>
        <Input
          id="filter-voltage"
          type="number"
          min={0}
          step="1"
          value={filters.requiredVoltage ?? ''}
          onChange={(e) =>
            update('requiredVoltage', e.target.value ? parseInt(e.target.value, 10) : undefined)
          }
        />
      </div>
      <div className="space-y-1">
        <Label htmlFor="filter-mooring" className="text-xs">
          Mooring type
        </Label>
        <Select
          value={filters.requiredMooringType ?? ''}
          onValueChange={(v) => update('requiredMooringType', v || undefined)}
        >
          <SelectTrigger id="filter-mooring">
            <SelectValue placeholder="Any" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="stern_to">Stern-to</SelectItem>
            <SelectItem value="alongside">Alongside</SelectItem>
            <SelectItem value="bow_to">Bow-to</SelectItem>
            <SelectItem value="swing">Swing mooring</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="space-y-1">
        <Label htmlFor="filter-cleat" className="text-xs">
          Cleat capacity
        </Label>
        <Select
          value={filters.requiredCleatCapacity ?? ''}
          onValueChange={(v) => update('requiredCleatCapacity', v || undefined)}
        >
          <SelectTrigger id="filter-cleat">
            <SelectValue placeholder="Any" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="standard">Standard</SelectItem>
            <SelectItem value="heavy">Heavy</SelectItem>
            <SelectItem value="superyacht">Superyacht</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="space-y-1">
        <Label htmlFor="filter-access" className="text-xs">
          Access
        </Label>
        <Select
          value={filters.requiredAccess ?? ''}
          onValueChange={(v) => update('requiredAccess', v || undefined)}
        >
          <SelectTrigger id="filter-access">
            <SelectValue placeholder="Any" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="land">Land access</SelectItem>
            <SelectItem value="dinghy">Dinghy only</SelectItem>
            <SelectItem value="walk_on">Walk-on</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}

export function BerthRecommenderPanel({
  interestId,
  desiredLengthFt,
  desiredWidthFt,
  desiredDraftFt,
}: BerthRecommenderPanelProps) {
  const params = useParams<{ portSlug: string }>();
  const portSlug = params?.portSlug ?? '';

  const [filtersOpen, setFiltersOpen] = useState(false);
  const [amenityFilters, setAmenityFilters] = useState<AmenityFilters>({});
  const [showAll, setShowAll] = useState(false);
  const [pendingBerth, setPendingBerth] = useState<Recommendation | null>(null);

  const hasDimensions = desiredLengthFt !== null;

  const queryKey = useMemo(
    () => ['berth-recommendations', interestId, amenityFilters, showAll] as const,
    [interestId, amenityFilters, showAll],
  );

  const { data, isFetching, refetch } = useQuery({
    queryKey,
    enabled: hasDimensions,
    queryFn: () =>
      apiFetch<{ data: Recommendation[] }>(`/api/v1/interests/${interestId}/recommend-berths`, {
        method: 'POST',
        body: {
          ...(showAll ? { topN: 999 } : {}),
          ...(Object.keys(amenityFilters).length > 0 ? { amenityFilters } : {}),
        },
      }).then((r) => r.data),
    staleTime: 60_000,
  });

  const recommendations = data ?? [];

  return (
    <Card>
      <CardHeader className="gap-3">
        <div className="flex flex-wrap items-start justify-between gap-2">
          <div className="min-w-0 space-y-1">
            <CardTitle className="flex items-center gap-2 text-base">
              <Sparkles className="size-4 text-brand-600" aria-hidden />
              Recommendations for {formatDesired(desiredLengthFt, desiredWidthFt, desiredDraftFt)}
            </CardTitle>
            {!hasDimensions ? (
              <p className="text-xs text-muted-foreground">
                Set desired dimensions to see recommendations.
              </p>
            ) : null}
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <Button
              type="button"
              size="sm"
              variant="outline"
              onClick={() => setFiltersOpen((v) => !v)}
              disabled={!hasDimensions}
            >
              <Filter className="mr-1.5 size-3.5" aria-hidden />
              {filtersOpen ? 'Hide filters' : 'Add filters'}
            </Button>
            <Button
              type="button"
              size="sm"
              variant="outline"
              onClick={() => refetch()}
              disabled={!hasDimensions || isFetching}
            >
              <RefreshCw className={cn('mr-1.5 size-3.5', isFetching && 'animate-spin')} />
              Refresh
            </Button>
          </div>
        </div>
        {filtersOpen && hasDimensions ? (
          <AmenityFilterForm filters={amenityFilters} onChange={setAmenityFilters} />
        ) : null}
      </CardHeader>
      <CardContent className="space-y-3">
        {!hasDimensions ? (
          <p className="text-sm text-muted-foreground">
            Once length, width, and draft are set on this interest, the recommender will surface
            berths that fit. Edit the desired dimensions on the{' '}
            <Link href="?tab=overview" className="text-primary underline">
              Overview tab
            </Link>
            .
          </p>
        ) : isFetching && recommendations.length === 0 ? (
          <div className="space-y-2">
            {[0, 1, 2].map((i) => (
              <div key={i} className="h-16 animate-pulse rounded-lg bg-muted" />
            ))}
          </div>
        ) : recommendations.length === 0 ? (
          <p className="py-6 text-center text-sm text-muted-foreground">
            No berths match the current dimensions and filters.
          </p>
        ) : (
          <div className="space-y-2">
            {recommendations.map((rec) => (
              <RecommendationCard
                key={rec.berthId}
                rec={rec}
                portSlug={portSlug}
                onAdd={setPendingBerth}
              />
            ))}
          </div>
        )}
        {hasDimensions && recommendations.length > 0 ? (
          <div className="flex justify-center pt-1">
            <Button type="button" size="sm" variant="ghost" onClick={() => setShowAll((v) => !v)}>
              {showAll ? 'Show top recommendations' : 'Show all feasible'}
            </Button>
          </div>
        ) : null}
      </CardContent>

      {pendingBerth ? (
        <AddBerthToInterestDialog
          interestId={interestId}
          berth={{
            berthId: pendingBerth.berthId,
            mooringNumber: pendingBerth.mooringNumber,
          }}
          open={pendingBerth !== null}
          onOpenChange={(open) => {
            if (!open) setPendingBerth(null);
          }}
        />
      ) : null}
    </Card>
  );
}