import React from 'react';

const HeatMap = ({ timeHabits }) => {
    if (!timeHabits) return null;

    // Helper to get intensity for a day/time slot
    // Since we only have aggregate hourly and daily stats, we'll approximate:
    // Cell(d, h) ~ Daily(d) * Hourly(h)
    
    // Normalize daily distribution (0-6, Mon-Sun)
    // API usually returns 0=Monday or 0=Sunday depending on backend. Let's assume 0=Monday for now.
    const dailyDist = timeHabits.daily_distribution || {};
    const hourlyDist = timeHabits.hourly_distribution || {};

    const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
    const timeBlocks = [
        { label: 'Night', hours: [0, 1, 2, 3, 4, 5] },
        { label: 'Morning', hours: [6, 7, 8, 9, 10, 11] },
        { label: 'Noon', hours: [12, 13, 14, 15, 16, 17] },
        { label: 'Evening', hours: [18, 19, 20, 21, 22, 23] }
    ];

    const maxDaily = Math.max(...Object.values(dailyDist)) || 1;
    const maxHourly = Math.max(...Object.values(hourlyDist)) || 1;

    // Flatten grid for rendering: 4 rows (time blocks) x 7 cols (days)
    // Actually code.html has many small squares. It looks like each column is a day, and rows are finer time slots.
    // Let's do 4 rows representing 6-hour blocks.
    
    return (
        <div className="bg-card-dark border border-[#222f49] rounded-xl p-6 h-full">
            <h3 className="text-xl font-bold text-white mb-6 flex items-center gap-2">
                <span className="material-symbols-outlined text-primary">history</span>
                Chronobiology
            </h3>

            <div className="mb-8">
                <h4 className="text-sm text-slate-400 mb-3 font-medium">Listening Heatmap</h4>
                
                {/* Grid */}
                <div className="grid grid-cols-7 gap-1">
                    {/* Header Days */}
                    {days.map((d, i) => (
                        <div key={i} className="text-[10px] text-center text-slate-500">{d}</div>
                    ))}

                    {/* Generate cells: 4 rows x 7 cols */}
                    {timeBlocks.map((block, rowIdx) => (
                        <React.Fragment key={rowIdx}>
                             {days.map((_, colIdx) => {
                                 // Calculate approximated intensity
                                 const dayVal = dailyDist[colIdx] || 0;
                                 const blockVal = block.hours.reduce((acc, h) => acc + (hourlyDist[h] || 0), 0);
                                 
                                 // Normalize
                                 const intensity = (dayVal / maxDaily) * (blockVal / (maxHourly * 6));
                                 
                                 let bgClass = "bg-[#1e293b]"; // Default empty
                                 if (intensity > 0.8) bgClass = "bg-primary";
                                 else if (intensity > 0.6) bgClass = "bg-primary/80";
                                 else if (intensity > 0.4) bgClass = "bg-primary/60";
                                 else if (intensity > 0.2) bgClass = "bg-primary/40";
                                 else if (intensity > 0) bgClass = "bg-primary/20";
                                 
                                 return (
                                    <div 
                                        key={`${rowIdx}-${colIdx}`} 
                                        className={`aspect-square rounded-sm ${bgClass}`}
                                        title={`${block.label} on ${days[colIdx]}`}
                                    ></div>
                                 );
                             })}
                        </React.Fragment>
                    ))}
                </div>
                
                <div className="flex justify-between mt-2 text-[10px] text-slate-500">
                    <span>00:00</span>
                    <span>12:00</span>
                    <span>23:59</span>
                </div>
            </div>

            {/* Session Flow (Static for now as API doesn't provide session logs yet) */}
            <div>
                <h4 className="text-sm text-slate-400 mb-4 font-medium">Session Flow</h4>
                <div className="relative pl-4 border-l border-[#334155] space-y-6">
                    <div className="relative">
                        <span className="absolute -left-[21px] top-1 h-2.5 w-2.5 rounded-full bg-primary ring-4 ring-card-dark"></span>
                        <p className="text-xs text-slate-400">Today, 2:30 PM</p>
                        <p className="text-white font-bold text-sm">Marathoning</p>
                        <p className="text-xs text-primary mt-0.5">3h 42m session</p>
                    </div>
                    <div className="relative">
                        <span className="absolute -left-[21px] top-1 h-2.5 w-2.5 rounded-full bg-slate-600 ring-4 ring-card-dark"></span>
                        <p className="text-xs text-slate-400">Yesterday, 9:15 AM</p>
                        <p className="text-white font-bold text-sm">Micro-Dosing</p>
                        <p className="text-xs text-slate-500 mt-0.5">12m commute</p>
                    </div>
                    <div className="relative">
                        <span className="absolute -left-[21px] top-1 h-2.5 w-2.5 rounded-full bg-primary/50 ring-4 ring-card-dark"></span>
                        <p className="text-xs text-slate-400">Yesterday, 8:00 PM</p>
                        <p className="text-white font-bold text-sm">Deep Focus</p>
                        <p className="text-xs text-primary/70 mt-0.5">1h 15m session</p>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default HeatMap;
