import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

const forecastSegments = [
    { name: "Closed Won", value: 38.4, fill: "#22C55E" },
    { name: "Commit", value: 22.1, fill: "#6C63FF" },
    { name: "Best Case", value: 14.6, fill: "#A99EFF" },
    { name: "Pipeline", value: 9.1, fill: "#E5E7EB" },
]

const velocityMetrics = [
    { v: "21.0", l: "Deals/Month" },
    { v: "18d", l: "Avg Cycle" },
    { v: "573k", l: "Avg Value" },
    { v: "34.6%", l: "Win Rate" },
]

export function ForecastCard() {
    const total = forecastSegments.reduce((sum, s) => sum + s.value, 0)

    return (
        <Card className="gap-0 p-5 h-full overflow-hidden">
            <div className="mb-4 flex flex-col gap-0.5">
                <div className="flex items-start justify-between gap-2">
                    <h3 className="text-[13px] font-bold text-text font-['Lexend']">Deal Forecast</h3>
                    <Badge
                        variant="outline"
                        className="shrink-0 border-accent/40 bg-accent/10 px-2 py-0 text-[10px] font-semibold text-accent"
                    >
                        Coming Soon
                    </Badge>
                </div>
                <p className="text-[11px] text-gray-700 font-normal">Q1 2026 · ${total.toFixed(1)}M total</p>
            </div>

            <div className="flex h-6 rounded-lg overflow-hidden mb-3.5 shadow-sm">
                {forecastSegments.map((seg) => (
                    <div
                        key={seg.name}
                        className="h-full group relative transition-all duration-300"
                        style={{ width: `${(seg.value / total * 100).toFixed(1)}%`, backgroundColor: seg.fill }}
                        title={`${seg.name}: $${seg.value}M`}
                    />
                ))}
            </div>

            <div className="flex flex-col gap-[9px] mb-4">
                {forecastSegments.map((seg) => (
                    <div key={seg.name} className="flex justify-between items-center px-0.5">
                        <div className="flex items-center gap-1.5">
                            <div className="size-[9px] rounded-[3px] shrink-0" style={{ backgroundColor: seg.fill }} />
                            <span className="text-[11px] text-gray-700 font-medium">{seg.name}</span>
                        </div>
                        <span className="text-[11px] font-bold text-text font-['Lexend_Deca']">${seg.value}M</span>
                    </div>
                ))}
            </div>

            <div className="pt-3 border-t border-border mt-auto">
                <div className="flex justify-between items-center mb-2 px-0.5">
                    <span className="text-[11px] text-gray-700 font-medium">Quota Attainment</span>
                    <span className="text-[13px] font-extrabold text-text font-['Lexend']">91%</span>
                </div>
                <div className="h-1.5 bg-border rounded-full overflow-hidden mb-1.5">
                    <div className="h-full bg-accent rounded-full w-[91%] transition-all duration-1000" />
                </div>
                <div className="flex justify-between items-center text-[10px] px-0.5">
                    <span className="text-gray-700">Target: $90M</span>
                    <span className="text-green font-bold">$81.9M attained</span>
                </div>
            </div>

            <div className="mt-3.5 p-[11px_13px] bg-[#6C63FF0f] rounded-lg border border-[#6C63FF1a]">
                <h4 className="text-[10px] text-gray-700 font-bold tracking-[0.07em] uppercase mb-2">Sales Velocity</h4>
                <div className="grid grid-cols-2 gap-2">
                    {velocityMetrics.map((vm) => (
                        <div key={vm.l} className="flex flex-col">
                            <span className="text-sm font-extrabold text-accent font-['Lexend']">{vm.v}</span>
                            <span className="text-[10px] text-gray-700">{vm.l}</span>
                        </div>
                    ))}
                </div>
            </div>
        </Card>
    )
}