'use client';

import { useCallback, useMemo, useRef, useState } from 'react';
import { LayoutShell } from '../../../../components/layout-shell';
import { useQuery } from '@tanstack/react-query';
import api from '../../../../lib/api-client';
import { smartRound } from '../../../../lib/utils';
import { DataTable, Column } from '../../../../components/ui/data-table';
import {
  Download,
  FileSpreadsheet,
  FileJson,
  FileCode2,
  FileText,
  TrendingUp,
  TrendingDown,
  AlertTriangle,
  CheckCircle2,
  XCircle,
  Building2,
  MapPin,
  Package,
  BarChart3,
  Filter,
  ChevronRight,
  ChevronDown,
  X,
} from 'lucide-react';

type ReportRow = {
  school_id?: number;
  school_code?: string;
  school_name?: string;
  region: string;
  district?: string;
  school_count?: number;
  commodity_count?: number;
  commodity_id?: number;
  commodity_code?: string;
  commodity_name?: string;
  unit?: string;
  region_count?: number;
  total_allocated: number;
  total_delivered: number;
  total_pending: number;
  delivery_percent: number;
  pending_percent: number;
  criticality: string;
  criticality_label: string;
  approved_delivery_count?: number;
  pending_delivery_count?: number;
};

type DrilldownRow = {
  commodity_id?: number;
  commodity_code?: string;
  commodity_name?: string;
  unit?: string;
  school_id?: number;
  school_code?: string;
  school_name?: string;
  region?: string;
  district?: string;
  total_allocated: number;
  total_delivered: number;
  total_pending: number;
  delivery_percent: number;
  criticality: string;
  criticality_label: string;
};

type DrilldownTarget = {
  type: 'school' | 'region' | 'commodity';
  id: string | number;
  label: string;
} | null;

type Aggregations = {
  grand_allocated: number;
  grand_delivered: number;
  grand_pending: number;
  total_schools: number;
  total_regions: number;
  delivery_rate: number;
};

type CriticalityDistribution = {
  fully_delivered: number;
  on_track: number;
  low_stock: number;
  critical: number;
  no_deliveries: number;
};

const CRITICALITY_CONFIG: Record<string, { color: string; bg: string; icon: typeof CheckCircle2; border: string }> = {
  fully_delivered: { color: 'text-emerald-700', bg: 'bg-emerald-50', icon: CheckCircle2, border: 'border-emerald-200' },
  on_track: { color: 'text-blue-700', bg: 'bg-blue-50', icon: TrendingUp, border: 'border-blue-200' },
  low_stock: { color: 'text-amber-700', bg: 'bg-amber-50', icon: TrendingDown, border: 'border-amber-200' },
  critical: { color: 'text-rose-700', bg: 'bg-rose-50', icon: AlertTriangle, border: 'border-rose-200' },
  no_deliveries: { color: 'text-slate-700', bg: 'bg-slate-100', icon: XCircle, border: 'border-slate-200' },
};

function CriticalityBadge({ status, label }: { status: string; label: string }) {
  const config = CRITICALITY_CONFIG[status] || CRITICALITY_CONFIG.no_deliveries;
  const Icon = config.icon;
  return (
    <span className={`inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[11px] font-bold uppercase tracking-wide ${config.color} ${config.bg} ${config.border}`}>
      <Icon className="h-3 w-3" />
      {label}
    </span>
  );
}

function ProgressBar({ percent, criticality }: { percent: number; criticality: string }) {
  const colorMap: Record<string, string> = {
    fully_delivered: 'bg-emerald-500',
    on_track: 'bg-blue-500',
    low_stock: 'bg-amber-500',
    critical: 'bg-rose-500',
    no_deliveries: 'bg-slate-300',
  };
  const barColor = colorMap[criticality] || 'bg-slate-300';

  return (
    <div className="flex items-center gap-2">
      <div className="h-2 w-20 overflow-hidden rounded-full bg-slate-100">
        <div
          className={`h-full rounded-full transition-all ${barColor}`}
          style={{ width: `${Math.min(100, percent)}%` }}
        />
      </div>
      <span className="text-xs font-semibold text-slate-600">{percent}%</span>
    </div>
  );
}

export default function SupplyPlanReportsPage() {
  const [selectedPeriod, setSelectedPeriod] = useState<string>('');
  const [groupBy, setGroupBy] = useState<'school' | 'region' | 'commodity' | 'master'>('school');
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');
  const [regionFilter, setRegionFilter] = useState('');
  const [exportMenuOpen, setExportMenuOpen] = useState(false);
  const [drilldownTarget, setDrilldownTarget] = useState<DrilldownTarget>(null);
  const exportRef = useRef<HTMLDivElement>(null);

  // Fetch plan periods
  const { data: planPeriodsData } = useQuery({
    queryKey: ['plan-periods'],
    queryFn: async () => {
      const response = await api.get('/plan-periods');
      return response.data?.data ?? [];
    },
    staleTime: 5 * 60 * 1000,
  });

  const planPeriods = Array.isArray(planPeriodsData) ? planPeriodsData : [];
  const activePeriod = planPeriods.find((p: any) => p.is_active);
  const dataDefaultId = activePeriod?.id?.toString() || planPeriods?.[0]?.id?.toString() || '';
  const activePeriodId = selectedPeriod || dataDefaultId;

  // Fetch regions for filter
  const { data: regionsData } = useQuery({
    queryKey: ['regions-list'],
    queryFn: async () => {
      const response = await api.get('/regions/list');
      return response.data?.data ?? response.data ?? [];
    },
    staleTime: 5 * 60 * 1000,
  });

  const regions: string[] = useMemo(() => {
    if (!Array.isArray(regionsData)) return [];
    return regionsData.map((r: any) => (typeof r === 'string' ? r : r.region || r.name || '')).filter(Boolean);
  }, [regionsData]);

  // Fetch report data
  const { data: reportData, isFetching } = useQuery({
    queryKey: ['supply-plan-reports', activePeriodId, groupBy, page, search, regionFilter],
    queryFn: async () => {
      if (!activePeriodId) return null;
      const response = await api.get('/supply-plan-reports', {
        params: {
          plan_period_id: activePeriodId,
          group_by: groupBy,
          page,
          per_page: 25,
          search: search || undefined,
          region: regionFilter || undefined,
        },
      });
      return response.data;
    },
    enabled: Boolean(activePeriodId),
    placeholderData: (prev) => prev,
  });

  const rows: ReportRow[] = reportData?.data ?? [];
  const agg: Aggregations = reportData?.aggregations ?? {
    grand_allocated: 0, grand_delivered: 0, grand_pending: 0,
    total_schools: 0, total_regions: 0, delivery_rate: 0,
  };
  const critDist: CriticalityDistribution = reportData?.criticality_distribution ?? {
    fully_delivered: 0, on_track: 0, low_stock: 0, critical: 0, no_deliveries: 0,
  };

  // Drill-down query
  const { data: drilldownData, isFetching: drilldownLoading } = useQuery({
    queryKey: ['supply-plan-drilldown', drilldownTarget?.type, drilldownTarget?.id, activePeriodId],
    queryFn: async () => {
      if (!drilldownTarget) return null;
      const response = await api.get('/supply-plan-reports/drilldown', {
        params: {
          type: drilldownTarget.type,
          id: drilldownTarget.id,
          plan_period_id: activePeriodId || undefined,
        },
      });
      return response.data;
    },
    enabled: Boolean(drilldownTarget),
  });

  const drilldownRows: DrilldownRow[] = drilldownData?.data ?? [];

  // Handle row click for drill-down
  const handleRowClick = useCallback(
    (row: ReportRow) => {
      if (groupBy === 'master') return; // master already shows everything
      if (groupBy === 'school' && row.school_id) {
        const key = `school-${row.school_id}`;
        if (drilldownTarget?.type === 'school' && String(drilldownTarget?.id) === String(row.school_id)) {
          setDrilldownTarget(null);
        } else {
          setDrilldownTarget({ type: 'school', id: row.school_id, label: row.school_name || '' });
        }
      } else if (groupBy === 'region') {
        if (drilldownTarget?.type === 'region' && drilldownTarget?.id === row.region) {
          setDrilldownTarget(null);
        } else {
          setDrilldownTarget({ type: 'region', id: row.region, label: row.region });
        }
      } else if (groupBy === 'commodity' && row.commodity_id) {
        if (drilldownTarget?.type === 'commodity' && String(drilldownTarget?.id) === String(row.commodity_id)) {
          setDrilldownTarget(null);
        } else {
          setDrilldownTarget({ type: 'commodity', id: row.commodity_id, label: row.commodity_name || '' });
        }
      }
    },
    [groupBy, drilldownTarget]
  );

  // Export handler
  const handleExport = useCallback(
    async (format: string) => {
      setExportMenuOpen(false);
      try {
        const params = new URLSearchParams();
        params.set('format', format);
        if (activePeriodId) params.set('plan_period_id', activePeriodId);
        if (regionFilter) params.set('region', regionFilter);
        if (search) params.set('search', search);
        params.set('group_by', groupBy);

        const token = localStorage.getItem('gcx_fshs_token');
        const baseUrl = process.env.NEXT_PUBLIC_API_BASE ?? 'http://localhost:8000/api/v1';
        const url = `${baseUrl}/supply-plan-reports/export?${params.toString()}`;

        if (format === 'pdf') {
          // For PDF, fetch the data and generate client-side
          const response = await api.get('/supply-plan-reports/export', { params: Object.fromEntries(params) });
          const data = response.data;
          generatePdf(data.data ?? [], groupBy);
          return;
        }

        // For other formats, trigger download
        const link = document.createElement('a');
        const response = await fetch(url, {
          headers: { Authorization: `Bearer ${token}` },
        });

        if (!response.ok) throw new Error('Export failed');

        const blob = await response.blob();
        const blobUrl = URL.createObjectURL(blob);
        link.href = blobUrl;

        const ext = format === 'json' ? 'json' : format === 'xml' ? 'xml' : 'csv';
        link.download = `supply_plan_report_${new Date().toISOString().split('T')[0]}.${ext}`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(blobUrl);
      } catch (err) {
        console.error('Export error:', err);
      }
    },
    [activePeriodId, regionFilter, search, groupBy]
  );

  // Client-side PDF generation
  const generatePdf = useCallback((data: ReportRow[], group: string) => {
    // Build a printable HTML table and use window.print()
    const headers = group === 'master'
      ? ['School', 'Region', 'District', 'Commodity', 'Unit', 'Allocated', 'Delivered', 'Pending', 'Delivery %', 'Status']
      : group === 'commodity'
      ? ['Commodity', 'Unit', 'Schools', 'Regions', 'Allocated', 'Delivered', 'Pending', 'Delivery %', 'Status']
      : group === 'region'
      ? ['Region', 'Schools', 'Commodities', 'Allocated', 'Delivered', 'Pending', 'Delivery %', 'Status']
      : ['School', 'Region', 'District', 'Commodities', 'Allocated', 'Delivered', 'Pending', 'Delivery %', 'Status'];

    const rowsHtml = data.map((r) => {
      const cells = group === 'master'
        ? [r.school_name, r.region, r.district, r.commodity_name, r.unit, r.total_allocated, r.total_delivered, r.total_pending, `${r.delivery_percent}%`, r.criticality_label]
        : group === 'commodity'
        ? [r.commodity_name, r.unit, r.school_count, r.region_count, r.total_allocated, r.total_delivered, r.total_pending, `${r.delivery_percent}%`, r.criticality_label]
        : group === 'region'
        ? [r.region, r.school_count, r.commodity_count, r.total_allocated, r.total_delivered, r.total_pending, `${r.delivery_percent}%`, r.criticality_label]
        : [r.school_name, r.region, r.district, r.commodity_count, r.total_allocated, r.total_delivered, r.total_pending, `${r.delivery_percent}%`, r.criticality_label];
      return `<tr>${cells.map((c) => `<td style="border:1px solid #ddd;padding:6px 10px;font-size:12px">${c ?? ''}</td>`).join('')}</tr>`;
    }).join('');

    const html = `
      <!DOCTYPE html>
      <html><head><title>Supply Plan Report</title>
        <style>
          body{font-family:Arial,sans-serif;margin:20px}
          h1{font-size:18px;margin-bottom:4px}
          p{font-size:12px;color:#666;margin-top:0}
          table{border-collapse:collapse;width:100%;margin-top:16px}
          th{background:#f1f5f9;border:1px solid #ddd;padding:8px 10px;text-align:left;font-size:12px;font-weight:600}
          td{font-size:12px}
          @media print{body{margin:0} @page{size:landscape}}
        </style>
      </head><body>
        <h1>Supply Plan Report</h1>
        <p>Generated: ${new Date().toLocaleString()} | Grouped by: ${group}</p>
        <table>
          <thead><tr>${headers.map((h) => `<th>${h}</th>`).join('')}</tr></thead>
          <tbody>${rowsHtml}</tbody>
        </table>
      </body></html>
    `;

    const printWindow = window.open('', '_blank');
    if (printWindow) {
      printWindow.document.write(html);
      printWindow.document.close();
      printWindow.focus();
      setTimeout(() => printWindow.print(), 500);
    }
  }, []);

  // Close export menu on outside click
  const handleClickOutside = useCallback((e: MouseEvent) => {
    if (exportRef.current && !exportRef.current.contains(e.target as Node)) {
      setExportMenuOpen(false);
    }
  }, []);

  // School columns
  const schoolColumns: Column<ReportRow>[] = useMemo(
    () => [
      {
        key: 'school_name',
        label: 'School',
        sortable: true,
        render: (row) => (
          <div>
            <p className="font-semibold text-slate-900">{row.school_name}</p>
            <p className="text-xs text-slate-500">{row.school_code}</p>
          </div>
        ),
      },
      { key: 'region', label: 'Region', sortable: true },
      { key: 'district', label: 'District', sortable: true },
      {
        key: 'total_allocated',
        label: 'Allocated',
        sortable: true,
        render: (row) => <span className="font-semibold">{Number(row.total_allocated).toLocaleString()}</span>,
      },
      {
        key: 'total_delivered',
        label: 'Delivered',
        sortable: true,
        render: (row) => (
          <span className="font-semibold text-emerald-700">{Number(row.total_delivered).toLocaleString()}</span>
        ),
      },
      {
        key: 'total_pending',
        label: 'Pending',
        sortable: true,
        render: (row) => (
          <span className="font-semibold text-amber-700">{Number(row.total_pending).toLocaleString()}</span>
        ),
      },
      {
        key: 'delivery_percent',
        label: 'Progress',
        render: (row) => <ProgressBar percent={row.delivery_percent} criticality={row.criticality} />,
      },
      {
        key: 'criticality',
        label: 'Status',
        render: (row) => <CriticalityBadge status={row.criticality} label={row.criticality_label} />,
      },
    ],
    []
  );

  // Region columns
  const regionColumns: Column<ReportRow>[] = useMemo(
    () => [
      {
        key: 'region',
        label: 'Region',
        sortable: true,
        render: (row) => <span className="font-semibold text-slate-900">{row.region}</span>,
      },
      {
        key: 'school_count',
        label: 'Schools',
        sortable: true,
        render: (row) => <span className="font-medium">{row.school_count}</span>,
      },
      {
        key: 'commodity_count',
        label: 'Commodities',
        sortable: true,
      },
      {
        key: 'total_allocated',
        label: 'Allocated',
        sortable: true,
        render: (row) => <span className="font-semibold">{Number(row.total_allocated).toLocaleString()}</span>,
      },
      {
        key: 'total_delivered',
        label: 'Delivered',
        sortable: true,
        render: (row) => (
          <span className="font-semibold text-emerald-700">{Number(row.total_delivered).toLocaleString()}</span>
        ),
      },
      {
        key: 'total_pending',
        label: 'Pending',
        sortable: true,
        render: (row) => (
          <span className="font-semibold text-amber-700">{Number(row.total_pending).toLocaleString()}</span>
        ),
      },
      {
        key: 'delivery_percent',
        label: 'Progress',
        render: (row) => <ProgressBar percent={row.delivery_percent} criticality={row.criticality} />,
      },
      {
        key: 'criticality',
        label: 'Status',
        render: (row) => <CriticalityBadge status={row.criticality} label={row.criticality_label} />,
      },
    ],
    []
  );

  // Commodity columns
  const commodityColumns: Column<ReportRow>[] = useMemo(
    () => [
      {
        key: 'commodity_name',
        label: 'Commodity',
        sortable: true,
        render: (row) => (
          <div>
            <p className="font-semibold text-slate-900">{row.commodity_name}</p>
            <p className="text-xs text-slate-500">{row.commodity_code}{row.unit ? ` · ${row.unit}` : ''}</p>
          </div>
        ),
      },
      {
        key: 'school_count',
        label: 'Schools',
        sortable: true,
        render: (row) => <span className="font-medium">{row.school_count}</span>,
      },
      {
        key: 'region_count',
        label: 'Regions',
        sortable: true,
        render: (row) => <span className="font-medium">{row.region_count}</span>,
      },
      {
        key: 'total_allocated',
        label: 'Allocated',
        sortable: true,
        render: (row) => <span className="font-semibold">{Number(row.total_allocated).toLocaleString()}</span>,
      },
      {
        key: 'total_delivered',
        label: 'Delivered',
        sortable: true,
        render: (row) => (
          <span className="font-semibold text-emerald-700">{Number(row.total_delivered).toLocaleString()}</span>
        ),
      },
      {
        key: 'total_pending',
        label: 'Pending',
        sortable: true,
        render: (row) => (
          <span className="font-semibold text-amber-700">{Number(row.total_pending).toLocaleString()}</span>
        ),
      },
      {
        key: 'delivery_percent',
        label: 'Progress',
        render: (row) => <ProgressBar percent={row.delivery_percent} criticality={row.criticality} />,
      },
      {
        key: 'criticality',
        label: 'Status',
        render: (row) => <CriticalityBadge status={row.criticality} label={row.criticality_label} />,
      },
    ],
    []
  );

  // Master columns (everything)
  const masterColumns: Column<ReportRow>[] = useMemo(
    () => [
      {
        key: 'school_name',
        label: 'School',
        sortable: true,
        render: (row) => (
          <div>
            <p className="font-semibold text-slate-900">{row.school_name}</p>
            <p className="text-xs text-slate-500">{row.school_code}</p>
          </div>
        ),
      },
      { key: 'region', label: 'Region', sortable: true },
      { key: 'district', label: 'District', sortable: true },
      {
        key: 'commodity_name',
        label: 'Commodity',
        sortable: true,
        render: (row) => (
          <div>
            <p className="font-semibold text-slate-900">{row.commodity_name}</p>
            <p className="text-xs text-slate-500">{row.commodity_code}{row.unit ? ` \u00b7 ${row.unit}` : ''}</p>
          </div>
        ),
      },
      {
        key: 'total_allocated',
        label: 'Allocated',
        sortable: true,
        render: (row) => <span className="font-semibold">{Number(row.total_allocated).toLocaleString()}</span>,
      },
      {
        key: 'total_delivered',
        label: 'Delivered',
        sortable: true,
        render: (row) => (
          <span className="font-semibold text-emerald-700">{Number(row.total_delivered).toLocaleString()}</span>
        ),
      },
      {
        key: 'total_pending',
        label: 'Pending',
        sortable: true,
        render: (row) => (
          <span className="font-semibold text-amber-700">{Number(row.total_pending).toLocaleString()}</span>
        ),
      },
      {
        key: 'delivery_percent',
        label: 'Progress',
        render: (row) => <ProgressBar percent={row.delivery_percent} criticality={row.criticality} />,
      },
      {
        key: 'criticality',
        label: 'Status',
        render: (row) => <CriticalityBadge status={row.criticality} label={row.criticality_label} />,
      },
    ],
    []
  );

  const columns = groupBy === 'region' ? regionColumns : groupBy === 'commodity' ? commodityColumns : groupBy === 'master' ? masterColumns : schoolColumns;

  return (
    <LayoutShell role="SUPER_ADMIN">
      <div className="flex flex-col gap-6">
        {/* Header */}
        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
          <div>
            <h1 className="text-2xl font-bold text-slate-900">Supply Plan Reports</h1>
            <p className="text-sm text-slate-500">
              Schools, regions, allocations, deliveries, and criticality intelligence.
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-3">
            {/* Plan Period */}
            <div className="flex flex-col gap-1">
              <label className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">Period</label>
              <select
                title="Plan period"
                value={activePeriodId}
                onChange={(e) => {
                  setSelectedPeriod(e.target.value);
                  setPage(1);
                }}
                className="rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-brand focus:outline-none"
              >
                {planPeriods.length === 0 && <option value="">No periods</option>}
                {planPeriods.map((p: any) => (
                  <option key={p.id} value={p.id}>
                    {p.label}
                  </option>
                ))}
              </select>
            </div>

            {/* Group By */}
            <div className="flex flex-col gap-1">
              <label className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">Group By</label>
              <select
                title="Group by"
                value={groupBy}
                onChange={(e) => {
                  setGroupBy(e.target.value as 'school' | 'region' | 'commodity' | 'master');
                  setPage(1);
                  setDrilldownTarget(null);
                }}
                className="rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-brand focus:outline-none"
              >
                <option value="school">School</option>
                <option value="region">Region</option>
                <option value="commodity">Commodity</option>
                <option value="master">Full Master</option>
              </select>
            </div>

            {/* Region Filter */}
            <div className="flex flex-col gap-1">
              <label className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">Region</label>
              <select
                title="Filter by region"
                value={regionFilter}
                onChange={(e) => {
                  setRegionFilter(e.target.value);
                  setPage(1);
                }}
                className="rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-brand focus:outline-none"
              >
                <option value="">All Regions</option>
                {regions.map((r) => (
                  <option key={r} value={r}>
                    {r}
                  </option>
                ))}
              </select>
            </div>

            {/* Export Dropdown */}
            <div className="relative flex flex-col gap-1" ref={exportRef}>
              <label className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">Export</label>
              <button
                onClick={() => setExportMenuOpen(!exportMenuOpen)}
                className="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50"
              >
                <Download className="h-4 w-4" />
                Download
              </button>
              {exportMenuOpen && (
                <div className="absolute right-0 top-full z-50 mt-1 w-48 rounded-xl border border-slate-200 bg-white py-1 shadow-lg">
                  <button
                    onClick={() => handleExport('csv')}
                    className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50"
                  >
                    <FileSpreadsheet className="h-4 w-4 text-emerald-600" />
                    CSV (.csv)
                  </button>
                  <button
                    onClick={() => handleExport('json')}
                    className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50"
                  >
                    <FileJson className="h-4 w-4 text-blue-600" />
                    JSON (.json)
                  </button>
                  <button
                    onClick={() => handleExport('xml')}
                    className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50"
                  >
                    <FileCode2 className="h-4 w-4 text-orange-600" />
                    XML (.xml)
                  </button>
                  <button
                    onClick={() => handleExport('pdf')}
                    className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50"
                  >
                    <FileText className="h-4 w-4 text-rose-600" />
                    PDF (Print)
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Summary Cards */}
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
          <div className="rounded-2xl border border-slate-100 bg-white p-5 shadow-sm">
            <div className="flex items-center gap-2">
              <Building2 className="h-4 w-4 text-slate-400" />
              <p className="text-xs uppercase text-slate-500">Schools</p>
            </div>
            <p className="mt-2 text-2xl font-bold text-slate-900">{agg.total_schools.toLocaleString()}</p>
          </div>
          <div className="rounded-2xl border border-slate-100 bg-white p-5 shadow-sm">
            <div className="flex items-center gap-2">
              <MapPin className="h-4 w-4 text-slate-400" />
              <p className="text-xs uppercase text-slate-500">Regions</p>
            </div>
            <p className="mt-2 text-2xl font-bold text-slate-900">{agg.total_regions}</p>
          </div>
          <div className="rounded-2xl border border-slate-100 bg-white p-5 shadow-sm">
            <div className="flex items-center gap-2">
              <Package className="h-4 w-4 text-slate-400" />
              <p className="text-xs uppercase text-slate-500">Allocated</p>
            </div>
            <p className="mt-2 text-2xl font-bold text-slate-900">{agg.grand_allocated.toLocaleString()}</p>
          </div>
          <div className="rounded-2xl border border-emerald-100 bg-emerald-50/50 p-5 shadow-sm">
            <div className="flex items-center gap-2">
              <CheckCircle2 className="h-4 w-4 text-emerald-500" />
              <p className="text-xs uppercase text-emerald-700">Delivered</p>
            </div>
            <p className="mt-2 text-2xl font-bold text-emerald-700">{agg.grand_delivered.toLocaleString()}</p>
          </div>
          <div className="rounded-2xl border border-amber-100 bg-amber-50/50 p-5 shadow-sm">
            <div className="flex items-center gap-2">
              <AlertTriangle className="h-4 w-4 text-amber-500" />
              <p className="text-xs uppercase text-amber-700">Pending</p>
            </div>
            <p className="mt-2 text-2xl font-bold text-amber-700">{agg.grand_pending.toLocaleString()}</p>
          </div>
          <div className="rounded-2xl border border-brand/20 bg-brand/5 p-5 shadow-sm">
            <div className="flex items-center gap-2">
              <BarChart3 className="h-4 w-4 text-brand" />
              <p className="text-xs uppercase text-brand">Delivery Rate</p>
            </div>
            <p className="mt-2 text-2xl font-bold text-brand">{agg.delivery_rate}%</p>
          </div>
        </div>

        {/* Criticality Distribution */}
        {critDist && groupBy === 'school' && (
          <div className="rounded-2xl border border-slate-100 bg-white p-5 shadow-sm">
            <h2 className="mb-4 text-sm font-semibold uppercase tracking-wide text-slate-600">
              Stock Criticality Intelligence
            </h2>
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
              <CriticalityCard
                label="Fully Delivered"
                count={critDist.fully_delivered}
                status="fully_delivered"
                description="80%+ delivered"
              />
              <CriticalityCard
                label="On Track"
                count={critDist.on_track}
                status="on_track"
                description="50–80% delivered"
              />
              <CriticalityCard
                label="Low Stock"
                count={critDist.low_stock}
                status="low_stock"
                description="20–50% delivered"
              />
              <CriticalityCard
                label="Critical Stock"
                count={critDist.critical}
                status="critical"
                description="<20% delivered"
              />
              <CriticalityCard
                label="No Deliveries"
                count={critDist.no_deliveries}
                status="no_deliveries"
                description="0% delivered"
              />
            </div>
          </div>
        )}

        {/* Data Table */}
        <div className="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm">
          {groupBy !== 'master' && (
            <p className="mb-3 text-xs text-slate-400">Click a row to drill down into commodity / school details</p>
          )}
          <DataTable
            columns={columns}
            data={rows}
            serverSide
            pageCount={reportData?.pagination?.last_page ?? 1}
            currentPage={page}
            onPageChange={setPage}
            isLoading={isFetching}
            searchable
            onSearch={useCallback(
              (query: string) => {
                setSearch(query);
                setPage(1);
              },
              []
            )}
            onRowClick={groupBy !== 'master' ? handleRowClick : undefined}
          />
        </div>

        {/* Drill-down Panel */}
        {drilldownTarget && (
          <div className="rounded-2xl border border-indigo-100 bg-indigo-50/30 p-6 shadow-sm">
            <div className="mb-4 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <ChevronDown className="h-5 w-5 text-indigo-600" />
                <h3 className="text-sm font-bold text-indigo-900">
                  Drill-down: <span className="text-indigo-600">{drilldownTarget.label}</span>
                </h3>
                <span className="ml-2 rounded-full bg-indigo-100 px-2 py-0.5 text-[11px] font-semibold text-indigo-700">
                  {drilldownRows.length} {drilldownTarget.type === 'school' ? 'commodities' : 'records'}
                </span>
              </div>
              <button
                onClick={() => setDrilldownTarget(null)}
                className="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-200 hover:text-slate-600"
                title="Close drill-down"
              >
                <X className="h-4 w-4" />
              </button>
            </div>
            {drilldownLoading ? (
              <div className="flex items-center justify-center py-8">
                <div className="h-6 w-6 animate-spin rounded-full border-2 border-indigo-300 border-t-indigo-600" />
                <span className="ml-2 text-sm text-slate-500">Loading details...</span>
              </div>
            ) : drilldownRows.length === 0 ? (
              <p className="py-6 text-center text-sm text-slate-400">No detail records found.</p>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b border-indigo-200/60">
                      {drilldownTarget.type === 'school' ? (
                        <>
                          <th className="px-3 py-2.5 text-left text-xs font-semibold uppercase text-indigo-800">Commodity</th>
                          <th className="px-3 py-2.5 text-left text-xs font-semibold uppercase text-indigo-800">Unit</th>
                        </>
                      ) : drilldownTarget.type === 'region' ? (
                        <>
                          <th className="px-3 py-2.5 text-left text-xs font-semibold uppercase text-indigo-800">School</th>
                          <th className="px-3 py-2.5 text-left text-xs font-semibold uppercase text-indigo-800">District</th>
                          <th className="px-3 py-2.5 text-left text-xs font-semibold uppercase text-indigo-800">Commodity</th>
                          <th className="px-3 py-2.5 text-left text-xs font-semibold uppercase text-indigo-800">Unit</th>
                        </>
                      ) : (
                        <>
                          <th className="px-3 py-2.5 text-left text-xs font-semibold uppercase text-indigo-800">School</th>
                          <th className="px-3 py-2.5 text-left text-xs font-semibold uppercase text-indigo-800">Region</th>
                          <th className="px-3 py-2.5 text-left text-xs font-semibold uppercase text-indigo-800">District</th>
                        </>
                      )}
                      <th className="px-3 py-2.5 text-right text-xs font-semibold uppercase text-indigo-800">Allocated</th>
                      <th className="px-3 py-2.5 text-right text-xs font-semibold uppercase text-indigo-800">Delivered</th>
                      <th className="px-3 py-2.5 text-right text-xs font-semibold uppercase text-indigo-800">Pending</th>
                      <th className="px-3 py-2.5 text-center text-xs font-semibold uppercase text-indigo-800">Progress</th>
                      <th className="px-3 py-2.5 text-center text-xs font-semibold uppercase text-indigo-800">Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {drilldownRows.map((dr, idx) => (
                      <tr key={idx} className="border-b border-indigo-100/50 transition hover:bg-indigo-50/50">
                        {drilldownTarget.type === 'school' ? (
                          <>
                            <td className="px-3 py-2.5">
                              <p className="font-semibold text-slate-900">{dr.commodity_name}</p>
                              <p className="text-[11px] text-slate-400">{dr.commodity_code}</p>
                            </td>
                            <td className="px-3 py-2.5 text-slate-600">{dr.unit || '—'}</td>
                          </>
                        ) : drilldownTarget.type === 'region' ? (
                          <>
                            <td className="px-3 py-2.5">
                              <p className="font-semibold text-slate-900">{dr.school_name}</p>
                              <p className="text-[11px] text-slate-400">{dr.school_code}</p>
                            </td>
                            <td className="px-3 py-2.5 text-slate-600">{dr.district || '—'}</td>
                            <td className="px-3 py-2.5">
                              <p className="font-semibold text-slate-900">{dr.commodity_name}</p>
                              <p className="text-[11px] text-slate-400">{dr.commodity_code}</p>
                            </td>
                            <td className="px-3 py-2.5 text-slate-600">{dr.unit || '—'}</td>
                          </>
                        ) : (
                          <>
                            <td className="px-3 py-2.5">
                              <p className="font-semibold text-slate-900">{dr.school_name}</p>
                              <p className="text-[11px] text-slate-400">{dr.school_code}</p>
                            </td>
                            <td className="px-3 py-2.5 text-slate-600">{dr.region || '—'}</td>
                            <td className="px-3 py-2.5 text-slate-600">{dr.district || '—'}</td>
                          </>
                        )}
                        <td className="px-3 py-2.5 text-right font-semibold">{Number(dr.total_allocated).toLocaleString()}</td>
                        <td className="px-3 py-2.5 text-right font-semibold text-emerald-700">{Number(dr.total_delivered).toLocaleString()}</td>
                        <td className="px-3 py-2.5 text-right font-semibold text-amber-700">{Number(dr.total_pending).toLocaleString()}</td>
                        <td className="px-3 py-2.5 text-center">
                          <ProgressBar percent={dr.delivery_percent} criticality={dr.criticality} />
                        </td>
                        <td className="px-3 py-2.5 text-center">
                          <CriticalityBadge status={dr.criticality} label={dr.criticality_label} />
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        )}
      </div>
    </LayoutShell>
  );
}

function CriticalityCard({
  label,
  count,
  status,
  description,
}: {
  label: string;
  count: number;
  status: string;
  description: string;
}) {
  const config = CRITICALITY_CONFIG[status] || CRITICALITY_CONFIG.no_deliveries;
  const Icon = config.icon;
  return (
    <div className={`rounded-xl border p-4 ${config.bg} ${config.border}`}>
      <div className="flex items-center gap-2">
        <Icon className={`h-4 w-4 ${config.color}`} />
        <span className={`text-xs font-bold uppercase tracking-wide ${config.color}`}>{label}</span>
      </div>
      <p className={`mt-2 text-3xl font-bold ${config.color}`}>{count}</p>
      <p className="mt-1 text-[11px] text-slate-500">{description}</p>
    </div>
  );
}