"use client";

import { AlertTriangle, Boxes, History, PackageCheck, Search, Warehouse } from "lucide-react";
import { useMemo, useState } from "react";
import type { InventoryProduct, InventoryReport } from "@/components/dashboard/data-types";
import { usePreferences } from "@/components/providers/app-providers";

export function InventoryPage({ report }: { report: InventoryReport }) {
  const { dictionary: t, locale } = usePreferences();
  const [query, setQuery] = useState("");
  const [onlyLow, setOnlyLow] = useState(false);
  const number = new Intl.NumberFormat(locale === "ar" ? "ar-EG" : "en-US");
  const money = new Intl.NumberFormat(locale === "ar" ? "ar-EG" : "en-US", {
    style: "currency",
    currency: "EGP",
    maximumFractionDigits: 2,
  });
  const date = new Intl.DateTimeFormat(locale === "ar" ? "ar-EG" : "en-GB", {
    dateStyle: "medium",
    timeStyle: "short",
  });

  const lowStock = report.products.filter((product) => product.available <= product.lowStockThreshold);
  const totals = report.products.reduce(
    (value, product) => ({
      onHand: value.onHand + product.onHand,
      reserved: value.reserved + product.reserved,
      available: value.available + product.available,
    }),
    { onHand: 0, reserved: 0, available: 0 },
  );
  const filtered = useMemo(() => {
    const normalized = query.trim().toLocaleLowerCase();
    return report.products.filter((product) => {
      const matches = !normalized || [product.sku, product.nameAr, product.nameEn]
        .some((value) => value.toLocaleLowerCase().includes(normalized));
      return matches && (!onlyLow || product.available <= product.lowStockThreshold);
    });
  }, [onlyLow, query, report.products]);

  const cards = [
    { label: t.dashboard.inventory.products, value: report.products.length, icon: Boxes, tone: "cyan" },
    { label: t.dashboard.inventory.onHand, value: totals.onHand, icon: Warehouse, tone: "blue" },
    { label: t.dashboard.inventory.reserved, value: totals.reserved, icon: PackageCheck, tone: "violet" },
    { label: t.dashboard.inventory.lowStock, value: lowStock.length, icon: AlertTriangle, tone: "red" },
  ];

  const stockState = (product: InventoryProduct) => {
    if (!product.active) return { className: "stock-inactive", label: t.dashboard.inventory.statuses.inactive };
    if (product.available <= 0) return { className: "stock-out", label: t.dashboard.inventory.statuses.out };
    if (product.available <= product.lowStockThreshold) return { className: "stock-low", label: t.dashboard.inventory.statuses.low };
    return { className: "stock-good", label: t.dashboard.inventory.statuses.good };
  };

  return (
    <div className="data-page inventory-page">
      <header className="data-page-header">
        <div>
          <p className="eyebrow">{t.dashboard.inventory.eyebrow}</p>
          <h1>{t.dashboard.inventory.title}</h1>
          <p>{t.dashboard.inventory.description}</p>
        </div>
      </header>

      <section className="summary-grid">
        {cards.map(({ label, value, icon: Icon, tone }) => (
          <article className={`summary-card tone-${tone}`} key={label}>
            <span><Icon size={19} /></span>
            <div><small>{label}</small><strong>{number.format(value)}</strong></div>
          </article>
        ))}
      </section>

      <section className="data-panel table-panel">
        <header className="panel-heading inventory-heading">
          <div><Warehouse size={18} /><div><h2>{t.dashboard.inventory.tableTitle}</h2><p>{t.dashboard.inventory.tableSubtitle}</p></div></div>
          <div className="inventory-filters">
            <label className="data-search compact">
              <Search size={15} />
              <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder={t.dashboard.inventory.search} />
            </label>
            <label className="filter-check">
              <input type="checkbox" checked={onlyLow} onChange={(event) => setOnlyLow(event.target.checked)} />
              {t.dashboard.inventory.onlyLow}
            </label>
          </div>
        </header>
        <div className="data-table-wrap">
          <table className="data-table inventory-table">
            <thead><tr>
              <th>{t.dashboard.inventory.sku}</th>
              <th>{t.dashboard.inventory.product}</th>
              <th>{t.dashboard.inventory.onHand}</th>
              <th>{t.dashboard.inventory.reserved}</th>
              <th>{t.dashboard.inventory.available}</th>
              <th>{t.dashboard.inventory.threshold}</th>
              <th>{t.dashboard.inventory.price}</th>
              <th>{t.dashboard.inventory.status}</th>
            </tr></thead>
            <tbody>
              {filtered.map((product) => {
                const state = stockState(product);
                return (
                  <tr className={state.className === "stock-low" || state.className === "stock-out" ? "low-stock-row" : ""} key={product.sku}>
                    <td><strong className="mono">{product.sku}</strong></td>
                    <td><strong>{locale === "ar" ? product.nameAr : product.nameEn}</strong><small>{locale === "ar" ? product.nameEn : product.nameAr}</small></td>
                    <td>{number.format(product.onHand)}</td>
                    <td>{number.format(product.reserved)}</td>
                    <td><strong>{number.format(product.available)}</strong></td>
                    <td>{number.format(product.lowStockThreshold)}</td>
                    <td>{money.format(Number(product.price))}</td>
                    <td><span className={`stock-badge ${state.className}`}>{state.label}</span></td>
                  </tr>
                );
              })}
              {filtered.length === 0 ? <tr><td className="empty-table" colSpan={8}>{t.dashboard.inventory.empty}</td></tr> : null}
            </tbody>
          </table>
        </div>
      </section>

      <section className="data-panel table-panel">
        <header className="panel-heading">
          <div><History size={18} /><div><h2>{t.dashboard.inventory.movementsTitle}</h2><p>{t.dashboard.inventory.movementsSubtitle}</p></div></div>
          <span>{report.movements.length}</span>
        </header>
        <div className="data-table-wrap movement-table-wrap">
          <table className="data-table">
            <thead><tr>
              <th>{t.dashboard.inventory.time}</th>
              <th>{t.dashboard.inventory.sku}</th>
              <th>{t.dashboard.inventory.product}</th>
              <th>{t.dashboard.inventory.movement}</th>
              <th>{t.dashboard.inventory.quantity}</th>
              <th>{t.dashboard.inventory.order}</th>
              <th>{t.dashboard.inventory.actor}</th>
            </tr></thead>
            <tbody>
              {report.movements.map((movement) => (
                <tr key={movement.id}>
                  <td><time>{date.format(new Date(movement.createdAt))}</time></td>
                  <td><strong className="mono">{movement.sku}</strong></td>
                  <td>{locale === "ar" ? movement.productNameAr : movement.productNameEn}</td>
                  <td><span className={`movement-badge movement-${movement.type.toLowerCase()}`}>
                    {t.dashboard.inventory.movementTypes[movement.type as keyof typeof t.dashboard.inventory.movementTypes] ?? movement.type}
                  </span></td>
                  <td><strong className="mono">{movement.qty > 0 ? "+" : ""}{movement.qty}</strong></td>
                  <td>{movement.orderId ? <span className="mono">{movement.orderId}</span> : "—"}</td>
                  <td>{movement.actor}</td>
                </tr>
              ))}
              {report.movements.length === 0 ? <tr><td className="empty-table" colSpan={7}>{t.dashboard.inventory.noMovements}</td></tr> : null}
            </tbody>
          </table>
        </div>
      </section>
    </div>
  );
}