"use client"

import * as React from "react"
import { ResponsiveContainer, BarChart, Bar, CartesianGrid, XAxis, YAxis, Tooltip, Cell } from "recharts"
import { NoDataFound } from "@/components/ui/no-data-found"

interface StageConversionChartProps {
    data: { name: string; value: number }[]
}

export const StageConversionChart = React.memo(function StageConversionChart({ data }: StageConversionChartProps) {
    if (!data.length) {
        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-6 shadow-[0px_2px_15px_0px_rgba(0,0,0,0.06)]">
                <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-0.5">Stage Conversion Rates</h3>
                <p className="text-[11px] text-gray-700 font-medium mb-4 uppercase tracking-tight">Pipeline stage distribution</p>
                <NoDataFound message="No stage data" description="Leads and deals in this period will populate the funnel." 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-6 shadow-[0px_2px_15px_0px_rgba(0,0,0,0.06)] hover:shadow-[0px_6px_25px_0px_rgba(108,99,255,0.1)] transition-all duration-300 hover:scale-[1.005]">
            <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-0.5">Stage Conversion Rates</h3>
            <p className="text-[11px] text-gray-700 font-medium mb-8 uppercase tracking-tight">% of Deals Advancing to Final Outcome</p>

            <div className="h-[220px]">
                <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={data} layout="vertical" margin={{ left: 10, right: 30 }}>
                        <CartesianGrid strokeDasharray="3 3" horizontal={false} stroke="#E4E6EF88" />
                        <XAxis
                            type="number"
                            axisLine={false}
                            tickLine={false}
                            tick={{ fontSize: 10, fill: "#6B7280", fontWeight: "bold" }}
                            domain={[0, 100]}
                            unit="%"
                        />
                        <YAxis
                            dataKey="name"
                            type="category"
                            axisLine={false}
                            tickLine={false}
                            tick={{ fontSize: 11, fill: "#1A1D2E", fontWeight: "bold" }}
                            width={140}
                        />
                        <Tooltip
                            cursor={{ fill: 'transparent' }}
                            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'
                            }}
                            itemStyle={{ color: '#fff', fontSize: '11px', fontWeight: 'bold' }}
                        />
                        <Bar dataKey="value" radius={[0, 6, 6, 0]} barSize={24}>
                            {data.map((entry, index) => (
                                <Cell key={index} fill={['#6C63FF', '#8B83FF', '#F59E0B', '#FF8C42', '#22C55E'][index % 5]} />
                            ))}
                        </Bar>
                    </BarChart>
                </ResponsiveContainer>
            </div>
        </div>
    )
})