'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, suffix }: { label: string; value: number; suffix?: string }) {
  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}
        {suffix ? <span className='ml-1 text-sm font-normal'>{suffix}</span> : null}
      </div>
    </div>
  );
}

export function DashboardApprovalMetrics({
  approvals
}: {
  approvals: CrmDashboardResponse['approvals'];
}) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>ภาพรวมการอนุมัติเอกสาร</CardTitle>
        <CardDescription>สถิติ workflow ปัจจุบันและคิวงานที่รอผู้อนุมัติ</CardDescription>
      </CardHeader>
      <CardContent className='space-y-6'>
        <div className='grid gap-4 sm:grid-cols-2 xl:grid-cols-5'>
          <Stat label='รออนุมัติ' value={approvals.summary.pendingApprovals} />
          <Stat label='อนุมัติวันนี้' value={approvals.summary.approvedToday} />
          <Stat label='ไม่อนุมัติวันนี้' value={approvals.summary.rejectedToday} />
          <Stat label='ตีกลับวันนี้' value={approvals.summary.returnedToday} />
          <Stat
            label='เวลาอนุมัติเฉลี่ย'
            value={approvals.summary.averageApprovalTimeHours}
            suffix='ชม.'
          />
        </div>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>เอกสาร</TableHead>
              <TableHead>Workflow</TableHead>
              <TableHead>ขั้นตอนปัจจุบัน</TableHead>
              <TableHead>วันที่ส่งอนุมัติ</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {approvals.myPendingApprovals.length === 0 ? (
              <TableRow>
                <TableCell colSpan={4} className='text-muted-foreground text-center'>
                  ไม่มีงานอนุมัติที่อยู่ในขอบเขตการอนุมัติของคุณตอนนี้
                </TableCell>
              </TableRow>
            ) : (
              approvals.myPendingApprovals.map((row) => (
                <TableRow key={row.id}>
                  <TableCell>
                    <div className='font-medium'>{row.entityCode ?? 'อนุมัติเอกสาร'}</div>
                    <div className='text-muted-foreground text-xs'>{row.entityTitle ?? '-'}</div>
                  </TableCell>
                  <TableCell>{row.workflowName}</TableCell>
                  <TableCell>{row.currentStepRoleName ?? '-'}</TableCell>
                  <TableCell>{new Date(row.requestedAt).toLocaleString()}</TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}
