pn-new-crm/src/components/clients/client-columns.tsx

'use client';

import Link from 'next/link';
import { format } from 'date-fns';
import { MoreHorizontal, Pencil, Archive } 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 { Badge } from '@/components/ui/badge';
import { getCountryName } from '@/lib/i18n/countries';

export interface ClientRow {
  id: string;
  fullName: string;
  nationalityIso: string | null;
  source: string | null;
  archivedAt: string | null;
  createdAt: string;
  primaryEmail?: string | null;
  primaryPhone?: string | null;
  yachtCount?: number;
  companyCount?: number;
  interestCount?: number;
  latestInterest?: { stage: string; mooringNumber: string | null } | null;
  tags?: Array<{ id: string; name: string; color: string }>;
}

const STAGE_LABELS: Record<string, string> = {
  open: 'Open',
  qualified: 'Qualified',
  eoi_sent: 'EOI sent',
  eoi_signed: 'EOI signed',
  deposit: 'Deposit',
  contract: 'Contract',
  signed: 'Signed',
  closed_won: 'Won',
  closed_lost: 'Lost',
};

const SOURCE_LABELS: Record<string, string> = {
  website: 'Website',
  manual: 'Manual',
  referral: 'Referral',
  broker: 'Broker',
};

interface GetColumnsOptions {
  portSlug: string;
  onEdit: (client: ClientRow) => void;
  onArchive: (client: ClientRow) => void;
}

export function getClientColumns({
  portSlug,
  onEdit,
  onArchive,
}: GetColumnsOptions): ColumnDef<ClientRow, unknown>[] {
  return [
    {
      id: 'fullName',
      accessorKey: 'fullName',
      header: 'Name',
      cell: ({ row }) => (
        <Link
          href={`/${portSlug}/clients/${row.original.id}`}
          className="font-medium text-primary hover:underline"
          onClick={(e) => e.stopPropagation()}
        >
          {row.original.fullName}
        </Link>
      ),
    },
    {
      id: 'email',
      header: 'Email',
      enableSorting: false,
      cell: ({ row }) => {
        const value = row.original.primaryEmail;
        if (!value) return <span className="text-muted-foreground">-</span>;
        return <span className="text-sm">{value}</span>;
      },
    },
    {
      id: 'phone',
      header: 'Phone',
      enableSorting: false,
      cell: ({ row }) => {
        const value = row.original.primaryPhone;
        if (!value) return <span className="text-muted-foreground">-</span>;
        return <span className="text-sm">{value}</span>;
      },
    },
    {
      id: 'country',
      accessorKey: 'nationalityIso',
      header: 'Country',
      cell: ({ getValue }) => {
        const iso = getValue() as string | null;
        return (
          <span className="text-muted-foreground">{iso ? getCountryName(iso, 'en') : '-'}</span>
        );
      },
    },
    {
      id: 'source',
      accessorKey: 'source',
      header: 'Source',
      cell: ({ getValue }) => {
        const source = getValue() as string | null;
        if (!source) return <span className="text-muted-foreground">-</span>;
        return (
          <Badge variant="outline" className="capitalize text-xs">
            {SOURCE_LABELS[source] ?? source}
          </Badge>
        );
      },
    },
    {
      id: 'latestStage',
      header: 'Latest stage',
      enableSorting: false,
      cell: ({ row }) => {
        const latest = row.original.latestInterest;
        if (!latest) return <span className="text-muted-foreground">-</span>;
        const stageLabel = STAGE_LABELS[latest.stage] ?? latest.stage;
        return (
          <div className="flex items-center gap-2 text-sm">
            <Badge variant="secondary" className="text-xs capitalize">
              {stageLabel}
            </Badge>
            {latest.mooringNumber && (
              <span className="text-muted-foreground">{latest.mooringNumber}</span>
            )}
          </div>
        );
      },
    },
    {
      id: 'createdAt',
      accessorKey: 'createdAt',
      header: 'Created',
      cell: ({ getValue }) => (
        <span className="text-muted-foreground text-sm">
          {format(new Date(getValue() as string), 'MMM d, yyyy')}
        </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" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem onClick={() => onEdit(row.original)}>
              <Pencil className="mr-2 h-3.5 w-3.5" />
              Edit
            </DropdownMenuItem>
            <DropdownMenuItem className="text-destructive" onClick={() => onArchive(row.original)}>
              <Archive className="mr-2 h-3.5 w-3.5" />
              Archive
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ];
}