'use client';

import { Circulation, CirculationListResponse } from '@/types/circulation';
import { DataTable } from '@/components/common/data-table';
import { ColumnDef } from '@tanstack/react-table';
import { Button } from '@/components/ui/button';
import { Eye } from 'lucide-react';
import Link from 'next/link';
import { format } from 'date-fns';
import { Badge } from '@/components/ui/badge';

interface CirculationListProps {
  data: CirculationListResponse;
}

/**
 * Calculate progress of circulation routings
 */
function getProgress(routings?: Circulation['routings']) {
  if (!routings || routings.length === 0) return { completed: 0, total: 0 };
  const completed = routings.filter((r) => r.status === 'COMPLETED').length;
  return { completed, total: routings.length };
}

/**
 * Get status color variant for circulation status
 */
function getStatusVariant(statusCode: string): 'default' | 'secondary' | 'destructive' | 'outline' {
  switch (statusCode?.toUpperCase()) {
    case 'DRAFT':
      return 'outline';
    case 'ACTIVE':
    case 'IN_PROGRESS':
      return 'default';
    case 'COMPLETED':
    case 'CLOSED':
      return 'secondary';
    default:
      return 'outline';
  }
}

export function CirculationList({ data }: CirculationListProps) {
  if (!data) return null;

  const columns: ColumnDef<Circulation>[] = [
    {
      accessorKey: 'circulationNo',
      header: 'Circulation No.',
      cell: ({ row }) => <span className="font-medium">{row.getValue('circulationNo')}</span>,
    },
    {
      accessorKey: 'subject',
      header: 'Subject',
      cell: ({ row }) => (
        <div className="max-w-[250px] truncate" title={row.getValue('subject')}>
          {row.getValue('subject')}
        </div>
      ),
    },
    {
      accessorKey: 'organization',
      header: 'Organization',
      cell: ({ row }) => {
        const org = row.original.organization;
        return org?.organizationName || '-';
      },
    },
    {
      accessorKey: 'statusCode',
      header: 'Status',
      cell: ({ row }) => {
        const status = row.getValue('statusCode') as string;
        return <Badge variant={getStatusVariant(status)}>{status}</Badge>;
      },
    },
    {
      id: 'progress',
      header: 'Progress',
      cell: ({ row }) => {
        const { completed, total } = getProgress(row.original.routings);
        if (total === 0) return '-';
        const percent = Math.round((completed / total) * 100);
        return (
          <div className="flex items-center gap-2">
            <div className="w-20 h-2 bg-muted rounded-full overflow-hidden">
              <div className="h-full bg-primary transition-all" style={{ width: `${percent}%` }} />
            </div>
            <span className="text-xs text-muted-foreground">
              {completed}/{total}
            </span>
          </div>
        );
      },
    },
    {
      accessorKey: 'createdAt',
      header: 'Created',
      cell: ({ row }) => format(new Date(row.getValue('createdAt')), 'dd MMM yyyy'),
    },
    {
      id: 'actions',
      cell: ({ row }) => {
        const item = row.original;
        return (
          <div className="flex gap-1">
            <Link href={`/circulation/${item.uuid}`}>
              <Button variant="ghost" size="icon" title="View Details">
                <Eye className="h-4 w-4" />
              </Button>
            </Link>
          </div>
        );
      },
    },
  ];

  return (
    <div>
      <DataTable columns={columns} data={data.data || []} />
      {data.meta && (
        <div className="mt-4 text-sm text-muted-foreground text-center">
          Showing {data.data?.length || 0} of {data.meta.total} circulations
        </div>
      )}
    </div>
  );
}