import React, { useState, useMemo } from 'react';
import { useStore } from '../context/StoreContext';
import { PeriodFilterBar } from '../components/PeriodFilterBar';
import { PeakHoursChart } from '../components/PeakHoursChart';
import { isDateInPeriod, DateFilterState } from '../utils/dateFilters';
import { Package, AlertTriangle, TrendingUp, DollarSign, ArrowDownLeft, ArrowUpRight, ShoppingBag, Barcode, ShieldAlert, CheckCircle2, ChevronRight, Layers, BarChart3, LineChart, ShoppingCart, Calendar } from 'lucide-react';
import {
  ResponsiveContainer,
  AreaChart,
  Area,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from 'recharts';

export const DashboardPage: React.FC = () => {
  const { db, setActiveTab, setScannerModalOpen } = useStore();

  const [periodFilter, setPeriodFilter] = useState<DateFilterState>({
    period: '30d',
    startDate: '',
    endDate: ''
  });
  const [chartType, setChartType] = useState<'area' | 'bar'>('area');

  // Filtered Transactions & Inbound Records based on selected period
  const filteredTransactions = useMemo(() => {
    return db.transactions.filter(t => isDateInPeriod(t.date, periodFilter));
  }, [db.transactions, periodFilter]);

  const filteredInbounds = useMemo(() => {
    return db.inboundRecords.filter(inb => isDateInPeriod(inb.date, periodFilter));
  }, [db.inboundRecords, periodFilter]);

  // Compute Chart Data (Pembelian / Inbound vs Penjualan / Outbound vs Profit)
  const chartData = useMemo(() => {
    const dateMap: { [dateStr: string]: { date: string; displayDate: string; penjualan: number; pembelian: number; keuntungan: number } } = {};

    const formatDate = (isoStr: string) => isoStr.slice(0, 10);

    filteredTransactions.forEach(t => {
      const d = formatDate(t.date);
      if (!dateMap[d]) {
        const dateObj = new Date(d);
        const displayDate = dateObj.toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
        dateMap[d] = { date: d, displayDate, penjualan: 0, pembelian: 0, keuntungan: 0 };
      }
      dateMap[d].penjualan += t.finalAmount;
      dateMap[d].keuntungan += t.totalProfit;
    });

    filteredInbounds.forEach(inb => {
      const d = formatDate(inb.date);
      if (!dateMap[d]) {
        const dateObj = new Date(d);
        const displayDate = dateObj.toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
        dateMap[d] = { date: d, displayDate, penjualan: 0, pembelian: 0, keuntungan: 0 };
      }
      dateMap[d].pembelian += inb.totalCost;
    });

    let sortedList = Object.values(dateMap).sort((a, b) => a.date.localeCompare(b.date));
    return sortedList;
  }, [filteredTransactions, filteredInbounds]);

  const totalPeriodSales = filteredTransactions.reduce((acc, t) => acc + t.finalAmount, 0);
  const totalPeriodInbound = filteredInbounds.reduce((acc, i) => acc + i.totalCost, 0);
  const totalPeriodProfit = filteredTransactions.reduce((acc, t) => acc + t.totalProfit, 0);
  const totalPeriodTrxCount = filteredTransactions.length;

  // Metrics calculation
  let totalProductCount = db.products.length;
  let totalVariantCount = 0;
  let totalStockCount = 0;
  let totalBuyValue = 0;
  let totalSellValue = 0;
  let lowStockVariants: { productName: string; variantName: string; stock: number; minStock: number; unit: string; barcode: string; productId: string }[] = [];

  db.products.forEach(p => {
    p.variants.forEach(v => {
      totalVariantCount++;
      totalStockCount += v.stock;
      totalBuyValue += (v.stock * v.buyPrice);
      totalSellValue += (v.stock * v.sellPrice);

      if (v.stock <= v.minStock) {
        lowStockVariants.push({
          productName: p.name,
          variantName: v.variantName,
          stock: v.stock,
          minStock: v.minStock,
          unit: v.unit,
          barcode: v.barcode,
          productId: p.id
        });
      }
    });
  });

  // Calculate Today's Sales
  const todayStr = new Date().toISOString().slice(0, 10);
  const todayTransactions = db.transactions.filter(t => t.date.slice(0, 10) === todayStr);
  const todayRevenue = todayTransactions.reduce((acc, t) => acc + t.finalAmount, 0);
  const todayProfit = todayTransactions.reduce((acc, t) => acc + t.totalProfit, 0);

  // Inbound stats
  const totalInboundItems = db.inboundRecords.reduce((acc, r) => acc + r.quantity, 0);

  return (
    <div className="space-y-6">
      
      {/* Welcome Banner */}
      <div className="bg-gradient-to-r from-slate-900 via-emerald-950 to-teal-900 text-white rounded-3xl p-6 sm:p-8 shadow-xl relative overflow-hidden">
        <div className="absolute right-0 top-0 bottom-0 opacity-10 pointer-events-none flex items-center pr-10">
          <Package className="w-64 h-64 text-white" />
        </div>
        
        <div className="relative z-10 max-w-2xl space-y-3">
          <span className="px-3 py-1 bg-emerald-500/20 text-emerald-300 text-xs font-bold rounded-full border border-emerald-500/30">
            Sistem Monitoring Stok Sembako Mandiri
          </span>
          <h2 className="text-2xl sm:text-3xl font-black tracking-tight">
            Selamat Datang di Dashboard Toko Makmur
          </h2>
          <p className="text-slate-300 text-xs sm:text-sm leading-relaxed">
            Pantau ketersediaan sembako, riwayat barang masuk/keluar, harga varian, dan transaksi kasir barcode dalam satu tampilan yang mudah.
          </p>

          <div className="flex flex-wrap gap-2.5 pt-2">
            <button
              onClick={() => setActiveTab('pos')}
              className="px-4 py-2 bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-extrabold text-xs rounded-xl flex items-center gap-2 shadow-lg transition"
            >
              <ShoppingBag className="w-4 h-4" />
              Buka Kasir Transaksi
            </button>
          </div>
        </div>
      </div>

      {/* FILTER PERIODE LAPORAN */}
      <PeriodFilterBar
        filterState={periodFilter}
        onChange={setPeriodFilter}
      />

      {/* METRICS GRID */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        
        {/* Total Stock Items */}
        <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-2xs space-y-2 hover:border-emerald-300 transition">
          <div className="flex items-center justify-between">
            <span className="text-xs font-bold text-slate-500">Total Stok Barang</span>
            <div className="p-2 bg-emerald-100 text-emerald-700 rounded-xl">
              <Package className="w-5 h-5" />
            </div>
          </div>
          <div>
            <span className="text-2xl font-black text-slate-900">{totalStockCount.toLocaleString('id-ID')}</span>
            <span className="text-xs text-slate-500 ml-1">unit</span>
          </div>
          <div className="flex items-center justify-between text-[11px] text-slate-500 pt-1 border-t border-slate-100">
            <span>{totalProductCount} Produk</span>
            <span className="font-semibold text-emerald-700">{totalVariantCount} Varian</span>
          </div>
        </div>

        {/* Low Stock Warning Card */}
        <div className={`border rounded-2xl p-5 shadow-2xs space-y-2 transition ${
          lowStockVariants.length > 0
            ? 'bg-amber-50/80 border-amber-300'
            : 'bg-white border-slate-200'
        }`}>
          <div className="flex items-center justify-between">
            <span className={`text-xs font-bold ${lowStockVariants.length > 0 ? 'text-amber-900' : 'text-slate-500'}`}>
              Stok Menipis (Alert)
            </span>
            <div className={`p-2 rounded-xl ${lowStockVariants.length > 0 ? 'bg-amber-500 text-white animate-bounce' : 'bg-slate-100 text-slate-400'}`}>
              <AlertTriangle className="w-5 h-5" />
            </div>
          </div>
          <div>
            <span className={`text-2xl font-black ${lowStockVariants.length > 0 ? 'text-amber-900' : 'text-slate-900'}`}>
              {lowStockVariants.length}
            </span>
            <span className="text-xs text-slate-500 ml-1">varian perlu restock</span>
          </div>
          <div className="flex items-center justify-between text-[11px] pt-1 border-t border-slate-200/60">
            <span className="text-slate-500">Batas minimum stok</span>
            <button
              onClick={() => setActiveTab('products')}
              className="text-amber-800 hover:underline font-bold flex items-center gap-0.5"
            >
              Lihat Detail <ChevronRight className="w-3 h-3" />
            </button>
          </div>
        </div>

        {/* Today Sales */}
        <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-2xs space-y-2 hover:border-emerald-300 transition">
          <div className="flex items-center justify-between">
            <span className="text-xs font-bold text-slate-500">Penjualan Hari Ini</span>
            <div className="p-2 bg-teal-100 text-teal-700 rounded-xl">
              <TrendingUp className="w-5 h-5" />
            </div>
          </div>
          <div>
            <span className="text-2xl font-black text-slate-900">
              Rp {todayRevenue.toLocaleString('id-ID')}
            </span>
          </div>
          <div className="flex items-center justify-between text-[11px] text-slate-500 pt-1 border-t border-slate-100">
            <span>{todayTransactions.length} Transaksi</span>
            <span className="font-bold text-emerald-600">+Rp {todayProfit.toLocaleString('id-ID')} untung</span>
          </div>
        </div>

        {/* Total Inventory Asset Value */}
        <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-2xs space-y-2 hover:border-emerald-300 transition">
          <div className="flex items-center justify-between">
            <span className="text-xs font-bold text-slate-500">Nilai Aset Modal Stok</span>
            <div className="p-2 bg-slate-100 text-slate-700 rounded-xl">
              <DollarSign className="w-5 h-5" />
            </div>
          </div>
          <div>
            <span className="text-xl font-black text-slate-900">
              Rp {totalBuyValue.toLocaleString('id-ID')}
            </span>
          </div>
          <div className="flex items-center justify-between text-[11px] text-slate-500 pt-1 border-t border-slate-100">
            <span>Estimasi Omzet:</span>
            <span className="font-bold text-slate-800">Rp {totalSellValue.toLocaleString('id-ID')}</span>
          </div>
        </div>

      </div>

      {/* TRANSACTION & PURCHASE CHART SECTION */}
      <div className="bg-white border border-slate-200 rounded-2xl p-6 shadow-2xs space-y-6">
        
        {/* 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-emerald-100 text-emerald-800 rounded-xl">
                <BarChart3 className="w-5 h-5" />
              </div>
              <div>
                <h3 className="font-extrabold text-slate-900 text-base">
                  Grafik Pembelian & Penjualan Sembako
                </h3>
                <p className="text-xs text-slate-500">
                  Perbandingan Modal Belanja Barang Masuk (Inbound) vs Omzet Kasir
                </p>
              </div>
            </div>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            {/* Active Period Indicator Badge */}
            <span className="px-2.5 py-1 bg-emerald-50 text-emerald-800 border border-emerald-200 rounded-xl text-[11px] font-bold flex items-center gap-1">
              <Calendar className="w-3.5 h-3.5 text-emerald-600" />
              Sesuai Filter Periode Terpilih
            </span>

            {/* Chart Type Toggle */}
            <div className="bg-slate-100 p-1 rounded-xl flex items-center gap-1">
              <button
                onClick={() => setChartType('area')}
                className={`p-1.5 rounded-lg text-xs font-bold transition ${
                  chartType === 'area'
                    ? 'bg-white text-emerald-700 shadow-2xs'
                    : 'text-slate-500 hover:text-slate-900'
                }`}
                title="Tampilan Grafik Area"
              >
                <LineChart className="w-4 h-4" />
              </button>
              <button
                onClick={() => setChartType('bar')}
                className={`p-1.5 rounded-lg text-xs font-bold transition ${
                  chartType === 'bar'
                    ? 'bg-white text-emerald-700 shadow-2xs'
                    : 'text-slate-500 hover:text-slate-900'
                }`}
                title="Tampilan Diagram Batang"
              >
                <BarChart3 className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>

        {/* Period Summary Cards */}
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <div className="p-3.5 bg-blue-50/80 border border-blue-100 rounded-xl">
            <div className="text-[11px] font-bold text-blue-800 flex items-center gap-1">
              <ArrowDownLeft className="w-3.5 h-3.5 text-blue-600" />
              <span>Belanja Barang (Pembelian Inbound)</span>
            </div>
            <div className="text-lg font-black text-blue-900 mt-1">
              Rp {totalPeriodInbound.toLocaleString('id-ID')}
            </div>
          </div>

          <div className="p-3.5 bg-emerald-50/80 border border-emerald-100 rounded-xl">
            <div className="text-[11px] font-bold text-emerald-800 flex items-center gap-1">
              <ArrowUpRight className="w-3.5 h-3.5 text-emerald-600" />
              <span>Omzet Penjualan (Outbound Kasir)</span>
            </div>
            <div className="text-lg font-black text-emerald-900 mt-1">
              Rp {totalPeriodSales.toLocaleString('id-ID')}
            </div>
          </div>

          <div className="p-3.5 bg-indigo-50/80 border border-indigo-100 rounded-xl">
            <div className="text-[11px] font-bold text-indigo-800 flex items-center gap-1">
              <TrendingUp className="w-3.5 h-3.5 text-indigo-600" />
              <span>Total Keuntungan Bersih</span>
            </div>
            <div className="text-lg font-black text-indigo-900 mt-1">
              Rp {totalPeriodProfit.toLocaleString('id-ID')}
            </div>
          </div>
        </div>

        {/* Recharts Container */}
        <div className="h-72 w-full pt-2">
          {chartData.length === 0 ? (
            <div className="h-full flex items-center justify-center text-slate-400 text-xs font-semibold">
              Belum ada data transaksi/pembelian untuk periode ini.
            </div>
          ) : (
            <ResponsiveContainer width="100%" height="100%">
              {chartType === 'area' ? (
                <AreaChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
                  <defs>
                    <linearGradient id="colorPenjualan" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor="#10b981" stopOpacity={0.4}/>
                      <stop offset="95%" stopColor="#10b981" stopOpacity={0.0}/>
                    </linearGradient>
                    <linearGradient id="colorPembelian" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3}/>
                      <stop offset="95%" stopColor="#3b82f6" stopOpacity={0.0}/>
                    </linearGradient>
                    <linearGradient id="colorKeuntungan" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor="#6366f1" stopOpacity={0.3}/>
                      <stop offset="95%" stopColor="#6366f1" stopOpacity={0.0}/>
                    </linearGradient>
                  </defs>
                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
                  <XAxis dataKey="displayDate" tickLine={false} axisLine={false} tick={{ fontSize: 11, fill: '#64748b' }} />
                  <YAxis
                    tickLine={false}
                    axisLine={false}
                    tick={{ fontSize: 11, fill: '#64748b' }}
                    tickFormatter={(val) => `Rp ${(val / 1000).toLocaleString('id-ID')}k`}
                  />
                  <Tooltip
                    formatter={(value: any) => [`Rp ${Number(value).toLocaleString('id-ID')}`, '']}
                    labelFormatter={(label) => `Tanggal: ${label}`}
                    contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155', borderRadius: '12px', color: '#fff', fontSize: '12px' }}
                    itemStyle={{ color: '#f8fafc', fontWeight: 'bold' }}
                  />
                  <Legend
                    wrapperStyle={{ paddingTop: '15px', fontSize: '12px' }}
                    formatter={(value) => {
                      if (value === 'pembelian') return 'Pembelian (Modal Inbound)';
                      if (value === 'penjualan') return 'Penjualan (Omzet)';
                      if (value === 'keuntungan') return 'Keuntungan (Profit)';
                      return value;
                    }}
                  />
                  <Area type="monotone" dataKey="pembelian" stroke="#3b82f6" strokeWidth={2} fillOpacity={1} fill="url(#colorPembelian)" />
                  <Area type="monotone" dataKey="penjualan" stroke="#10b981" strokeWidth={2.5} fillOpacity={1} fill="url(#colorPenjualan)" />
                  <Area type="monotone" dataKey="keuntungan" stroke="#6366f1" strokeWidth={2} fillOpacity={1} fill="url(#colorKeuntungan)" />
                </AreaChart>
              ) : (
                <BarChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
                  <XAxis dataKey="displayDate" tickLine={false} axisLine={false} tick={{ fontSize: 11, fill: '#64748b' }} />
                  <YAxis
                    tickLine={false}
                    axisLine={false}
                    tick={{ fontSize: 11, fill: '#64748b' }}
                    tickFormatter={(val) => `Rp ${(val / 1000).toLocaleString('id-ID')}k`}
                  />
                  <Tooltip
                    formatter={(value: any) => [`Rp ${Number(value).toLocaleString('id-ID')}`, '']}
                    labelFormatter={(label) => `Tanggal: ${label}`}
                    contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155', borderRadius: '12px', color: '#fff', fontSize: '12px' }}
                    itemStyle={{ color: '#f8fafc', fontWeight: 'bold' }}
                  />
                  <Legend
                    wrapperStyle={{ paddingTop: '15px', fontSize: '12px' }}
                    formatter={(value) => {
                      if (value === 'pembelian') return 'Pembelian (Modal Inbound)';
                      if (value === 'penjualan') return 'Penjualan (Omzet)';
                      if (value === 'keuntungan') return 'Keuntungan (Profit)';
                      return value;
                    }}
                  />
                  <Bar dataKey="pembelian" fill="#3b82f6" radius={[4, 4, 0, 0]} />
                  <Bar dataKey="penjualan" fill="#10b981" radius={[4, 4, 0, 0]} />
                  <Bar dataKey="keuntungan" fill="#6366f1" radius={[4, 4, 0, 0]} />
                </BarChart>
              )}
            </ResponsiveContainer>
          )}
        </div>

      </div>

      {/* PEAK TRANSACTION HOURS TSUNAMI WAVE CHART */}
      <PeakHoursChart transactions={filteredTransactions} />

      {/* LOW STOCK ALERT TABLE SECTION */}
      {lowStockVariants.length > 0 && (
        <div className="bg-amber-50 border border-amber-200 rounded-2xl p-5 space-y-3">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2 text-amber-900 font-bold text-sm">
              <ShieldAlert className="w-5 h-5 text-amber-600" />
              <span>Perhatian! Varian Barang Berikut Perlu Ditambah (Restock)</span>
            </div>
            <button
              onClick={() => setActiveTab('inbound')}
              className="px-3 py-1 bg-amber-600 hover:bg-amber-700 text-white font-bold text-xs rounded-lg transition"
            >
              + Catat Barang Masuk
            </button>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full text-left text-xs">
              <thead className="bg-amber-100/60 text-amber-900 font-bold uppercase tracking-wider">
                <tr>
                  <th className="p-2.5 rounded-l-lg">Nama Barang</th>
                  <th className="p-2.5">Varian / Ukuran</th>
                  <th className="p-2.5">Barcode</th>
                  <th className="p-2.5">Sisa Stok</th>
                  <th className="p-2.5">Min Stok</th>
                  <th className="p-2.5 rounded-r-lg text-right">Aksi</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-amber-200/50">
                {lowStockVariants.map((item, idx) => (
                  <tr key={idx} className="hover:bg-amber-100/40 transition">
                    <td className="p-2.5 font-bold text-slate-900">{item.productName}</td>
                    <td className="p-2.5 font-medium text-amber-900">{item.variantName}</td>
                    <td className="p-2.5 font-mono text-slate-600">{item.barcode}</td>
                    <td className="p-2.5">
                      <span className="px-2 py-0.5 bg-rose-100 text-rose-800 rounded font-black">
                        {item.stock} {item.unit}
                      </span>
                    </td>
                    <td className="p-2.5 text-slate-600">{item.minStock} {item.unit}</td>
                    <td className="p-2.5 text-right">
                      <button
                        onClick={() => setActiveTab('inbound')}
                        className="px-2.5 py-1 bg-white border border-amber-300 text-amber-900 hover:bg-amber-200 rounded font-bold transition"
                      >
                        Restock
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

    </div>
  );
};