pn-new-crm/src/components/companies/company-columns.tsx

'use client';

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

import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

export interface CompanyRow {
  id: string;
  name: string;
  legalName: string | null;
  taxId: string | null;
  registrationNumber: string | null;
  incorporationCountryIso: string | null;
  incorporationSubdivisionIso: string | null;
  incorporationDate: string | null;
  status: string;
  billingEmail: string | null;
  notes: string | null;
  archivedAt: string | null;
  createdAt: string;
  updatedAt: string;
  memberCount?: number;
  yachtCount?: number;
}

const STATUS_COLORS: Record<string, string> = {
  active: 'bg-green-100 text-green-800 border-green-300',
  dissolved: 'bg-red-100 text-red-800 border-red-300',
};

const STATUS_LABELS: Record<string, string> = {
  active: 'Active',
  dissolved: 'Dissolved',
};

export const COMPANY_COLUMN_OPTIONS = [
  { id: 'name', label: 'Name', alwaysVisible: true },
  { id: 'legalName', label: 'Legal Name' },
  { id: 'taxId', label: 'Tax ID' },
  { id: 'memberCount', label: 'Members' },
  { id: 'yachtCount', label: 'Yachts' },
  { id: 'status', label: 'Status' },
  { id: 'actions', label: 'Actions', alwaysVisible: true },
];

/** Hidden by default — keep the table dense; opt-in to longer columns. */
export const COMPANY_DEFAULT_HIDDEN: string[] = ['legalName', 'taxId'];

interface GetCompanyColumnsOptions {
  portSlug: string;
  onEdit: (company: CompanyRow) => void;
  onArchive: (company: CompanyRow) => void;
}

export function getCompanyColumns({
  portSlug,
  onEdit,
  onArchive,
}: GetCompanyColumnsOptions): ColumnDef<CompanyRow, unknown>[] {
  return [
    {
      id: 'name',
      accessorKey: 'name',
      header: 'Name',
      cell: ({ row }) => (
        <Link
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          href={`/${portSlug}/companies/${row.original.id}` as any}
          className="font-medium text-primary hover:underline"
          onClick={(e) => e.stopPropagation()}
        >
          {row.original.name}
        </Link>
      ),
    },
    {
      id: 'legalName',
      accessorKey: 'legalName',
      header: 'Legal Name',
      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: 'taxId',
      accessorKey: 'taxId',
      header: 'Tax ID',
      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: 'memberCount',
      header: 'Members',
      enableSorting: false,
      size: 88,
      cell: ({ row }) => {
        const n = row.original.memberCount ?? 0;
        if (n === 0) return <span className="text-muted-foreground">-</span>;
        return <Badge variant="secondary">{n}</Badge>;
      },
    },
    {
      id: 'yachtCount',
      header: 'Yachts',
      enableSorting: false,
      size: 88,
      cell: ({ row }) => {
        const n = row.original.yachtCount ?? 0;
        if (n === 0) return <span className="text-muted-foreground">-</span>;
        return <Badge variant="secondary">{n}</Badge>;
      },
    },
    {
      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" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem asChild>
              <Link
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                href={`/${portSlug}/companies/${row.original.id}` as any}
              >
                <Eye className="mr-2 h-3.5 w-3.5" />
                View
              </Link>
            </DropdownMenuItem>
            <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>
      ),
    },
  ];
}