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

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

function RevenueTable({
  title,
  description,
  rows
}: {
  title: string;
  description: string;
  rows: CrmDashboardRevenueRow[];
}) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Customer</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={4} className='text-muted-foreground text-center'>
                  ไม่พบข้อมูลที่ตรงกับตัวกรองปัจจุบัน
                </TableCell>
              </TableRow>
            ) : (
              rows.map((row) => (
                <TableRow key={`${row.roleCode}-${row.customerId}`}>
                  <TableCell>
                    <div className='font-medium'>{row.customerName}</div>
                    <div className='text-muted-foreground text-xs'>{row.customerCode}</div>
                  </TableCell>
                  <TableCell className='text-right'>{formatNumber(row.revenue)}</TableCell>
                  <TableCell className='text-right'>{formatNumber(row.quotationCount)}</TableCell>
                  <TableCell className='text-right'>{formatNumber(row.wonRevenue)}</TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}

export function DashboardRevenueCards({
  revenueAnalytics
}: {
  revenueAnalytics: CrmDashboardResponse['revenueAnalytics'];
}) {
  return (
    <div className='grid gap-4 xl:grid-cols-2'>
      <RevenueTable
        title='เจ้าของโครงการมูลค่าสูงสุด'
        description='จัดอันดับตามเจ้าของโครงการ โดยใช้ลูกค้าผู้รับใบเสนอราคาเป็น fallback เมื่อไม่มี end customer'
        rows={revenueAnalytics.topEndCustomers}
      />
      <RevenueTable
        title='ลูกค้าผู้รับใบเสนอราคามูลค่าสูงสุด'
        description='มุมมองเชิงพาณิชย์แบบจัดกลุ่มตามลูกค้าผู้รับใบเสนอราคา'
        rows={revenueAnalytics.topBillingCustomers}
      />
      <RevenueTable
        title='ผู้รับเหมามูลค่าสูงสุด'
        description='วิเคราะห์มูลค่าตามบทบาทผู้รับเหมาในโครงการ'
        rows={revenueAnalytics.topContractors}
      />
      <RevenueTable
        title='ที่ปรึกษามูลค่าสูงสุด'
        description='วิเคราะห์มูลค่าตามบทบาทที่ปรึกษาในโครงการ'
        rows={revenueAnalytics.topConsultants}
      />
    </div>
  );
}
