'use client';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import type { CrmDashboardSalesRankingRow } from '../api/types';

function formatNumber(value: number) {
  return new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(value);
}

export function DashboardSalesRanking({ rows }: { rows: CrmDashboardSalesRankingRow[] }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>อันดับผลงานฝ่ายขาย</CardTitle>
        <CardDescription>การนับลีดและโอกาสขายยึดตามผู้รับผิดชอบ ส่วนใบเสนอราคายึดตามผู้ขาย</CardDescription>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>ฝ่ายขาย</TableHead>
              <TableHead className='text-right'>ลีด</TableHead>
              <TableHead className='text-right'>โอกาสขาย</TableHead>
              <TableHead className='text-right'>ใบเสนอราคา</TableHead>
              <TableHead className='text-right'>อนุมัติแล้ว</TableHead>
              <TableHead className='text-right'>มูลค่างานที่ชนะ</TableHead>
              <TableHead className='text-right'>อัตราการเปลี่ยนสถานะ</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} className='text-muted-foreground text-center'>
                  ไม่พบข้อมูลอันดับผลงานที่ตรงกับตัวกรองปัจจุบัน
                </TableCell>
              </TableRow>
            ) : (
              rows.map((row) => (
                <TableRow key={row.salesPersonId}>
                  <TableCell className='font-medium'>{row.salesPersonName}</TableCell>
                  <TableCell className='text-right'>{formatNumber(row.leadCount)}</TableCell>
                  <TableCell className='text-right'>{formatNumber(row.enquiryCount)}</TableCell>
                  <TableCell className='text-right'>{formatNumber(row.quotationCount)}</TableCell>
                  <TableCell className='text-right'>{formatNumber(row.approvedQuotations)}</TableCell>
                  <TableCell className='text-right'>{formatNumber(row.wonRevenue)}</TableCell>
                  <TableCell className='text-right'>{formatNumber(row.conversionRate)}%</TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}
