"use client";

import { useState } from "react";
import { DASH_TABS } from "@/lib/content";
import { BrowserFrame, Chip, Bar } from "./mockups";
import { cn } from "@/lib/cn";

const TAB_DATA: Record<string, { kpis: [string, string][]; bars: [string, string][] }> = {
  Production: {
    kpis: [
      ["Production plan", "86%"],
      ["Work orders", "128"],
      ["Lines running", "4"],
    ],
    bars: [
      ["Line 1 · Fabrication", "92%"],
      ["Line 2 · Packaging", "68%"],
      ["Line 3 · Assembly", "81%"],
    ],
  },
  Projects: {
    kpis: [
      ["Active projects", "14"],
      ["Avg progress", "63%"],
      ["Pending activities", "27"],
    ],
    bars: [
      ["Township Phase II", "74%"],
      ["Warehouse block C", "52%"],
      ["Plant expansion", "88%"],
    ],
  },
  Inventory: {
    kpis: [
      ["Stock value", "₹2.4Cr"],
      ["Low-stock items", "18"],
      ["Warehouses", "6"],
    ],
    bars: [
      ["Raw material", "89%"],
      ["WIP", "64%"],
      ["Finished goods", "77%"],
    ],
  },
  Purchase: {
    kpis: [
      ["Open POs", "42"],
      ["Pending approvals", "9"],
      ["Active vendors", "136"],
    ],
    bars: [
      ["PO fulfillment", "93%"],
      ["On-time delivery", "87%"],
      ["Cost savings", "71%"],
    ],
  },
  Sales: {
    kpis: [
      ["Open orders", "36"],
      ["Dispatch ready", "21"],
      ["Pipeline value", "₹5.1Cr"],
    ],
    bars: [
      ["Order booking", "84%"],
      ["Dispatch", "79%"],
      ["Collection", "91%"],
    ],
  },
  Finance: {
    kpis: [
      ["Receivables", "₹1.8Cr"],
      ["Payables", "₹96L"],
      ["Cash in hand", "₹3.2Cr"],
    ],
    bars: [
      ["Budget utilized", "61%"],
      ["RA billed", "78%"],
      ["Expense control", "83%"],
    ],
  },
};

export default function TabsDashboard() {
  const [tab, setTab] = useState<string>(DASH_TABS[0]);
  const data = TAB_DATA[tab] ?? TAB_DATA.Production;

  return (
    <BrowserFrame url="app.mxerp.in / management-dashboard">
      <div className="flex items-center justify-between gap-3">
        <div>
          <div className="text-xs text-muted">Management dashboard</div>
          <div className="font-display text-lg font-bold text-ink">All plants &amp; projects</div>
        </div>
        <Chip>This month</Chip>
      </div>
      <div className="mt-4 flex gap-1.5 overflow-x-auto pb-1" role="tablist" aria-label="Dashboard views">
        {DASH_TABS.map((t) => (
          <button
            key={t}
            role="tab"
            aria-selected={tab === t}
            onClick={() => setTab(t)}
            className={cn(
              "min-h-[36px] shrink-0 rounded-md px-3 py-1.5 text-xs",
              tab === t ? "bg-navy font-semibold text-white" : "bg-canvas text-body hover:bg-line"
            )}
          >
            {t}
          </button>
        ))}
      </div>
      <div className="mt-4 grid grid-cols-3 gap-2.5" role="tabpanel">
        {data.kpis.map(([label, value]) => (
          <div key={label} className="rounded-[10px] border border-line bg-white p-3">
            <div className="text-[11px] text-muted">{label}</div>
            <div className="font-display text-lg font-bold text-ink">{value}</div>
          </div>
        ))}
      </div>
      <div className="mt-4 space-y-3">
        {data.bars.map(([label, v]) => (
          <div key={label}>
            <div className="flex justify-between text-[11px] text-muted">
              <span>{label}</span>
              <b className="text-ink">{v}</b>
            </div>
            <Bar value={v} />
          </div>
        ))}
      </div>
    </BrowserFrame>
  );
}