// components/vendors/FinancialCard.tsx
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Calendar } from 'lucide-react'

interface FinancialCardProps {
    quotedPrice?: number | null
    finalCost?: number | null
    depositPaid?: number | null
    depositDueDate?: Date | null
    finalPaymentDue?: Date | null
    paymentNotes?: string | null
}

const formatCurrency = (amount?: number | null): string => {
    if (!amount) return '—'
    return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
    }).format(amount)
}

const formatDate = (date?: Date | null): string => {
    if (!date) return '—'
    return new Date(date).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
    })
}

export function FinancialCard({
    quotedPrice,
    finalCost,
    depositPaid,
    depositDueDate,
    finalPaymentDue,
    paymentNotes,
}: FinancialCardProps) {
    return (
        <Card>
            <CardHeader>
                <CardTitle>Financial Information</CardTitle>
            </CardHeader>
            <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div className="space-y-2">
                        <p className="text-sm text-muted-foreground">Quoted Price</p>
                        <p className="text-2xl font-bold">{formatCurrency(quotedPrice)}</p>
                    </div>
                    <div className="space-y-2">
                        <p className="text-sm text-muted-foreground">Final Cost</p>
                        <p className="text-2xl font-bold">{formatCurrency(finalCost)}</p>
                    </div>
                    <div className="space-y-2">
                        <p className="text-sm text-muted-foreground">Deposit Paid</p>
                        <p className="text-2xl font-bold">{formatCurrency(depositPaid)}</p>
                    </div>
                </div>
                
                {(depositDueDate || finalPaymentDue) && (
                    <>
                        <Separator className="my-4" />
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            {depositDueDate && (
                                <div className="flex items-start gap-3">
                                    <Calendar className="h-5 w-5 text-muted-foreground mt-0.5" />
                                    <div>
                                        <p className="text-sm text-muted-foreground">Deposit Due Date</p>
                                        <p className="font-medium">{formatDate(depositDueDate)}</p>
                                    </div>
                                </div>
                            )}
                            {finalPaymentDue && (
                                <div className="flex items-start gap-3">
                                    <Calendar className="h-5 w-5 text-muted-foreground mt-0.5" />
                                    <div>
                                        <p className="text-sm text-muted-foreground">Final Payment Due</p>
                                        <p className="font-medium">{formatDate(finalPaymentDue)}</p>
                                    </div>
                                </div>
                            )}
                        </div>
                    </>
                )}
                
                {paymentNotes && (
                    <>
                        <Separator className="my-4" />
                        <div>
                            <p className="text-sm text-muted-foreground mb-2">Payment Notes</p>
                            <p className="text-sm">{paymentNotes}</p>
                        </div>
                    </>
                )}
            </CardContent>
        </Card>
    )
}