'use client';

import { useCallback, useState } from 'react';
import { LayoutShell } from '../../../../components/layout-shell';
import { useQuery, useMutation, useQueryClient } 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, CheckCircle, CheckCheck, XCircle, AlertTriangle, Eye, FileText, Loader2, Upload, Pencil, Trash2, Search, X, TriangleAlert } from 'lucide-react';
import { Modal } from '../../../../components/ui/modal';
import { ExportDropdown } from '../../../../components/ui/export-dropdown';
import { generateDeliveriesTableHTML, generateIndividualDeliveryHTML, DeliveryRecord } from '../../../../lib/pdf-utils';
import { Button } from '../../../../components/ui/button';

// ─── Reusable filter input style ─────────────────────────────────────────────
const inputCls = 'rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-brand/40 w-full';
const selectCls = inputCls;

export default function DeliveriesPage() {
  const [page, setPage] = useState(1);
  const [selectedDelivery, setSelectedDelivery] = useState<any>(null);
  const [editingDelivery, setEditingDelivery] = useState<any>(null);
  const [editForm, setEditForm] = useState<{actual_quantity: string; delivery_date: string; notes: string; supplier_id: string}>({ actual_quantity: '', delivery_date: '', notes: '', supplier_id: '' });
  const [isExporting, setIsExporting] = useState(false);
  const [tableKey, setTableKey] = useState(0);
  const [importFile, setImportFile] = useState<File | null>(null);
  const [overwriteAll, setOverwriteAll] = useState(false);
  const [overPage, setOverPage] = useState(1);

  // ── Filters ──────────────────────────────────────────────────────────────────
  const [filterQ, setFilterQ] = useState('');
  const [filterSupplierId, setFilterSupplierId] = useState('');
  const [filterSchoolId, setFilterSchoolId] = useState('');
  const [filterCommodityId, setFilterCommodityId] = useState('');
  const [filterStatus, setFilterStatus] = useState('');
  const [filterFlagged, setFilterFlagged] = useState('');
  const [filterDateFrom, setFilterDateFrom] = useState('');
  const [filterDateTo, setFilterDateTo] = useState('');
  const [overFilterQ, setOverFilterQ] = useState('');
  const [overFilterSupplierId, setOverFilterSupplierId] = useState('');

  const clearFilters = useCallback(() => {
    setFilterQ(''); setFilterSupplierId(''); setFilterSchoolId('');
    setFilterCommodityId(''); setFilterStatus(''); setFilterFlagged('');
    setFilterDateFrom(''); setFilterDateTo('');
    setPage(1);
  }, []);

  const queryClient = useQueryClient();

  // Status Mutation
  const updateStatus = useMutation({
    mutationFn: async ({ id, status }: { id: number; status: string }) => {
      await api.patch(`/deliveries/${id}/status`, { status });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['deliveries'] });
    },
    onError: (err) => {
      alert('Failed to update status: ' + err);
    }
  });

  // Bulk Status Mutation
  const bulkUpdateStatus = useMutation({
    mutationFn: async ({ ids, status }: { ids: number[]; status: string }) => {
      await Promise.all(ids.map(id => api.patch(`/deliveries/${id}/status`, { status })));
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['deliveries'] });
      setTableKey(prev => prev + 1);
      alert('Bulk action completed successfully.');
    },
    onError: (err) => {
      alert('Failed to update status: ' + err);
    }
  });

  // Approve ALL Pending Deliveries Mutation
  const approveAll = useMutation({
    mutationFn: async () => {
      const res = await api.post('/deliveries/approve-all');
      return res.data;
    },
    onSuccess: (data: any) => {
      queryClient.invalidateQueries({ queryKey: ['deliveries'] });
      setTableKey(prev => prev + 1);
      alert(`Done! ${data?.approved_count ?? 0} deliveries approved.`);
    },
    onError: (err) => {
      alert('Failed to approve all: ' + err);
    }
  });

  // ── Main filtered deliveries query ──────────────────────────────────────────
  const { data, isFetching } = useQuery({
    queryKey: ['deliveries', page, filterQ, filterSupplierId, filterSchoolId, filterCommodityId, filterStatus, filterFlagged, filterDateFrom, filterDateTo],
    queryFn: async () => {
      const response = await api.get('/deliveries', {
        params: {
          page, per_page: 20,
          ...(filterQ && { q: filterQ }),
          ...(filterSupplierId && { supplier_id: filterSupplierId }),
          ...(filterSchoolId && { school_id: filterSchoolId }),
          ...(filterCommodityId && { commodity_id: filterCommodityId }),
          ...(filterStatus && { review_status: filterStatus }),
          ...(filterFlagged !== '' && { is_flagged: filterFlagged }),
          ...(filterDateFrom && { date_from: filterDateFrom }),
          ...(filterDateTo && { date_to: filterDateTo }),
        },
      });
      return response.data;
    },
  });

  // ── Over-delivered query ─────────────────────────────────────────────────────
  const { data: overData, isFetching: overFetching } = useQuery({
    queryKey: ['deliveries-over', overPage, overFilterQ, overFilterSupplierId],
    queryFn: async () => {
      const response = await api.get('/deliveries/over-delivered', {
        params: {
          page: overPage, per_page: 50,
          ...(overFilterQ && { q: overFilterQ }),
          ...(overFilterSupplierId && { supplier_id: overFilterSupplierId }),
        },
      });
      return response.data;
    },
  });

  // ── Supplier / school / commodity lists for filter dropdowns ─────────────────
  const { data: suppliersList } = useQuery({
    queryKey: ['suppliers-list'],
    queryFn: async () => (await api.get('/suppliers', { params: { per_page: 500 } })).data,
    staleTime: 5 * 60 * 1000,
  });
  const { data: schoolsList } = useQuery({
    queryKey: ['schools-list'],
    queryFn: async () => (await api.get('/schools', { params: { per_page: 2000 } })).data,
    staleTime: 5 * 60 * 1000,
  });
  const { data: commoditiesList } = useQuery({
    queryKey: ['commodities-list'],
    queryFn: async () => (await api.get('/commodities', { params: { per_page: 200 } })).data,
    staleTime: 5 * 60 * 1000,
  });

  const importMutation = useMutation({
    mutationFn: async () => {
      if (!importFile) {
        throw new Error('Please select a CSV file');
      }
      const formData = new FormData();
      formData.append('file', importFile);
      formData.append('overwrite', overwriteAll ? '1' : '0');
      const response = await api.post('/deliveries/import', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
        timeout: 120000,
      });
      return response.data;
    },
    onSuccess: (payload: any) => {
      setImportFile(null);
      queryClient.invalidateQueries({ queryKey: ['deliveries'] });
      alert(`Import completed. Imported ${payload?.imported ?? 0}, errors ${payload?.errors ?? 0}.`);
    },
    onError: (error: any) => {
      alert(error?.response?.data?.error || error?.message || 'Import failed');
    }
  });

  // ── Edit mutation ─────────────────────────────────────────────────────────────
  const editMutation = useMutation({
    mutationFn: async ({ id, fields }: { id: number; fields: object }) => {
      const res = await api.put(`/deliveries/${id}`, fields);
      return res.data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['deliveries'] });
      queryClient.invalidateQueries({ queryKey: ['deliveries-over'] });
      setEditingDelivery(null);
    },
    onError: (err: any) => {
      alert('Failed to edit delivery: ' + (err?.response?.data?.error ?? err?.message ?? err));
    },
  });

  // ── Delete mutation ───────────────────────────────────────────────────────────
  const deleteMutation = useMutation({
    mutationFn: async (id: number) => {
      await api.delete(`/deliveries/${id}`);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['deliveries'] });
      queryClient.invalidateQueries({ queryKey: ['deliveries-over'] });
      setTableKey(prev => prev + 1);
    },
    onError: (err: any) => {
      alert('Failed to delete: ' + (err?.response?.data?.error ?? err?.message ?? err));
    },
  });

  const openEdit = (row: any) => {
    setEditingDelivery(row);
    setEditForm({
      actual_quantity: String(row.actual_quantity ?? ''),
      delivery_date: row.delivery_date ?? '',
      notes: row.notes ?? '',
      supplier_id: String(row.supplier_id ?? ''),
    });
  };

  const handleAction = (id: number, status: 'APPROVED' | 'REJECTED') => {
    if (confirm(`Are you sure you want to ${status} this delivery?`)) {
        updateStatus.mutate({ id, status });
    }
  };

  const handleDelete = (id: number) => {
    if (confirm('Permanently delete this delivery? This cannot be undone.')) {
      deleteMutation.mutate(id);
    }
  };

  const handleBulkAction = (rows: any[], status: 'APPROVED' | 'REJECTED') => {
    if (confirm(`Are you sure you want to ${status} ${rows.length} deliveries?`)) {
      const ids = rows.map(r => r.id);
      bulkUpdateStatus.mutate({ ids, status });
    }
  };

  const handleExport = () => {
    // Trigger download by opening the URL in a new window/tab or using a hidden link
    const token = localStorage.getItem('gcx_fshs_token');
    const url = `${process.env.NEXT_PUBLIC_API_BASE ?? 'http://localhost:8000/api/v1'}/deliveries/export?token=${token}`;

    // Since we're using Bearer auth, we can't just open the URL if the backend expects a header.
    // But I implemented the backend to check the header.
    // Actually, for file downloads, it's easier if we use axios to get the blob.

    api.get('/deliveries/export', { responseType: 'blob' })
      .then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', `deliveries_export_${new Date().toISOString().split('T')[0]}.csv`);
        document.body.appendChild(link);
        link.click();
        link.remove();
      })
      .catch((error) => {
        console.error('Export failed', error);
      });
  };

  // Export all deliveries as PDF
  const handleExportPDF = async () => {
    setIsExporting(true);
    try {
      // Fetch all deliveries for PDF export
      const response = await api.get('/deliveries', { params: { page: 1, per_page: 10000 } });
      const allDeliveries: DeliveryRecord[] = response.data?.data ?? [];
      
      const html = generateDeliveriesTableHTML(allDeliveries, {
        title: 'Deliveries Report',
        subtitle: 'Complete listing of all recorded deliveries',
        includeTimestamp: true,
        orientation: 'landscape'
      });
      
      // Create a new window and print
      const printWindow = window.open('', '_blank');
      if (printWindow) {
        printWindow.document.write(html);
        printWindow.document.close();
        printWindow.focus();
        
        // Wait for content to load then trigger print
        setTimeout(() => {
          printWindow.print();
        }, 500);
      }
    } catch (error) {
      console.error('PDF export failed', error);
      alert('Failed to generate PDF. Please try again.');
    } finally {
      setIsExporting(false);
    }
  };

  // Export individual delivery as PDF
  const handleExportIndividualPDF = (delivery: DeliveryRecord) => {
    const html = generateIndividualDeliveryHTML(delivery, {
      title: 'Delivery Receipt',
      includeTimestamp: true
    });
    
    const printWindow = window.open('', '_blank');
    if (printWindow) {
      printWindow.document.write(html);
      printWindow.document.close();
      printWindow.focus();
      
      setTimeout(() => {
        printWindow.print();
      }, 500);
    }
  };

  const columns: Column<any>[] = [
    { key: 'delivery_date', label: 'Date', sortable: true },
    { key: 'school_name', label: 'School', sortable: true },
    { key: 'commodity_name', label: 'Commodity', sortable: true },
    { key: 'user_name', label: 'User', sortable: true },
    {
      key: 'review_status',
      label: 'Status',
      render: (row) => {
        const status = String(row.review_status || 'OK').toUpperCase();
        const isPending = status === 'PENDING_REVIEW' || Boolean(row.is_flagged);
        return (
          <span
            className={
              'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ' +
              (isPending ? 'bg-amber-50 text-amber-700' : 'bg-emerald-50 text-emerald-700')
            }
          >
            {isPending ? 'Pending review' : 'OK'}
          </span>
        );
      },
    },
    {
      key: 'actual_quantity',
      label: 'Quantity',
      className: 'text-right',
      render: (row) => <div className="text-right font-semibold text-brand">{smartRound(row.actual_quantity)}</div>
    },
    {
      key: 'actions',
      label: 'Actions',
      className: 'text-right',
      render: (row) => {
        const isPending = row.review_status === 'PENDING_REVIEW' || row.is_flagged;

        return (
          <div className="flex justify-end gap-2">
            <button
              onClick={() => setSelectedDelivery(row)}
              className="rounded-full bg-slate-100 p-1.5 text-slate-600 hover:bg-slate-200 transition-colors"
              title="View Details"
            >
              <Eye className="h-4 w-4" />
            </button>
            {isPending && (
              <>
                <button
                  onClick={() => handleAction(row.id, 'APPROVED')}
                  disabled={updateStatus.isPending}
                  className="rounded-full bg-emerald-100 p-1.5 text-emerald-700 hover:bg-emerald-200 transition-colors"
                  title="Approve"
                >
                  <CheckCircle className="h-4 w-4" />
                </button>
                <button
                  onClick={() => handleAction(row.id, 'REJECTED')}
                  disabled={updateStatus.isPending}
                  className="rounded-full bg-red-100 p-1.5 text-red-700 hover:bg-red-200 transition-colors"
                  title="Reject"
                >
                  <XCircle className="h-4 w-4" />
                </button>
              </>
            )}
            <button
              onClick={() => openEdit(row)}
              className="rounded-full bg-blue-50 p-1.5 text-blue-600 hover:bg-blue-100 transition-colors"
              title="Edit"
            >
              <Pencil className="h-4 w-4" />
            </button>
            <button
              onClick={() => handleDelete(row.id)}
              disabled={deleteMutation.isPending}
              className="rounded-full bg-red-50 p-1.5 text-red-500 hover:bg-red-100 transition-colors"
              title="Delete"
            >
              <Trash2 className="h-4 w-4" />
            </button>
          </div>
        );
      }
    }
  ];

  const bulkActions = [
    {
      label: 'Approve Selected',
      icon: CheckCircle,
      variant: 'secondary' as const,
      onClick: (rows: any[]) => handleBulkAction(rows, 'APPROVED')
    },
    {
      label: 'Reject Selected',
      icon: XCircle,
      variant: 'danger' as const,
      onClick: (rows: any[]) => handleBulkAction(rows, 'REJECTED')
    }
  ];

  // ── Over-delivered columns ───────────────────────────────────────────────────
  const overColumns: Column<any>[] = [
    { key: 'delivery_date', label: 'Date', sortable: true },
    { key: 'school_name', label: 'School', sortable: true },
    { key: 'commodity_name', label: 'Commodity', sortable: true },
    { key: 'supplier_name', label: 'Supplier', sortable: true },
    { key: 'user_name', label: 'Submitted By', sortable: true },
    {
      key: 'actual_quantity',
      label: 'Qty Delivered',
      className: 'text-right',
      render: (row) => <span className="font-bold text-red-600">{smartRound(row.actual_quantity)}</span>,
    },
    {
      key: 'planned_quantity',
      label: 'Planned',
      className: 'text-right',
      render: (row) => <span className="text-slate-600">{smartRound(row.planned_quantity)}</span>,
    },
    {
      key: 'total_delivered',
      label: 'Total Delivered (combo)',
      className: 'text-right',
      render: (row) => <span className="font-semibold text-orange-600">{smartRound(row.total_delivered)}</span>,
    },
    {
      key: 'over_delivery_pct',
      label: '% of Plan',
      className: 'text-right',
      render: (row) => (
        <span className="inline-flex items-center gap-1 font-bold text-red-700">
          <TriangleAlert className="h-3.5 w-3.5" />
          {row.over_delivery_pct}%
        </span>
      ),
    },
    { key: 'school_region', label: 'Region' },
    { key: 'notes', label: 'Notes', render: (row) => <span className="text-xs text-slate-500">{row.notes || '-'}</span> },
    {
      key: 'review_status',
      label: 'Status',
      render: (row) => {
        const s = String(row.review_status || 'OK').toUpperCase();
        const isPend = s === 'PENDING_REVIEW' || Boolean(row.is_flagged);
        return (
          <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${ isPend ? 'bg-amber-50 text-amber-700' : 'bg-emerald-50 text-emerald-700'}`}>
            {isPend ? 'Pending' : s === 'APPROVED' ? 'Approved' : 'OK'}
          </span>
        );
      },
    },
    {
      key: 'over_actions',
      label: 'Actions',
      className: 'text-right',
      render: (row) => (
        <div className="flex justify-end gap-2">
          <button onClick={() => openEdit(row)} className="rounded-full bg-blue-50 p-1.5 text-blue-600 hover:bg-blue-100" title="Edit">
            <Pencil className="h-4 w-4" />
          </button>
          <button onClick={() => handleDelete(row.id)} className="rounded-full bg-red-50 p-1.5 text-red-500 hover:bg-red-100" title="Delete">
            <Trash2 className="h-4 w-4" />
          </button>
        </div>
      ),
    },
  ];

  return (
    <LayoutShell role="SUPER_ADMIN">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">Deliveries</h1>
          <p className="text-sm text-slate-500">Real-time feed from field staff.</p>
        </div>
        <div className="flex items-center gap-3">
          <Button
            onClick={() => {
              if (confirm('Are you sure you want to APPROVE ALL pending deliveries? This will approve every single one.')) {
                approveAll.mutate();
              }
            }}
            disabled={approveAll.isPending}
            className="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white"
          >
            {approveAll.isPending ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <CheckCheck className="h-4 w-4" />
            )}
            {approveAll.isPending ? 'Approving...' : 'Approve All Pending'}
          </Button>
          <ExportDropdown
            onExportCSV={handleExport}
            onExportPDF={handleExportPDF}
            isExporting={isExporting}
          />
        </div>
      </div>

      <div className="mb-6 rounded-2xl border border-slate-100 bg-white p-6 shadow-sm">
        <div className="flex flex-wrap items-center justify-between gap-4">
          <div>
            <h2 className="text-lg font-semibold text-slate-900">Import Deliveries (CSV)</h2>
            <p className="text-sm text-slate-500">Use the export file to restore or overwrite deliveries.</p>
          </div>
          <div className="flex flex-wrap items-center gap-3">
            <label className="flex items-center gap-2 text-sm text-slate-600">
              <input
                type="checkbox"
                checked={overwriteAll}
                onChange={(e) => setOverwriteAll(e.target.checked)}
                className="h-4 w-4 accent-brand"
              />
              Overwrite all deliveries
            </label>
            <input
              type="file"
              accept=".csv"
              onChange={(event) => setImportFile(event.target.files?.[0] ?? null)}
              className="text-sm"
            />
            <Button
              onClick={() => importMutation.mutate()}
              disabled={!importFile || importMutation.isPending}
              className="flex items-center gap-2"
            >
              <Upload className={`h-4 w-4 ${importMutation.isPending ? 'animate-spin' : ''}`} />
              {importMutation.isPending ? 'Importing...' : 'Import CSV'}
            </Button>
          </div>
        </div>
      </div>

      {/* ── Filter Bar ──────────────────────────────────────────────────────── */}
      <div className="rounded-2xl border border-slate-100 bg-white p-5 shadow-sm mb-4">
        <div className="flex items-center gap-2 mb-3">
          <Search className="h-4 w-4 text-slate-400" />
          <span className="text-sm font-semibold text-slate-700">Filter Deliveries</span>
          <button onClick={clearFilters} className="ml-auto flex items-center gap-1 text-xs text-slate-500 hover:text-slate-800">
            <X className="h-3.5 w-3.5" /> Clear all
          </button>
        </div>
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
          <input
            className={inputCls}
            placeholder="Search school, commodity, supplier..."
            value={filterQ}
            onChange={e => { setFilterQ(e.target.value); setPage(1); }}
          />
          <select title="Filter by supplier" className={selectCls} value={filterSupplierId} onChange={e => { setFilterSupplierId(e.target.value); setPage(1); }}>
            <option value="">All Suppliers</option>
            {(suppliersList?.data ?? suppliersList ?? []).map((s: any) => (
              <option key={s.id} value={s.id}>{s.name}</option>
            ))}
          </select>
          <select title="Filter by school" className={selectCls} value={filterSchoolId} onChange={e => { setFilterSchoolId(e.target.value); setPage(1); }}>
            <option value="">All Schools</option>
            {(schoolsList?.data ?? schoolsList ?? []).map((s: any) => (
              <option key={s.id} value={s.id}>{s.name}</option>
            ))}
          </select>
          <select title="Filter by commodity" className={selectCls} value={filterCommodityId} onChange={e => { setFilterCommodityId(e.target.value); setPage(1); }}>
            <option value="">All Commodities</option>
            {(commoditiesList?.data ?? commoditiesList ?? []).map((c: any) => (
              <option key={c.id} value={c.id}>{c.name}</option>
            ))}
          </select>
          <select title="Filter by review status" className={selectCls} value={filterStatus} onChange={e => { setFilterStatus(e.target.value); setPage(1); }}>
            <option value="">All Statuses</option>
            <option value="PENDING_REVIEW">Pending Review</option>
            <option value="APPROVED">Approved</option>
            <option value="REJECTED">Rejected</option>
          </select>
          <select title="Filter by flagged" className={selectCls} value={filterFlagged} onChange={e => { setFilterFlagged(e.target.value); setPage(1); }}>
            <option value="">Flagged: Any</option>
            <option value="1">Flagged Only</option>
            <option value="0">Not Flagged</option>
          </select>
          <div className="flex items-center gap-1">
            <input type="date" className={inputCls} value={filterDateFrom} onChange={e => { setFilterDateFrom(e.target.value); setPage(1); }} title="Date from" />
          </div>
          <div className="flex items-center gap-1">
            <input type="date" className={inputCls} value={filterDateTo} onChange={e => { setFilterDateTo(e.target.value); setPage(1); }} title="Date to" />
          </div>
        </div>
      </div>

      {/* ── Main Deliveries Table ─────────────────────────────────────────────── */}
      <div className="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm">
        <DataTable
          key={tableKey}
          columns={columns}
          data={data?.data ?? []}
          serverSide
          pageCount={data?.meta?.last_page ?? 1}
          currentPage={page}
          onPageChange={setPage}
          isLoading={isFetching}
          emptyMessage="No deliveries recorded yet."
          selectable={true}
          bulkActions={bulkActions}
        />
      </div>

      {/* ── Over-Delivered Entries Table ─────────────────────────────────────── */}
      <div className="mt-8 rounded-2xl border border-red-100 bg-white shadow-sm overflow-hidden">
        <div className="flex items-center justify-between px-6 py-4 border-b border-red-100 bg-red-50/60">
          <div className="flex items-center gap-2">
            <TriangleAlert className="h-5 w-5 text-red-500" />
            <div>
              <h2 className="text-base font-bold text-red-800">Over-Delivered Entries</h2>
              <p className="text-xs text-red-600">Combos where total delivered ≥ 2× planned quantity. Every individual entry in those combos is shown.</p>
            </div>
          </div>
          <span className="rounded-full bg-red-100 px-3 py-1 text-xs font-bold text-red-700">
            {overData?.meta?.total ?? 0} rows
          </span>
        </div>
        {/* Over-delivered filters */}
        <div className="px-6 py-3 border-b border-slate-100 bg-white flex flex-wrap gap-3">
          <input
            className={`${inputCls} max-w-xs`}
            placeholder="Search school / commodity / supplier..."
            value={overFilterQ}
            onChange={e => { setOverFilterQ(e.target.value); setOverPage(1); }}
          />
          <select title="Filter by supplier" className={`${selectCls} max-w-xs`} value={overFilterSupplierId} onChange={e => { setOverFilterSupplierId(e.target.value); setOverPage(1); }}>
            <option value="">All Suppliers</option>
            {(suppliersList?.data ?? suppliersList ?? []).map((s: any) => (
              <option key={s.id} value={s.id}>{s.name}</option>
            ))}
          </select>
          {(overFilterQ || overFilterSupplierId) && (
            <button onClick={() => { setOverFilterQ(''); setOverFilterSupplierId(''); setOverPage(1); }} className="flex items-center gap-1 text-xs text-slate-500 hover:text-slate-800">
              <X className="h-3.5 w-3.5" /> Clear
            </button>
          )}
        </div>
        <div className="p-4">
          <DataTable
            columns={overColumns}
            data={overData?.data ?? []}
            serverSide
            pageCount={overData?.meta?.last_page ?? 1}
            currentPage={overPage}
            onPageChange={setOverPage}
            isLoading={overFetching}
            emptyMessage="No over-delivered entries found."
          />
        </div>
      </div>

      <Modal
        isOpen={!!selectedDelivery}
        onClose={() => setSelectedDelivery(null)}
        title="Delivery Details"
        size="lg"
      >
        {selectedDelivery && (
          <div className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="text-sm font-semibold uppercase tracking-wider text-slate-500 border-b pb-2 mb-3">Delivery Information</h3>
                <dl className="space-y-3 text-sm text-slate-900">
                  <div className="flex flex-col">
                    <span className="text-xs text-slate-500">Date</span>
                    <span className="font-medium">{selectedDelivery.delivery_date}</span>
                  </div>
                  <div className="flex flex-col">
                    <span className="text-xs text-slate-500">Recorded At</span>
                    <span className="font-medium">{new Date(selectedDelivery.recorded_at).toLocaleString()}</span>
                  </div>
                  <div className="flex flex-col">
                    <span className="text-xs text-slate-500">School</span>
                    <span className="font-medium">{selectedDelivery.school_name}</span>
                  </div>
                  <div className="flex flex-col">
                    <span className="text-xs text-slate-500">Commodity</span>
                    <span className="font-medium">{selectedDelivery.commodity_name}</span>
                  </div>
                  <div className="flex flex-col">
                    <span className="text-xs text-slate-500">Quantity</span>
                    <span className="font-medium text-brand text-lg">{smartRound(selectedDelivery.actual_quantity)}</span>
                  </div>
                  <div className="flex flex-col">
                    <span className="text-xs text-slate-500">Submitted By</span>
                    <span className="font-medium">{selectedDelivery.user_name}</span>
                  </div>
                  {selectedDelivery.notes && (
                      <div className="flex flex-col">
                          <span className="text-xs text-slate-500">Notes</span>
                          <p className="bg-slate-50 p-2 rounded text-slate-700 text-sm mt-1">{selectedDelivery.notes}</p>
                      </div>
                  )}
                </dl>
              </div>

              <div>
                <h3 className="text-sm font-semibold uppercase tracking-wider text-slate-500 border-b pb-2 mb-3">Supplier Information</h3>
                {selectedDelivery.supplier_name ? (
                    <dl className="space-y-3 text-sm text-slate-900">
                    <div className="flex flex-col">
                        <span className="text-xs text-slate-500">Name</span>
                        <span className="font-medium">{selectedDelivery.supplier_name}</span>
                    </div>
                    <div className="flex flex-col">
                        <span className="text-xs text-slate-500">Contact Person</span>
                        <span className="font-medium">{selectedDelivery.supplier_contact || '-'}</span>
                    </div>
                    <div className="flex flex-col">
                        <span className="text-xs text-slate-500">Phone</span>
                        <span className="font-medium">{selectedDelivery.supplier_phone || '-'}</span>
                    </div>
                    <div className="flex flex-col">
                        <span className="text-xs text-slate-500">Email</span>
                        <span className="font-medium">{selectedDelivery.supplier_email || '-'}</span>
                    </div>
                     <div className="flex flex-col">
                          <span className="text-xs text-slate-500">Address</span>
                          <p className="text-slate-700 whitespace-pre-wrap">{selectedDelivery.supplier_address || '-'}</p>
                      </div>
                    </dl>
                ) : (
                    <div className="rounded-lg bg-slate-50 p-6 text-center text-sm text-slate-500 border border-slate-100 border-dashed">
                        No supplier linked to this delivery.
                    </div>
                )}
              </div>
            </div>
            
             <div className="flex justify-end gap-2 pt-4 border-t border-slate-100">
                  <Button
                    onClick={() => handleExportIndividualPDF(selectedDelivery)}
                    variant="outline"
                    className="flex items-center gap-2"
                  >
                    <FileText className="h-4 w-4" />
                    Export PDF
                  </Button>
                  <button
                    onClick={() => setSelectedDelivery(null)}
                    className="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg hover:bg-slate-200 transition text-sm font-medium"
                  >
                    Close
                  </button>
             </div>
          </div>
        )}
      </Modal>

      {/* ── Edit Delivery Modal ──────────────────────────────────────────────── */}
      <Modal
        isOpen={!!editingDelivery}
        onClose={() => setEditingDelivery(null)}
        title="Edit Delivery"
        size="lg"
      >
        {editingDelivery && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4 text-sm bg-slate-50 rounded-lg p-3">
              <div><span className="text-slate-500">School</span><p className="font-medium">{editingDelivery.school_name}</p></div>
              <div><span className="text-slate-500">Commodity</span><p className="font-medium">{editingDelivery.commodity_name}</p></div>
              <div><span className="text-slate-500">Recorded By</span><p className="font-medium">{editingDelivery.user_name}</p></div>
              <div><span className="text-slate-500">Original Qty</span><p className="font-bold text-brand">{smartRound(editingDelivery.actual_quantity)}</p></div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label htmlFor="edit-qty" className="block text-xs font-semibold text-slate-600 mb-1">Actual Quantity</label>
                <input
                  id="edit-qty"
                  type="number"
                  step="0.01"
                  min="0.01"
                  className={inputCls}
                  value={editForm.actual_quantity}
                  onChange={e => setEditForm(f => ({ ...f, actual_quantity: e.target.value }))}
                />
              </div>
              <div>
                <label htmlFor="edit-date" className="block text-xs font-semibold text-slate-600 mb-1">Delivery Date</label>
                <input
                  id="edit-date"
                  type="date"
                  className={inputCls}
                  value={editForm.delivery_date}
                  onChange={e => setEditForm(f => ({ ...f, delivery_date: e.target.value }))}
                />
              </div>
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-600 mb-1">Supplier</label>
              <select
                title="Change supplier"
                className={selectCls}
                value={editForm.supplier_id}
                onChange={e => setEditForm(f => ({ ...f, supplier_id: e.target.value }))}
              >
                <option value="">No supplier</option>
                {(suppliersList?.data ?? suppliersList ?? []).map((s: any) => (
                  <option key={s.id} value={s.id}>{s.name}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-xs font-semibold text-slate-600 mb-1">Notes</label>
              <textarea
                className={`${inputCls} h-20 resize-none`}
                value={editForm.notes}
                onChange={e => setEditForm(f => ({ ...f, notes: e.target.value }))}
                placeholder="Optional notes..."
              />
            </div>
            <div className="flex justify-end gap-2 pt-2 border-t border-slate-100">
              <Button variant="outline" onClick={() => setEditingDelivery(null)}>Cancel</Button>
              <Button
                onClick={() => {
                  const fields: Record<string, any> = {};
                  if (editForm.actual_quantity) fields.actual_quantity = parseFloat(editForm.actual_quantity);
                  if (editForm.delivery_date) fields.delivery_date = editForm.delivery_date;
                  fields.notes = editForm.notes;
                  if (editForm.supplier_id !== '') fields.supplier_id = editForm.supplier_id || null;
                  editMutation.mutate({ id: editingDelivery.id, fields });
                }}
                disabled={editMutation.isPending}
                className="flex items-center gap-2"
              >
                {editMutation.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Pencil className="h-4 w-4" />}
                {editMutation.isPending ? 'Saving...' : 'Save Changes'}
              </Button>
            </div>
          </div>
        )}
      </Modal>
    </LayoutShell>
  );
}