import { Link } from 'react-router';
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
import { StatusPill } from './StatusPill';
import { mapServerCardView } from '../../types';

type CardView = ReturnType<typeof mapServerCardView>;

export function QuotationCardsTab({ quotationCardViews }: { quotationCardViews: CardView[] }) {
  return (
    <div className="space-y-4">
      <div className="border border-border rounded-lg bg-card overflow-hidden">
        <Table className="w-full text-left text-xs border-collapse font-mono">
          <TableHeader className="bg-muted text-muted-foreground text-[10px] border-b border-border">
            <TableRow>
              <TableHead className="p-3 font-semibold">세션 카드 ID</TableHead>
              <TableHead className="p-3 font-semibold font-sans">카드 이름</TableHead>
              <TableHead className="p-3 font-semibold font-sans">타입</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody className="divide-y divide-border">
            {quotationCardViews.length > 0 ? (
              quotationCardViews.map((qc) => (
                <TableRow key={qc.session_card_id} className="hover:bg-muted/30 transition-colors text-[11px]">
                  <TableCell className="p-3 text-muted-foreground">{qc.session_card_id}</TableCell>
                  <TableCell className="p-3 text-foreground font-sans font-semibold">
                    {qc.card_id ? (
                      <Link
                        to={`/cards?edit=${qc.card_id}`}
                        className="hover:text-primary hover:underline"
                        title={`${qc.card_name} — 협상카드 상세로 이동`}
                      >
                        {qc.card_name}
                      </Link>
                    ) : (
                      qc.card_name
                    )}
                  </TableCell>
                  <TableCell className="p-3">
                    <StatusPill tone={qc.type === '와일드 카드' ? 'amber' : 'zinc'} className="rounded">
                      {qc.type}
                    </StatusPill>
                  </TableCell>
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={3} className="p-12 text-center text-muted-foreground">
                  사용된 협상 카드가 없습니다. (리스트가 비어 있습니다)
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}