import React, { useState, useMemo } from 'react';
import { Transaction } from '../types';
import { Clock, TrendingUp, ShoppingBag, Zap, Sparkles, Waves, BarChart2 } from 'lucide-react';
import {
  ResponsiveContainer,
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from 'recharts';

interface PeakHoursChartProps {
  transactions: Transaction[];
  title?: string;
  subtitle?: string;
}

export const PeakHoursChart: React.FC<PeakHoursChartProps> = ({
  transactions,
  title = "Analisis Jam Puncak & Rata-Rata Waktu Transaksi Pembeli",
  subtitle = "Grafik distribusi frekuensi & nominal belanja pembeli berdasarkan jam operasional"
}) => {
  const [viewMode, setViewMode] = useState<'count' | 'revenue'>('count');

  // Process Hourly Transaction Data (00:00 - 23:00)
  const hourlyData = useMemo(() => {
    // Initialize 24 hours slots
    const hoursMap: { [hour: number]: { hour: number; hourLabel: string; count: number; revenue: number; profit: number; avgBasket: number } } = {};
    for (let h = 0; h < 24; h++) {
      const label = `${h.toString().padStart(2, '0')}:00`;
      hoursMap[h] = {
        hour: h,
        hourLabel: label,
        count: 0,
        revenue: 0,
        profit: 0,
        avgBasket: 0
      };
    }

    // Populate data from transactions
    transactions.forEach(trx => {
      if (!trx.date) return;
      const d = new Date(trx.date);
      if (isNaN(d.getTime())) return;
      
      const hour = d.getHours();
      if (hoursMap[hour]) {
        hoursMap[hour].count += 1;
        hoursMap[hour].revenue += trx.finalAmount || 0;
        hoursMap[hour].profit += trx.totalProfit || 0;
      }
    });

    // Calculate average basket per hour slot
    Object.values(hoursMap).forEach(slot => {
      slot.avgBasket = slot.count > 0 ? Math.round(slot.revenue / slot.count) : 0;
    });

    // Filter to active operating range or keep 06:00 to 22:00 if all empty, or full 24 hours if data spread
    const allSlots = Object.values(hoursMap);
    const nonZeroSlots = allSlots.filter(s => s.count > 0);

    if (nonZeroSlots.length === 0) {
      // Default slice for clean display when empty: 06:00 - 22:00
      return allSlots.slice(6, 23);
    }

    const minHour = Math.max(0, Math.min(...nonZeroSlots.map(s => s.hour)) - 1);
    const maxHour = Math.min(23, Math.max(...nonZeroSlots.map(s => s.hour)) + 1);

    // Ensure at least 07:00 - 21:00 window for nice wave visuals
    const startH = Math.min(minHour, 7);
    const endH = Math.max(maxHour, 21);

    return allSlots.slice(startH, endH + 1);
  }, [transactions]);

  // Compute Peak Analytics
  const analytics = useMemo(() => {
    let maxCount = 0;
    let peakCountSlot = '-';
    let maxRevenue = 0;
    let peakRevenueSlot = '-';
    let totalRevenue = 0;
    let totalTrx = 0;

    hourlyData.forEach(slot => {
      totalRevenue += slot.revenue;
      totalTrx += slot.count;

      if (slot.count > maxCount) {
        maxCount = slot.count;
        const nextHour = (slot.hour + 1) % 24;
        peakCountSlot = `${slot.hourLabel} - ${nextHour.toString().padStart(2, '0')}:00`;
      }

      if (slot.revenue > maxRevenue) {
        maxRevenue = slot.revenue;
        const nextHour = (slot.hour + 1) % 24;
        peakRevenueSlot = `${slot.hourLabel} - ${nextHour.toString().padStart(2, '0')}:00`;
      }
    });

    const avgBasketSize = totalTrx > 0 ? Math.round(totalRevenue / totalTrx) : 0;

    return {
      maxCount,
      peakCountSlot: maxCount > 0 ? peakCountSlot : 'Belum Ada Transaksi',
      maxRevenue,
      peakRevenueSlot: maxRevenue > 0 ? peakRevenueSlot : 'Belum Ada Transaksi',
      totalTrx,
      totalRevenue,
      avgBasketSize
    };
  }, [hourlyData]);

  return (
    <div className="bg-white border border-slate-200 rounded-2xl p-5 sm:p-6 shadow-2xs space-y-5">
      
      {/* Header & Controls */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-slate-100 pb-4">
        <div>
          <div className="flex items-center gap-2">
            <div className="p-2 bg-gradient-to-br from-emerald-500 to-teal-700 text-white rounded-xl shadow-xs">
              <Waves className="w-5 h-5 animate-pulse" />
            </div>
            <div>
              <h3 className="font-extrabold text-slate-900 text-base flex items-center gap-2">
                <span>{title}</span>
              </h3>
              <p className="text-xs text-slate-500 mt-0.5">
                {subtitle}
              </p>
            </div>
          </div>
        </div>

        {/* View Mode Switcher */}
        <div className="bg-slate-100 p-1 rounded-xl flex items-center gap-1 self-start md:self-auto">
          <button
            onClick={() => setViewMode('count')}
            className={`px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-1.5 ${
              viewMode === 'count'
                ? 'bg-emerald-600 text-white shadow-xs'
                : 'text-slate-600 hover:text-slate-900'
            }`}
          >
            <ShoppingBag className="w-3.5 h-3.5" />
            <span>Frekuensi (Jumlah Transaksi)</span>
          </button>
          <button
            onClick={() => setViewMode('revenue')}
            className={`px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-1.5 ${
              viewMode === 'revenue'
                ? 'bg-emerald-600 text-white shadow-xs'
                : 'text-slate-600 hover:text-slate-900'
            }`}
          >
            <TrendingUp className="w-3.5 h-3.5" />
            <span>Nominal Omzet (Rp)</span>
          </button>
        </div>
      </div>

      {/* Analytics Summary Badges */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
        
        {/* Peak Hours Badge */}
        <div className="p-3.5 bg-gradient-to-r from-emerald-50 to-teal-50 border border-emerald-200/80 rounded-xl space-y-1">
          <div className="flex items-center justify-between text-emerald-900 text-[11px] font-extrabold">
            <span className="flex items-center gap-1">
              <Clock className="w-3.5 h-3.5 text-emerald-600" />
              Jam Puncak Teramai (Peak Time)
            </span>
            <span className="px-1.5 py-0.2 bg-emerald-200 text-emerald-900 text-[9px] rounded font-bold">
              Teramai
            </span>
          </div>
          <div className="text-base sm:text-lg font-black text-emerald-950">
            {analytics.peakCountSlot}
          </div>
          <div className="text-[11px] text-emerald-700 font-semibold">
            {analytics.maxCount > 0 ? `${analytics.maxCount} Transaksi Selesai` : 'Tidak ada data'}
          </div>
        </div>

        {/* Peak Revenue Slot */}
        <div className="p-3.5 bg-gradient-to-r from-teal-50 to-cyan-50 border border-teal-200/80 rounded-xl space-y-1">
          <div className="flex items-center justify-between text-teal-900 text-[11px] font-extrabold">
            <span className="flex items-center gap-1">
              <TrendingUp className="w-3.5 h-3.5 text-teal-600" />
              Omzet Tertinggi per Jam
            </span>
            <span className="px-1.5 py-0.2 bg-teal-200 text-teal-900 text-[9px] rounded font-bold">
              Omzet Max
            </span>
          </div>
          <div className="text-base sm:text-lg font-black text-teal-950">
            {analytics.peakRevenueSlot}
          </div>
          <div className="text-[11px] text-teal-700 font-semibold">
            {analytics.maxRevenue > 0 ? `Rp ${analytics.maxRevenue.toLocaleString('id-ID')}` : 'Tidak ada data'}
          </div>
        </div>

        {/* Avg Basket Size */}
        <div className="p-3.5 bg-gradient-to-r from-slate-50 to-slate-100 border border-slate-200 rounded-xl space-y-1">
          <div className="flex items-center justify-between text-slate-800 text-[11px] font-extrabold">
            <span className="flex items-center gap-1">
              <Sparkles className="w-3.5 h-3.5 text-amber-500" />
              Rata-Rata Belanja (Basket Size)
            </span>
          </div>
          <div className="text-base sm:text-lg font-black text-slate-900">
            Rp {analytics.avgBasketSize.toLocaleString('id-ID')}
          </div>
          <div className="text-[11px] text-slate-500 font-semibold">
            Per transaksi pembeli
          </div>
        </div>

      </div>

      {/* Tsunami Wave Area Chart */}
      <div className="h-72 w-full pt-2">
        {analytics.totalTrx === 0 ? (
          <div className="h-full bg-slate-50 border border-dashed border-slate-200 rounded-xl flex flex-col items-center justify-center p-6 text-center space-y-2">
            <Clock className="w-8 h-8 text-slate-300 animate-bounce" />
            <p className="text-xs font-bold text-slate-600">Belum Ada Transaksi untuk Analisis Jam Rata-Rata Pembelian</p>
            <p className="text-[11px] text-slate-400 max-w-sm">
              Grafik tsunami jam ramai akan otomatis terbentuk secara visual begitu transaksi dibuat di menu Kasir.
            </p>
          </div>
        ) : (
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart data={hourlyData} margin={{ top: 15, right: 15, left: 0, bottom: 0 }}>
              <defs>
                {/* Tsunami Wave Gradient Green/Emerald */}
                <linearGradient id="tsunamiGradientCount" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#059669" stopOpacity={0.75} />
                  <stop offset="35%" stopColor="#10b981" stopOpacity={0.4} />
                  <stop offset="75%" stopColor="#14b8a6" stopOpacity={0.15} />
                  <stop offset="100%" stopColor="#2dd4bf" stopOpacity={0.0} />
                </linearGradient>

                {/* Tsunami Wave Gradient Blue/Indigo */}
                <linearGradient id="tsunamiGradientRevenue" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#4f46e5" stopOpacity={0.7} />
                  <stop offset="35%" stopColor="#6366f1" stopOpacity={0.35} />
                  <stop offset="75%" stopColor="#818cf8" stopOpacity={0.12} />
                  <stop offset="100%" stopColor="#a5b4fc" stopOpacity={0.0} />
                </linearGradient>
              </defs>

              <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
              <XAxis
                dataKey="hourLabel"
                tickLine={false}
                axisLine={false}
                tick={{ fontSize: 11, fill: '#475569', fontWeight: 600 }}
              />
              <YAxis
                tickLine={false}
                axisLine={false}
                tick={{ fontSize: 11, fill: '#64748b' }}
                tickFormatter={(val) =>
                  viewMode === 'count' ? `${val} trx` : `Rp ${(val / 1000).toLocaleString('id-ID')}k`
                }
              />
              <Tooltip
                content={({ active, payload, label }) => {
                  if (active && payload && payload.length) {
                    const data = payload[0].payload;
                    const nextHourStr = ((data.hour + 1) % 24).toString().padStart(2, '0') + ':00';
                    return (
                      <div className="bg-slate-900 border border-slate-700 p-3 rounded-xl shadow-xl text-white text-xs space-y-1.5 min-w-[200px]">
                        <div className="font-extrabold text-emerald-400 border-b border-slate-800 pb-1 flex items-center justify-between">
                          <span>⏰ Jam {label} - {nextHourStr}</span>
                          <span className="text-[10px] text-slate-400 font-normal">Operasional</span>
                        </div>
                        <div className="flex items-center justify-between text-slate-200 pt-0.5">
                          <span>Frekuensi Pembelian:</span>
                          <span className="font-black text-emerald-400">{data.count} Transaksi</span>
                        </div>
                        <div className="flex items-center justify-between text-slate-200">
                          <span>Total Omzet:</span>
                          <span className="font-bold text-teal-300">Rp {data.revenue.toLocaleString('id-ID')}</span>
                        </div>
                        <div className="flex items-center justify-between text-slate-300 border-t border-slate-800 pt-1 text-[11px]">
                          <span>Rata-Rata Keranjang:</span>
                          <span className="font-bold text-amber-300">Rp {data.avgBasket.toLocaleString('id-ID')}</span>
                        </div>
                      </div>
                    );
                  }
                  return null;
                }}
              />

              <Area
                type="monotone"
                dataKey={viewMode === 'count' ? 'count' : 'revenue'}
                name={viewMode === 'count' ? 'Jumlah Transaksi (Frekuensi)' : 'Nominal Omzet (Rp)'}
                stroke={viewMode === 'count' ? '#059669' : '#4f46e5'}
                strokeWidth={3}
                dot={{ r: 4, fill: viewMode === 'count' ? '#059669' : '#4f46e5', strokeWidth: 2, stroke: '#ffffff' }}
                activeDot={{ r: 7, strokeWidth: 3, stroke: '#ffffff' }}
                fillOpacity={1}
                fill={viewMode === 'count' ? 'url(#tsunamiGradientCount)' : 'url(#tsunamiGradientRevenue)'}
              />
            </AreaChart>
          </ResponsiveContainer>
        )}
      </div>

      {/* Practical Operational Insights Footer */}
      {analytics.maxCount > 0 && (
        <div className="p-3 bg-amber-50/80 border border-amber-200/80 rounded-xl flex items-start gap-2.5 text-xs text-amber-900">
          <Zap className="w-4 h-4 text-amber-600 shrink-0 mt-0.5" />
          <div>
            <span className="font-extrabold">Rekomendasi Operasional Toko:</span> Pembeli rata-rata paling ramai berbelanja pada jam <span className="font-black text-amber-950">{analytics.peakCountSlot}</span>. Pastikan area kasir siap dan stok barang populer (*fast-moving*) sudah ditata rapi sebelum jam tersebut.
          </div>
        </div>
      )}

    </div>
  );
};