'use client';

import Link from 'next/link';
import { MoreHorizontal, Pencil, Archive, Eye } from 'lucide-react';
import type { ColumnDef } from '@tanstack/react-table';

import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { OwnerLink } from '@/components/yachts/yacht-detail-header';

export interface YachtRow {
  id: string;
  name: string;
  hullNumber: string | null;
  registration: string | null;
  currentOwnerType: 'client' | 'company';
  currentOwnerId: string;
  currentOwnerName?: string | null;
  lengthFt: string | null;
  widthFt: string | null;
  draftFt: string | null;
  lengthM: string | null;
  widthM: string | null;
  status: string;
  archivedAt: string | null;
  updatedAt: string;
}

const STATUS_COLORS: Record<string, string> = {
  active: 'bg-green-100 text-green-800 border-green-300',
  retired: 'bg-gray-100 text-gray-800 border-gray-300',
  sold_away: 'bg-amber-100 text-amber-800 border-amber-300',
};

const STATUS_LABELS: Record<string, string> = {
  active: 'Active',
  retired: 'Retired',
  sold_away: 'Sold Away',
};

function formatDimensions(yacht: YachtRow): string | null {
  if (yacht.lengthFt || yacht.widthFt) {
    const length = yacht.lengthFt ?? '-';
    const width = yacht.widthFt ?? '-';
    return `${length} × ${width} ft`;
  }
  if (yacht.lengthM || yacht.widthM) {
    const length = yacht.lengthM ?? '-';
    const width = yacht.widthM ?? '-';
    return `${length} × ${width} m`;
  }
  return null;
}

interface GetYachtColumnsOptions {
  portSlug: string;
  onEdit: (yacht: YachtRow) => void;
  onArchive: (yacht: YachtRow) => void;
}

export function getYachtColumns({
  portSlug,
  onEdit,
  onArchive,
}: GetYachtColumnsOptions): ColumnDef<YachtRow, unknown>[] {
  return [
    {
      id: 'name',
      accessorKey: 'name',
      header: 'Name',
      cell: ({ row }) => (
        <Link
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          href={`/${portSlug}/yachts/${row.original.id}` as any}
          className="font-medium text-primary hover:underline"
          onClick={(e) => e.stopPropagation()}
        >
          {row.original.name}
        </Link>
      ),
    },
    {
      id: 'currentOwner',
      header: 'Current Owner',
      enableSorting: false,
      cell: ({ row }) => (
        <OwnerLink
          portSlug={portSlug}
          type={row.original.currentOwnerType}
          id={row.original.currentOwnerId}
          preloadedName={row.original.currentOwnerName ?? null}
        />
      ),
    },
    {
      id: 'dimensions',
      header: 'Dimensions',
      enableSorting: false,
      cell: ({ row }) => {
        const dims = formatDimensions(row.original);
        if (!dims) return <span className="text-muted-foreground">-</span>;
        return <span className="text-sm">{dims}</span>;
      },
    },
    {
      id: 'hullNumber',
      accessorKey: 'hullNumber',
      header: 'Hull Number',
      enableSorting: false,
      cell: ({ getValue }) => {
        const value = getValue() as string | null;
        if (!value) return <span className="text-muted-foreground">-</span>;
        return <span className="text-sm">{value}</span>;
      },
    },
    {
      id: 'status',
      accessorKey: 'status',
      header: 'Status',
      cell: ({ row }) => {
        const status = row.original.status;
        const label = STATUS_LABELS[status] ?? status;
        const color = STATUS_COLORS[status] ?? 'bg-muted text-muted-foreground border-muted';
        return (
          <span
            className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium ${color}`}
          >
            {label}
          </span>
        );
      },
    },
    {
      id: 'actions',
      header: '',
      enableSorting: false,
      size: 48,
      cell: ({ row }) => (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="h-7 w-7"
              onClick={(e) => e.stopPropagation()}
            >
              <MoreHorizontal className="h-4 w-4" aria-hidden />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem asChild>
              <Link
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                href={`/${portSlug}/yachts/${row.original.id}` as any}
              >
                <Eye className="mr-2 h-3.5 w-3.5" aria-hidden />
                View
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onEdit(row.original)}>
              <Pencil className="mr-2 h-3.5 w-3.5" aria-hidden />
              Edit
            </DropdownMenuItem>
            <DropdownMenuItem className="text-destructive" onClick={() => onArchive(row.original)}>
              <Archive className="mr-2 h-3.5 w-3.5" aria-hidden />
              Archive
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ];
}
