import { Link } from "react-router-dom";

export function DashboardPage() {
  const metricCards = [
    { label: "CRM Scope", value: "Complete", detail: "Customers, vendors, hierarchy, contacts, attachments", tone: "border-emerald-400/30 bg-emerald-500/12 text-emerald-700 dark:text-emerald-300" },
    { label: "Inventory", value: "Live", detail: "Items, BOMs, warehouses, stock, transactions", tone: "border-sky-400/30 bg-sky-500/12 text-sky-700 dark:text-sky-300" },
    { label: "Sales", value: "Active", detail: "Quotes, orders, totals, reseller pricing defaults", tone: "border-amber-400/30 bg-amber-500/12 text-amber-700 dark:text-amber-300" },
    { label: "Shipping", value: "Online", detail: "Shipments, status flow, packing-slip PDFs", tone: "border-brand/30 bg-brand/10 text-brand" },
  ];

  const modulePanels = [
    {
      title: "Commercial",
      eyebrow: "Revenue Flow",
      summary: "Quotes and sales orders now support item pricing, discount, tax, freight, and conversion workflows.",
      metrics: [
        { label: "Quote -> SO", value: "Enabled" },
        { label: "Totals Logic", value: "Live" },
        { label: "Customer Lookup", value: "Searchable" },
      ],
      links: [
        { label: "Open quotes", to: "/sales/quotes" },
        { label: "Open sales orders", to: "/sales/orders" },
      ],
    },
    {
      title: "Operations",
      eyebrow: "Stock + Ship",
      summary: "Inventory and shipping now share a usable operational path from item master through shipment paperwork.",
      metrics: [
        { label: "On-Hand", value: "Tracked" },
        { label: "Shipments", value: "Linked" },
        { label: "Packing Slips", value: "Ready" },
      ],
      links: [
        { label: "Open inventory", to: "/inventory/items" },
        { label: "Open shipments", to: "/shipping/shipments" },
      ],
    },
    {
      title: "Planning",
      eyebrow: "Next Layer",
      summary: "The dashboard is now intended as a modular command surface for future purchasing, manufacturing, and execution metrics.",
      metrics: [
        { label: "PO Module", value: "Next" },
        { label: "Gantt", value: "Preview" },
        { label: "Audit", value: "Pending" },
      ],
      links: [
        { label: "Open gantt", to: "/planning/gantt" },
        { label: "Company settings", to: "/settings/company" },
      ],
    },
  ];

  const futureModules = [
    "Purchasing queue and supplier receipts",
    "Shipment labels and bills of lading",
    "Manufacturing schedule and bottleneck metrics",
    "Audit and system-health diagnostics",
  ];

  return (
    <div className="space-y-4">
      <section className="overflow-hidden rounded-[30px] border border-line/70 bg-surface/90 shadow-panel backdrop-blur">
        <div className="grid gap-0 xl:grid-cols-[1.35fr_0.65fr]">
          <div className="relative overflow-hidden p-5 2xl:p-6">
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(24,90,219,0.16),_transparent_44%),linear-gradient(135deg,rgba(255,255,255,0.06),transparent)]" />
            <div className="relative">
              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Dashboard</p>
              <h3 className="mt-2 max-w-3xl text-2xl font-extrabold text-text">Operational command surface for metrics, movement, and next actions.</h3>
              <p className="mt-3 max-w-3xl text-sm leading-6 text-muted">
                This dashboard is now the primary landing surface for the platform. It is intended to stay modular as purchasing, manufacturing, shipping, and audit metrics are added in future slices.
              </p>
              <div className="mt-6 flex flex-wrap gap-3">
                <Link className="rounded-2xl bg-brand px-3 py-2 text-sm font-semibold text-white" to="/sales/orders">
                  Open sales orders
                </Link>
                <Link className="rounded-2xl border border-line/70 px-3 py-2 text-sm font-semibold text-text" to="/shipping/shipments">
                  Open shipments
                </Link>
                <Link className="rounded-2xl border border-line/70 px-3 py-2 text-sm font-semibold text-text" to="/inventory/items">
                  Open inventory
                </Link>
              </div>
            </div>
          </div>
          <div className="border-l border-line/70 bg-page/40 p-5 2xl:p-6">
            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Upgrade Path</p>
            <div className="mt-4 space-y-3">
              {futureModules.map((item) => (
                <div key={item} className="rounded-2xl border border-line/70 bg-surface/80 px-2 py-2 text-sm text-text">
                  {item}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <section className="grid gap-3 xl:grid-cols-4">
        {metricCards.map((card) => (
          <article key={card.label} className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">{card.label}</p>
            <div className="mt-2 flex items-center justify-between gap-3">
              <div className="text-xl font-extrabold text-text">{card.value}</div>
              <span className={`rounded-full px-2 py-1 text-xs font-semibold ${card.tone}`}>Live</span>
            </div>
            <p className="mt-2 text-sm text-muted">{card.detail}</p>
          </article>
        ))}
      </section>
      <section className="grid gap-3 xl:grid-cols-3">
        {modulePanels.map((panel) => (
          <article key={panel.title} className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">{panel.eyebrow}</p>
            <h4 className="mt-2 text-lg font-bold text-text">{panel.title}</h4>
            <p className="mt-3 text-sm leading-6 text-muted">{panel.summary}</p>
            <div className="mt-5 grid gap-2">
              {panel.metrics.map((metric) => (
                <div key={metric.label} className="flex items-center justify-between rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm">
                  <span className="text-muted">{metric.label}</span>
                  <span className="font-semibold text-text">{metric.value}</span>
                </div>
              ))}
            </div>
            <div className="mt-5 flex flex-wrap gap-2">
              {panel.links.map((link) => (
                <Link key={link.to} to={link.to} className="rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
                  {link.label}
                </Link>
              ))}
            </div>
          </article>
        ))}
      </section>
    </div>
  );
}