'use client';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import type { CrmDashboardFunnelStep } from '../api/types';

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

export function DashboardFunnel({ steps }: { steps: CrmDashboardFunnelStep[] }) {
  const maxCount = Math.max(...steps.map((step) => step.count), 1);

  return (
    <Card>
      <CardHeader>
        <CardTitle>Funnel การขาย</CardTitle>
        <CardDescription>ภาพรวมตั้งแต่ลีด โอกาสขาย ใบเสนอราคา อนุมัติเอกสาร จนถึงงานที่ชนะ</CardDescription>
      </CardHeader>
      <CardContent className='space-y-4'>
        {steps.map((step) => (
          <div key={step.key} className='space-y-2'>
            <div className='flex items-center justify-between gap-4'>
              <div>
                <div className='font-medium'>{step.label}</div>
                <div className='text-muted-foreground text-xs'>
                  {formatNumber(step.count)} รายการ, มูลค่า {formatNumber(step.value)}
                </div>
              </div>
              <div className='text-right text-sm'>
                <div>{step.conversionRate === null ? '-' : `${formatNumber(step.conversionRate)}%`}</div>
                <div className='text-muted-foreground text-xs'>อัตราการเปลี่ยนสถานะ</div>
              </div>
            </div>
            <div className='bg-muted h-2 overflow-hidden rounded-full'>
              <div
                className='h-full rounded-full bg-primary'
                style={{ width: `${Math.max((step.count / maxCount) * 100, step.count > 0 ? 8 : 0)}%` }}
              />
            </div>
          </div>
        ))}
      </CardContent>
    </Card>
  );
}
