"use client"

import * as React from "react"
import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip } from "recharts"
import { NoDataFound } from "@/components/ui/no-data-found"

interface WinLossChartProps {
    winLoss: { won: number; lost: number; noDecision: number }
}

export const WinLossChart = React.memo(function WinLossChart({ winLoss }: WinLossChartProps) {
    const total = winLoss.won + winLoss.lost + winLoss.noDecision
    const winRate = total > 0 ? Math.round((winLoss.won / total) * 100) : 0

    if (total === 0) {
        return (
            <div className="bg-[rgba(255,255,255,0.45)] dark:bg-[rgba(244,246,255,0.4)] backdrop-blur-[15px] border border-white/60 rounded-[14px] p-4 shadow-[0px_2px_15px_0px_rgba(0,0,0,0.06)] flex flex-col">
                <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-0.5">Win / Loss Analysis</h3>
                <p className="text-[11px] text-gray-700 font-medium mb-3 uppercase tracking-tight">Deal outcome breakdown</p>
                <NoDataFound message="No outcomes yet" description="Closed won, lost, or no-decision leads appear here." size="sm" />
            </div>
        )
    }

    return (
        <div className="bg-[rgba(255,255,255,0.45)] dark:bg-[rgba(244,246,255,0.4)] backdrop-blur-[15px] border border-white/60 rounded-[14px] p-4 shadow-[0px_2px_15px_0px_rgba(0,0,0,0.06)] hover:shadow-[0px_6px_25px_0px_rgba(108,99,255,0.1)] transition-shadow duration-300 flex flex-col">
            <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-0.5">Win / Loss Analysis</h3>
            <p className="text-[11px] text-gray-700 font-medium mb-3 uppercase tracking-tight">Deal outcome breakdown</p>

            <div className="flex flex-col gap-3">
                <div className="h-[96px] relative">
                    <ResponsiveContainer width="100%" height="100%">
                        <PieChart>
                            <Pie
                                data={[
                                    { name: 'Won', value: winLoss.won, color: '#22C55E' },
                                    { name: 'Lost', value: winLoss.lost, color: '#FF6B6B' },
                                    { name: 'No Decision', value: winLoss.noDecision, color: '#E5E7EB' }
                                ]}
                                dataKey="value"
                                innerRadius={38}
                                outerRadius={48}
                                paddingAngle={4}
                                stroke="none"
                            >
                                <Cell fill="#22C55E" />
                                <Cell fill="#FF6B6B" />
                                <Cell fill="#E5E7EB" />
                            </Pie>
                            <Tooltip
                                contentStyle={{
                                    borderRadius: '12px',
                                    border: '1px solid rgba(255, 255, 255, 0.2)',
                                    backdropFilter: 'blur(10px)',
                                    boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.15)',
                                    padding: '10px',
                                    backgroundColor: 'rgba(15, 17, 23, 0.85)',
                                    color: '#fff'
                                }}
                            />
                        </PieChart>
                    </ResponsiveContainer>
                    <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                        <span className="text-[17px] font-extrabold text-text leading-none">{winRate}%</span>
                        <span className="text-[8px] font-bold text-gray-700 uppercase mt-0.5">Win Rate</span>
                    </div>
                </div>

                <div className="grid grid-cols-2 gap-2">
                    <div className="bg-bg/40 p-2 rounded-lg border border-border text-center">
                        <div className="text-[15px] font-extrabold text-emerald-500 font-['Lexend'] leading-none">{winLoss.won}</div>
                        <div className="text-[9px] font-bold text-gray-700 uppercase mt-0.5">Won</div>
                    </div>
                    <div className="bg-bg/40 p-2 rounded-lg border border-border text-center">
                        <div className="text-[15px] font-extrabold text-rose-500 font-['Lexend'] leading-none">{winLoss.lost}</div>
                        <div className="text-[9px] font-bold text-gray-700 uppercase mt-0.5">Lost</div>
                    </div>
                    <div className="bg-bg/40 p-2 rounded-lg border border-border text-center">
                        <div className="text-[15px] font-extrabold text-accent font-['Lexend'] leading-none">{winRate}%</div>
                        <div className="text-[9px] font-bold text-gray-700 uppercase mt-0.5">Win Rate</div>
                    </div>
                    <div className="bg-bg/40 p-2 rounded-lg border border-border text-center">
                        <div className="text-[15px] font-extrabold text-gray-700 font-['Lexend'] leading-none">{winLoss.noDecision}</div>
                        <div className="text-[9px] font-bold text-gray-700 uppercase mt-0.5">No Decision</div>
                    </div>
                </div>
            </div>
        </div>
    )
})