import React, { useMemo } from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
import { SpotlightCard } from '../SpotlightCard';
import { InfoTooltip } from '../InfoTooltip';

const CustomTooltip = ({ active, payload }) => {
    if (active && payload && payload.length) {
        return (
            <div className="bg-zinc-900/90 border border-zinc-700/50 p-3 rounded-lg shadow-xl backdrop-blur-md">
                <p className="text-zinc-100 font-bold mb-1">{payload[0].payload.name}</p>
                <p className="text-zinc-400 text-xs">
                    {payload[0].value} Owners
                </p>
            </div>
        );
    }
    return null;
};

export const OwnerIntentFunnel = ({ properties }) => {
    const data = useMemo(() => {
        const total = properties.length;
        const willingToSell = properties.filter(p => p.ownerData.willingToSellProperty).length;
        const willingToRent = properties.filter(p => p.ownerData.willingToRentProperty).length;
        const hotLeads = properties.filter(p => p.canvassingStatus === 'Hot Lead').length;

        return [
            { name: 'Total Owners', value: total, color: '#3f3f46' }, // zinc-700
            { name: 'Willing to Sell', value: willingToSell, color: '#8b5cf6' }, // violet-500
            { name: 'Willing to Rent', value: willingToRent, color: '#3b82f6' }, // blue-500
            { name: 'Hot Leads', value: hotLeads, color: '#f97316' }, // orange-500
        ];
    }, [properties]);

    return (
        <SpotlightCard className="h-full flex flex-col">
            <div className="p-6 flex-1 flex flex-col">
                <div className="mb-4">
                    <h3 className="text-lg font-bold text-zinc-900 dark:text-white flex items-center">
                        Owner Intent
                        <InfoTooltip text='Classification of owners based on willingness to sell or rent. Prioritize "Hot Leads" for immediate canvassing.' />
                    </h3>
                    <p className="text-xs text-zinc-500 dark:text-zinc-400">Conversion pipeline</p>
                </div>

                <div className="flex-1 w-full min-h-[200px]">
                    <ResponsiveContainer width="100%" height="100%">
                        <BarChart
                            layout="vertical"
                            data={data}
                            margin={{ top: 0, right: 30, left: 20, bottom: 0 }}
                        >
                            <XAxis type="number" hide />
                            <YAxis
                                type="category"
                                dataKey="name"
                                width={100}
                                tick={{ fill: '#71717a', fontSize: 11, fontWeight: 600 }}
                                axisLine={false}
                                tickLine={false}
                            />
                            <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
                            <Bar dataKey="value" radius={[0, 4, 4, 0]} barSize={24}>
                                {data.map((entry, index) => (
                                    <Cell key={`cell-${index}`} fill={entry.color} />
                                ))}
                            </Bar>
                        </BarChart>
                    </ResponsiveContainer>
                </div>
            </div>
        </SpotlightCard>
    );
};
