'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 { CrmDashboardHotProjectRow } from '../api/types';

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

export function DashboardHotProjects({ rows }: { rows: CrmDashboardHotProjectRow[] }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>โอกาสขายเด่นที่กำลังดำเนินการ</CardTitle>
        <CardDescription>จัดอันดับโอกาสขายสำคัญตามมูลค่าที่ประเมินไว้</CardDescription>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>โครงการ</TableHead>
              <TableHead>ลูกค้า</TableHead>
              <TableHead className='text-right'>เธกเธนเธฅเธ„เนˆเธฒ</TableHead>
              <TableHead>ผู้ดูแลโอกาสขาย</TableHead>
              <TableHead className='text-right'>ความน่าจะเป็น</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.length === 0 ? (
              <TableRow>
                <TableCell colSpan={5} className='text-muted-foreground text-center'>
                  ไม่พบโอกาสขายเด่นที่ตรงกับตัวกรองปัจจุบัน
                </TableCell>
              </TableRow>
            ) : (
              rows.map((row) => (
                <TableRow key={row.opportunityId}>
                  <TableCell>
                    <div className='font-medium'>{row.projectName}</div>
                    <div className='text-muted-foreground text-xs'>{row.opportunityCode}</div>
                  </TableCell>
                  <TableCell>{row.customerName}</TableCell>
                  <TableCell className='text-right'>{formatNumber(row.value)}</TableCell>
                  <TableCell>{row.assignedSalesName ?? '-'}</TableCell>
                  <TableCell className='text-right'>{row.probability ?? 0}%</TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}