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

function Stat({ label, value }: { label: string; value: number }) {
  return (
    <div className='rounded-lg border bg-muted/20 p-4'>
      <div className='text-muted-foreground text-xs'>{label}</div>
      <div className='mt-2 text-2xl font-semibold'>{value}</div>
    </div>
  );
}

export function DashboardFollowups({
  followups
}: {
  followups: CrmDashboardResponse['followups'];
}) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Dashboard งานติดตาม</CardTitle>
        <CardDescription>ภาพรวมงานติดตามที่กำลังจะถึงและที่ดำเนินการแล้วของโอกาสขายและใบเสนอราคา</CardDescription>
      </CardHeader>
      <CardContent className='space-y-6'>
        <div className='grid gap-4 sm:grid-cols-2 xl:grid-cols-4'>
          <Stat label='ครบกำหนดวันนี้' value={followups.summary.dueToday} />
          <Stat label='ครบกำหนดสัปดาห์นี้' value={followups.summary.dueThisWeek} />
          <Stat label='เกินกำหนด' value={followups.summary.overdue} />
          <Stat label='เสร็จแล้ว' value={followups.summary.completed} />
        </div>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>วันที่</TableHead>
              <TableHead>ลูกค้า</TableHead>
              <TableHead>โอกาสขาย</TableHead>
              <TableHead>ผู้ดูแลโอกาสขาย</TableHead>
              <TableHead>ที่มา</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {followups.upcoming.length === 0 ? (
              <TableRow>
                <TableCell colSpan={5} className='text-muted-foreground text-center'>
                  ไม่พบงานติดตามที่ตรงกับตัวกรองปัจจุบัน
                </TableCell>
              </TableRow>
            ) : (
              followups.upcoming.map((row) => (
                <TableRow key={`${row.sourceType}-${row.id}`}>
                  <TableCell>{new Date(row.followupDate).toLocaleDateString()}</TableCell>
                  <TableCell>{row.customerName}</TableCell>
                  <TableCell>{row.enquiryName}</TableCell>
                  <TableCell>{row.assignedSalesName ?? '-'}</TableCell>
                  <TableCell className='capitalize'>{row.sourceType}</TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}
