'use client';

import { User, Anchor, TrendingUp, Ship, Building2 } from 'lucide-react';

import { CommandItem } from '@/components/ui/command';

// ─── Types ────────────────────────────────────────────────────────────────────

interface ClientItem {
  id: string;
  fullName: string;
}

interface InterestItem {
  id: string;
  clientName: string;
  berthMooringNumber: string | null;
  pipelineStage: string;
}

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

interface YachtItem {
  id: string;
  name: string;
  hullNumber: string | null;
  registration: string | null;
}

interface CompanyItem {
  id: string;
  name: string;
  legalName: string | null;
  taxId: string | null;
}

type SearchResultItemProps =
  | { type: 'client'; item: ClientItem; onSelect: () => void }
  | { type: 'interest'; item: InterestItem; onSelect: () => void }
  | { type: 'berth'; item: BerthItem; onSelect: () => void }
  | { type: 'yacht'; item: YachtItem; onSelect: () => void }
  | { type: 'company'; item: CompanyItem; onSelect: () => void };

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

export function SearchResultItem({ type, item, onSelect }: SearchResultItemProps) {
  if (type === 'client') {
    return (
      <CommandItem value={item.id} onSelect={onSelect} className="flex items-center gap-2">
        <User className="h-4 w-4 shrink-0 text-muted-foreground" />
        <span className="text-sm font-medium">{item.fullName}</span>
      </CommandItem>
    );
  }

  if (type === 'interest') {
    return (
      <CommandItem value={item.id} onSelect={onSelect} className="flex items-center gap-2">
        <TrendingUp className="h-4 w-4 shrink-0 text-muted-foreground" />
        <div className="flex flex-col">
          <span className="text-sm font-medium">{item.clientName}</span>
          <span className="text-xs text-muted-foreground">
            {item.berthMooringNumber ? `${item.berthMooringNumber} · ` : ''}
            {item.pipelineStage}
          </span>
        </div>
      </CommandItem>
    );
  }

  if (type === 'yacht') {
    return (
      <CommandItem value={item.id} onSelect={onSelect} className="flex items-center gap-2">
        <Ship className="h-4 w-4 shrink-0 text-muted-foreground" />
        <div className="flex flex-col">
          <span className="text-sm font-medium">{item.name}</span>
          {(item.hullNumber || item.registration) && (
            <span className="text-xs text-muted-foreground">
              {[item.hullNumber, item.registration].filter(Boolean).join(' · ')}
            </span>
          )}
        </div>
      </CommandItem>
    );
  }

  if (type === 'company') {
    return (
      <CommandItem value={item.id} onSelect={onSelect} className="flex items-center gap-2">
        <Building2 className="h-4 w-4 shrink-0 text-muted-foreground" />
        <div className="flex flex-col">
          <span className="text-sm font-medium">{item.name}</span>
          {(item.legalName || item.taxId) && (
            <span className="text-xs text-muted-foreground">
              {[item.legalName, item.taxId].filter(Boolean).join(' · ')}
            </span>
          )}
        </div>
      </CommandItem>
    );
  }

  // berth
  return (
    <CommandItem value={item.id} onSelect={onSelect} className="flex items-center gap-2">
      <Anchor className="h-4 w-4 shrink-0 text-muted-foreground" />
      <div className="flex flex-col">
        <span className="text-sm font-medium">{item.mooringNumber}</span>
        <span className="text-xs text-muted-foreground">
          {[item.area, item.status].filter(Boolean).join(' · ')}
        </span>
      </div>
    </CommandItem>
  );
}
