"use client";

import { useEffect, useState } from "react";
import { DataTable } from "@/components/data-table";
import { getInventoryExpiry, generateExpiryReportPdf, ExpiryRow } from "@/lib/api";

type ExpiryTableRow = {
  itemName: string;
  batchNumber: string;
  expiryDate: string;
  daysLeft: number;
  warehouse: string;
  availableMt: number;
};

type DateRangeOption = {
  label: string;
  months: number;
};

const DATE_RANGES: DateRangeOption[] = [
  { label: "Next 12 months", months: 12 },
  { label: "Next 18 months", months: 18 },
  { label: "Next 24 months", months: 24 },
];

function getDaysLeft(expiryDate: string | null): number {
  if (!expiryDate) return 9999;
  return Math.ceil((new Date(expiryDate).getTime() - Date.now()) / 86400000);
}

function toTableRow(row: ExpiryRow): ExpiryTableRow {
  return {
    itemName: row.itemName ?? "—",
    batchNumber: row.batchNumber ?? "—",
    expiryDate: row.expiryDate ?? "—",
    daysLeft: getDaysLeft(row.expiryDate),
    warehouse: row.warehouse ?? "—",
    availableMt: row.availableMt,
  };
}

export default function ExpiryPage() {
  const [data, setData] = useState<ExpiryRow[] | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Filters
  const [selectedMonths, setSelectedMonths] = useState(12);
  const [selectedWarehouses, setSelectedWarehouses] = useState<string[]>([]);
  const [itemFilter, setItemFilter] = useState("");

  // Report modal
  const [reportOpen, setReportOpen] = useState(false);
  const [reportWarehouses, setReportWarehouses] = useState<string[]>([]);
  const [reportItems, setReportItems] = useState<string[]>([]);
  const [reportMonths, setReportMonths] = useState(12);
  const [reportLoading, setReportLoading] = useState(false);
  const [reportError, setReportError] = useState<string | null>(null);

  function load() {
    setLoading(true);
    setError(null);
    getInventoryExpiry(selectedMonths, selectedWarehouses.length ? selectedWarehouses : undefined)
      .then((rows) => {
        const sorted = [...rows].sort((a, b) =>
          String(a.expiryDate ?? "9999").localeCompare(String(b.expiryDate ?? "9999"))
        );
        setData(sorted);
      })
      .catch((err: unknown) => setError(err instanceof Error ? err.message : "Failed to load"))
      .finally(() => setLoading(false));
  }

  useEffect(() => { load(); }, [selectedMonths, selectedWarehouses]); // eslint-disable-line react-hooks/exhaustive-deps

  const allRows: ExpiryTableRow[] = (data ?? []).map(toTableRow);

  // Unique warehouses and items from data
  const allWarehouses = Array.from(new Set(
    allRows.flatMap((r) => r.warehouse !== "—" ? r.warehouse.split(", ") : [])
  )).sort();

  // Build warehouse → items map for the report modal
  const warehouseItemsMap = new Map<string, Set<string>>();
  allRows.forEach((r) => {
    if (r.itemName === "—" || r.warehouse === "—") return;
    r.warehouse.split(", ").forEach((wh) => {
      if (!warehouseItemsMap.has(wh)) warehouseItemsMap.set(wh, new Set());
      warehouseItemsMap.get(wh)!.add(r.itemName);
    });
  });

  // Items available for the report based on selected warehouses
  const reportAvailableItems: string[] = reportWarehouses.length > 0
    ? Array.from(new Set(
        reportWarehouses.flatMap((wh) => Array.from(warehouseItemsMap.get(wh) ?? []))
      )).sort()
    : Array.from(new Set(allRows.map((r) => r.itemName).filter((i) => i !== "—"))).sort();

  const allItems = Array.from(new Set(allRows.map((r) => r.itemName).filter((i) => i !== "—")));

  // Apply item filter client-side
  const rows = itemFilter
    ? allRows.filter((r) => r.itemName === itemFilter)
    : allRows;

  function toggleWarehouse(w: string) {
    setSelectedWarehouses((prev) =>
      prev.includes(w) ? prev.filter((x) => x !== w) : [...prev, w]
    );
  }

  function toggleReportWarehouse(w: string) {
    setReportWarehouses((prev) => {
      const next = prev.includes(w) ? prev.filter((x) => x !== w) : [...prev, w];
      // Remove any selected items that don't belong to the new warehouse selection
      if (next.length > 0) {
        const validItems = new Set(
          next.flatMap((wh) => Array.from(warehouseItemsMap.get(wh) ?? []))
        );
        setReportItems((items) => items.filter((i) => validItems.has(i)));
      }
      return next;
    });
  }

  function toggleReportItem(i: string) {
    setReportItems((prev) =>
      prev.includes(i) ? prev.filter((x) => x !== i) : [...prev, i]
    );
  }

  async function handleGenerateReport() {
    setReportLoading(true);
    setReportError(null);
    try {
      const { blob, fileName } = await generateExpiryReportPdf({
        warehouses: reportWarehouses.length ? reportWarehouses : undefined,
        items: reportItems.length ? reportItems : undefined,
        months: reportMonths,
        downloadedBy: "System Generated",
        reviewedBy: "",
        approvedBy: "",
      });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
      setReportOpen(false);
    } catch (err: unknown) {
      setReportError(err instanceof Error ? err.message : "Report generation failed");
    } finally {
      setReportLoading(false);
    }
  }

  const expiredCount = allRows.filter((r) => r.daysLeft <= 0).length;
  const urgentCount = allRows.filter((r) => r.daysLeft > 0 && r.daysLeft <= 30).length;

  return (
    <>
      <section className="hero">
        <h2>Check Expiry Items</h2>
        <p>All batches expiring within the selected window, including already expired stock.</p>
      </section>

      <section className="section">
        {/* ── Filter bar ──────────────────────────────────────────────── */}
        <div className="section-header" style={{ flexWrap: "wrap", gap: 12 }}>
          <div>
            <h3>Expiry attention list</h3>
            <p>
              {rows.length} batch{rows.length !== 1 ? "es" : ""}
              {expiredCount > 0 && <span style={{ color: "var(--danger)", marginLeft: 8 }}>· {expiredCount} expired</span>}
              {urgentCount > 0 && <span style={{ color: "var(--warn)", marginLeft: 8 }}>· {urgentCount} urgent (&lt;30d)</span>}
            </p>
          </div>

          <div className="filters" style={{ flexWrap: "wrap" }}>
            {/* Date range dropdown */}
            <div className="select-wrapper" style={{ minWidth: 160 }}>
              <select
                className="premium-select"
                style={{ padding: "8px 36px 8px 12px", fontSize: "0.82rem" }}
                value={selectedMonths}
                onChange={(e) => setSelectedMonths(Number(e.target.value))}
              >
                {DATE_RANGES.map((r) => (
                  <option key={r.months} value={r.months}>{r.label}</option>
                ))}
              </select>
              <span className="select-chevron">▾</span>
            </div>

            {/* Item filter */}
            <div className="select-wrapper" style={{ minWidth: 160 }}>
              <select
                className="premium-select"
                style={{ padding: "8px 36px 8px 12px", fontSize: "0.82rem" }}
                value={itemFilter}
                onChange={(e) => setItemFilter(e.target.value)}
              >
                <option value="">All items</option>
                {allItems.map((i) => <option key={i} value={i}>{i}</option>)}
              </select>
              <span className="select-chevron">▾</span>
            </div>

            {/* Warehouse multi-select */}
            <div className="multi-select-wrapper">
              <button className="multi-select-trigger premium-select" style={{ padding: "8px 36px 8px 12px", fontSize: "0.82rem", minWidth: 180 }}>
                {selectedWarehouses.length === 0
                  ? "All warehouses"
                  : `${selectedWarehouses.length} warehouse${selectedWarehouses.length > 1 ? "s" : ""}`}
                <span className="select-chevron" style={{ right: 14 }}>▾</span>
              </button>
              <div className="multi-select-dropdown">
                {allWarehouses.map((w) => (
                  <label key={w} className="multi-select-option">
                    <input
                      type="checkbox"
                      checked={selectedWarehouses.includes(w)}
                      onChange={() => toggleWarehouse(w)}
                      style={{ width: 14, height: 14 }}
                    />
                    {w}
                  </label>
                ))}
                {allWarehouses.length === 0 && (
                  <p style={{ padding: "8px 12px", color: "var(--muted)", fontSize: "0.82rem", margin: 0 }}>No warehouses</p>
                )}
              </div>
            </div>

            {(selectedWarehouses.length > 0 || itemFilter) && (
              <button
                className="button secondary"
                style={{ padding: "8px 14px", fontSize: "0.78rem" }}
                onClick={() => { setSelectedWarehouses([]); setItemFilter(""); }}
              >
                Clear
              </button>
            )}

            {/* Generate report button */}
            <button
              className="button"
              style={{ padding: "8px 16px", fontSize: "0.78rem" }}
              onClick={() => {
                setReportWarehouses(selectedWarehouses);
                setReportItems(itemFilter ? [itemFilter] : []);
                setReportMonths(selectedMonths);
                setReportOpen(true);
              }}
            >
              Generate Report
            </button>
          </div>
        </div>

        {loading && <p>Loading expiry data…</p>}
        {!loading && error && <p className="error">{error}</p>}

        {!loading && !error && (
          <DataTable<ExpiryTableRow>
            rows={rows}
            columns={[
              { key: "itemName", label: "Item" },
              { key: "batchNumber", label: "Batch" },
              { key: "expiryDate", label: "Expiry Date" },
              {
                key: "daysLeft",
                label: "Status",
                render: (value) => {
                  const days = Number(value);
                  if (days <= 0) return <span className="expiry-badge expiry-urgent">Expired</span>;
                  if (days <= 30) return <span className="expiry-badge expiry-urgent">{days}d left</span>;
                  if (days <= 90) return <span className="expiry-badge expiry-soon">{days}d left</span>;
                  return <span className="expiry-badge expiry-ok">{days}d left</span>;
                },
              },
              { key: "warehouse", label: "Warehouse" },
              { key: "availableMt", label: "Available MT" },
            ]}
          />
        )}

        {!loading && !error && rows.length === 0 && (
          <div className="empty-preview" style={{ marginTop: 16 }}>
            <p>No batches match the current filters.</p>
          </div>
        )}
      </section>

      {/* ── Generate Expiry Report Modal ─────────────────────────────────── */}
      {reportOpen && (
        <div
          className="doc-modal-backdrop"
          onClick={(e) => { if (e.target === e.currentTarget) setReportOpen(false); }}
        >
          <div className="doc-modal" style={{ maxWidth: 560 }}>
            <div className="doc-modal-header">
              <div>
                <strong className="doc-modal-title">Generate Expiry Report</strong>
                <span className="doc-modal-meta">Royal Horizon General Trading LLC — Movement Out Sheet</span>
              </div>
              <button className="doc-modal-close" onClick={() => setReportOpen(false)} aria-label="Close">✕</button>
            </div>

            <div style={{ padding: "20px 22px 24px", overflowY: "auto", maxHeight: "70vh" }} className="stack">

              {/* Date range */}
              <div className="form-field">
                <label className="form-label">Date Range</label>
                <div className="select-wrapper">
                  <select
                    className="premium-select"
                    value={reportMonths}
                    onChange={(e) => setReportMonths(Number(e.target.value))}
                  >
                    {DATE_RANGES.map((r) => (
                      <option key={r.months} value={r.months}>{r.label}</option>
                    ))}
                  </select>
                  <span className="select-chevron">▾</span>
                </div>
              </div>

              {/* Warehouse multi-select */}
              <div className="form-field">
                <label className="form-label">
                  Warehouses
                  <span className="form-optional">
                    {reportWarehouses.length === 0 ? "all" : `${reportWarehouses.length} selected`}
                  </span>
                </label>
                <div className="checkbox-group" style={{ maxHeight: 200, overflowY: "auto" }}>
                  {allWarehouses.map((w) => (
                    <label key={w} className="checkbox-option">
                      <input
                        type="checkbox"
                        checked={reportWarehouses.includes(w)}
                        onChange={() => toggleReportWarehouse(w)}
                        style={{ width: 14, height: 14 }}
                      />
                      {w}
                    </label>
                  ))}
                  {allWarehouses.length === 0 && <p style={{ color: "var(--muted)", fontSize: "0.84rem", margin: 0 }}>No warehouses available</p>}
                </div>
              </div>

              {/* Items — filtered by selected warehouses */}
              <div className="form-field">
                <label className="form-label">
                  Items
                  <span className="form-optional">
                    {reportWarehouses.length > 0
                      ? `from ${reportWarehouses.length} selected warehouse${reportWarehouses.length > 1 ? "s" : ""}`
                      : "all warehouses"}
                    {reportItems.length > 0 && ` · ${reportItems.length} selected`}
                  </span>
                </label>
                {reportWarehouses.length > 0 && reportAvailableItems.length === 0 && (
                  <p style={{ color: "var(--muted)", fontSize: "0.84rem", margin: 0 }}>
                    No items found in the selected warehouses.
                  </p>
                )}
                <div className="checkbox-group" style={{ maxHeight: 200, overflowY: "auto" }}>
                  {reportAvailableItems.map((i) => (
                    <label key={i} className="checkbox-option">
                      <input
                        type="checkbox"
                        checked={reportItems.includes(i)}
                        onChange={() => toggleReportItem(i)}
                        style={{ width: 14, height: 14 }}
                      />
                      {i}
                    </label>
                  ))}
                  {reportAvailableItems.length === 0 && reportWarehouses.length === 0 && (
                    <p style={{ color: "var(--muted)", fontSize: "0.84rem", margin: 0 }}>No items available</p>
                  )}
                </div>
              </div>

              {reportError && (
                <div className="snackbar snackbar-error">
                  <span>⚠ {reportError}</span>
                </div>
              )}

              <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
                <button className="button secondary" onClick={() => setReportOpen(false)} disabled={reportLoading}>
                  Cancel
                </button>
                <button className="button" onClick={handleGenerateReport} disabled={reportLoading}>
                  {reportLoading ? "Generating…" : "GENERATE PDF"}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}