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

const CustomTooltip = ({ active, payload, label }) => {
    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">Rating: {label}/10</p>
                <p className="text-zinc-400 text-xs">
                    Potential Value: <span className="text-emerald-400 font-bold">${payload[0].value.toLocaleString()}</span>
                </p>
            </div>
        );
    }
    return null;
};

export const RevenueByNeighborhood = ({ properties }) => {
    const data = useMemo(() => {
        // Group by neighborhood rating for now (simulating "Neighborhoods")
        const groups = properties.reduce((acc, p) => {
            const rating = p.propertyData.neighborhoodRating || 0;
            // Summing Potential Revenue (using repair cost as proxy or just market value significance)
            // Let's use Renovation Cost to show "Repair Opportunity"
            const value = p.propertyData.renovationCost || 0;
            acc[rating] = (acc[rating] || 0) + value;
            return acc;
        }, {});

        return Object.keys(groups).map(key => ({
            rating: key,
            value: groups[key]
        })).sort((a, b) => b.rating - a.rating); // Higher rated neighborhoods first
    }, [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">
                        Revenue Potential
                        <InfoTooltip text="Estimated revenue opportunity based on neighborhood rating and average repair costs." />
                    </h3>
                    <p className="text-xs text-zinc-500 dark:text-zinc-400">By Neighborhood Rating</p>
                </div>

                <div className="flex-1 w-full min-h-[200px]">
                    <ResponsiveContainer width="100%" height="100%">
                        <BarChart
                            data={data}
                            margin={{ top: 10, right: 10, left: -20, bottom: 0 }}
                        >
                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#3f3f46" opacity={0.2} />
                            <XAxis
                                dataKey="rating"
                                tick={{ fill: '#71717a', fontSize: 10 }}
                                axisLine={false}
                                tickLine={false}
                            />
                            <YAxis
                                tick={{ fill: '#71717a', fontSize: 10 }}
                                axisLine={false}
                                tickLine={false}
                                tickFormatter={(value) => `$${value / 1000}k`}
                            />
                            <Tooltip content={<CustomTooltip />} cursor={{ fill: 'rgba(255,255,255,0.05)' }} />
                            <Bar dataKey="value" fill="#10b981" radius={[4, 4, 0, 0]} barSize={30} />
                        </BarChart>
                    </ResponsiveContainer>
                </div>
            </div>
        </SpotlightCard>
    );
};
