'use client';

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

type ReadinessItem = {
  label: string;
  ready: boolean;
};

export function QuotationReadinessPanel({ opportunity }: { opportunity: OpportunityRecord }) {
  const checks: ReadinessItem[] = [
    { label: 'Customer selected', ready: Boolean(opportunity.customerId) },
    { label: 'Contact selected', ready: Boolean(opportunity.contactId) },
    { label: 'Project name present', ready: Boolean(opportunity.projectName?.trim()) },
    { label: 'Product type present', ready: Boolean(opportunity.productType) },
    { label: 'Requirement present', ready: Boolean(opportunity.requirement?.trim()) },
    { label: 'Estimated value present', ready: opportunity.estimatedValue !== null }
  ];

  const readyCount = checks.filter((item) => item.ready).length;
  const isReady = readyCount === checks.length;

  return (
    <Card>
      <CardHeader>
        <CardTitle>Quotation Readiness</CardTitle>
      </CardHeader>
      <CardContent className='space-y-4'>
        <div className='text-sm font-medium'>
          {isReady ? 'Ready to create quotation' : 'Missing required information'}
        </div>
        <div className='space-y-2'>
          {checks.map((item) => (
            <div key={item.label} className='flex items-center justify-between gap-3 text-sm'>
              <span>{item.label}</span>
              <span className={item.ready ? 'text-green-600' : 'text-muted-foreground'}>
                {item.ready ? 'Ready' : 'Missing'}
              </span>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

