import type { Metadata } from "next";

import { Example } from "@/components/design-system/example";
import { OnThisPage } from "@/components/design-system/on-this-page";
import { PageHeader } from "@/components/design-system/page-header";
import { InventoryListsSection } from "@/components/design-system/sections/lists-demo";
import { StocktakeVarianceSection } from "@/components/design-system/sections/records-more-demo";
import { Section } from "@/components/design-system/section";
import { BranchStockSection } from "@/components/design-system/sections/branch-stock-demo";
import { StockChartsSection } from "@/components/design-system/sections/report-charts-demo";
import { InventoryReportsSection } from "@/components/design-system/sections/inventory-reports-demo";
import { InventoryListPattern } from "@/components/design-system/sections/layout-patterns/inventory-list";
import { PurchasingSection } from "@/components/design-system/sections/operations/workflow";
import { GoodsInSection, PurchasingFlowSection } from "@/components/design-system/sections/purchasing-demo";
import { StockOpsSection } from "@/components/design-system/sections/stock-ops-demo";
import { BatchChip, BatchTable, StockAdjustmentForm, StockLevel } from "@/components/medora/stock";
import { addDays, batches, products, TODAY } from "@/lib/mock-data";

export const metadata: Metadata = { title: "Inventory | Medora Design System" };

const panadol = products.find((p) => p.name === "Panadol") ?? products[0];

const manyBatches = (() => {
  const counts = new Map<number, number>();
  batches.forEach((b) => counts.set(b.productId, (counts.get(b.productId) ?? 0) + 1));
  const id = [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0] - b[0])[0][0];
  return { product: products.find((p) => p.id === id)!, rows: batches.filter((b) => b.productId === id) };
})();

export default function InventoryPage() {
  return (
    <>
      <PageHeader
        title="Inventory"
        description="Stock on hand and how it moves: the inventory list, batches and expiry, stock per branch and location, adjustments, transfers, conversions, waste, reorder, and buying from suppliers."
      />
      <OnThisPage />

      <Section id="inventory" title="Inventory list">
        <Example title="Inventory list" bare>
          <InventoryListPattern />
        </Example>
      </Section>

      <Section id="stock" title="Batch chip, stock level and batches" description="Expiry colours: under 30 days or expired is error, under 90 warning, otherwise ok. Every chip also states the days, so colour is never the only signal.">
        <div className="grid gap-4 md:grid-cols-2">
          <Example title="Batch / expiry chip" className="flex flex-wrap gap-2">
            <BatchChip expiryDate={addDays(TODAY, -12)} today={TODAY} />
            <BatchChip expiryDate={addDays(TODAY, 0)} today={TODAY} />
            <BatchChip expiryDate={addDays(TODAY, 18)} today={TODAY} />
            <BatchChip expiryDate={addDays(TODAY, 62)} today={TODAY} />
            <BatchChip expiryDate={addDays(TODAY, 340)} today={TODAY} />
          </Example>
          <Example title="Stock level indicator" description="Marker is the reorder level" className="grid gap-4 sm:grid-cols-2">
            <StockLevel stock={620} minStock={200} />
            <StockLevel stock={140} minStock={200} />
            <StockLevel stock={0} minStock={200} />
            <StockLevel stock={200} minStock={200} />
          </Example>
        </div>
        <div className="grid gap-4 lg:grid-cols-2">
          <Example title="Stock adjustment form" description="default, error" className="grid gap-6 sm:grid-cols-1">
            <StockAdjustmentForm productName={panadol.name} currentStock={panadol.stock} />
            <StockAdjustmentForm productName={panadol.name} currentStock={panadol.stock} state="error" />
          </Example>
          <div className="space-y-4">
            <Example title="Stock adjustment form: loading and disabled" className="grid gap-6">
              <StockAdjustmentForm productName={panadol.name} currentStock={panadol.stock} state="loading" />
              <StockAdjustmentForm productName={panadol.name} currentStock={panadol.stock} state="disabled" />
            </Example>
          </div>
        </div>
        <Example title="Batch table" description={`${manyBatches.product.name}, FEFO order`} bare>
          <BatchTable batches={manyBatches.rows} today={TODAY} />
        </Example>
        <Example title="Batch table: empty" bare>
          <BatchTable batches={[]} today={TODAY} />
        </Example>
      </Section>

      <BranchStockSection />
      <StockChartsSection />
      <StockOpsSection />
      <StocktakeVarianceSection />
      <InventoryListsSection />
      <PurchasingSection />
      <PurchasingFlowSection />
      <GoodsInSection />
      <InventoryReportsSection />
    </>
  );
}