import { LinkIcon } from 'lucide-react';
import { Link } from 'react-router-dom';
import type { ColumnDef } from '@tanstack/react-table';
import type { BillingCycle, SubscriptionPlan } from '@/gql/graphql.js';
import type { TimelessDateString } from '@/helpers/dates.js';
import { ModifyContractDialog } from '../clients/contracts/modify-contract-dialog.js';
import { DataTableColumnHeader } from '../common/index.js';
import { Badge } from '../ui/badge.js';
import { Button } from '../ui/button.js';
import { Checkbox } from '../ui/checkbox.js';
import { Client, DateCell } from './cells/index.js';
import type { ContractRow } from './index.js';

export const columns: ColumnDef<ContractRow>[] = [
  {
    id: 'select',
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')
        }
        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={value => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'isActive',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Is Active" />,
    cell: ({ row }) => {
      const isActive = row.getValue<boolean>('isActive');
      return isActive ? (
        <Badge variant="default">Active</Badge>
      ) : (
        <Badge variant="destructive">Inactive</Badge>
      );
    },
  },
  {
    accessorKey: 'client.name',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Client" />,
    cell: ({ row }) => {
      return <Client id={row.original.client.id} name={row.original.client.name} />;
    },
  },
  {
    accessorKey: 'startDate',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Start" />,
    cell: ({ row }) => <DateCell timelessDate={row.getValue<TimelessDateString>('startDate')} />,
  },
  {
    accessorKey: 'endDate',
    header: ({ column }) => <DataTableColumnHeader column={column} title="End" />,
    cell: ({ row }) => <DateCell timelessDate={row.getValue<TimelessDateString>('endDate')} />,
  },
  {
    accessorKey: 'purchaseOrder',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Purchase Order" />,
    cell: ({ row }) => (
      <div className="flex flex-row gap-1 items-center">
        {row.original.msCloud && (
          <Link to={row.original.msCloud} target="_blank" rel="noreferrer" className="size-8">
            <Button variant="link" size="sm">
              <LinkIcon className="size-4" />
            </Button>
          </Link>
        )}
        <span className="text-sm font-medium">{row.getValue<string>('purchaseOrder')}</span>
      </div>
    ),
  },
  {
    accessorKey: 'product',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Product" />,
    cell: ({ row }) => <p className="text-sm font-medium">{row.getValue<string>('product')}</p>,
  },
  {
    accessorKey: 'plan',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Subscription Plan" />,
    cell: ({ row }) => (
      <p className="text-sm font-medium">{row.getValue<SubscriptionPlan>('plan')}</p>
    ),
  },
  {
    accessorKey: 'billingCycle',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Billing Cycle" />,
    cell: ({ row }) => (
      <p className="text-sm font-medium">{row.getValue<BillingCycle>('billingCycle')}</p>
    ),
  },
  {
    accessorKey: 'amount.raw',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Amount" />,
    cell: ({ row }) => <p className="text-sm font-medium">{row.original.amount.formatted}</p>,
  },
  {
    accessorKey: 'operationsLimit',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Operations Limit" />,
    cell: ({ row }) => {
      const operationsLimit = row.getValue<bigint>('operationsLimit');
      if (!operationsLimit) {
        return null;
      }
      return <p className="text-sm font-medium">{operationsLimit.toString()}</p>;
    },
  },
  {
    accessorKey: 'edit',
    header: '',
    cell: ({ row }) => (
      <ModifyContractDialog clientId={row.original.client.id} contractId={row.original.id} />
    ),
    enableSorting: false,
  },
];