import type { CSSProperties, ReactNode } from "react";
import { cn } from "@/lib/cn";

export function BrowserFrame({
  url,
  children,
  className,
}: {
  url: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "overflow-hidden rounded-2xl bg-white text-left shadow-hero",
        className
      )}
    >
      <div className="flex h-10 items-center gap-2 border-b border-line bg-canvas px-4">
        <span className="size-2.5 shrink-0 rounded-full bg-[#cbd5e1]" aria-hidden="true" />
        <span className="size-2.5 shrink-0 rounded-full bg-[#cbd5e1]" aria-hidden="true" />
        <span className="size-2.5 shrink-0 rounded-full bg-[#cbd5e1]" aria-hidden="true" />
        <span className="ml-3 min-w-0 flex-1 truncate font-mono text-[11px] text-muted">{url}</span>
      </div>
      <div className="p-[22px] max-sm:p-4">{children}</div>
    </div>
  );
}

export function Chip({
  children,
  tone = "slate",
}: {
  children: ReactNode;
  tone?: "slate" | "green" | "blue" | "amber";
}) {
  return (
    <span
      className={cn(
        "inline-flex h-[30px] items-center whitespace-nowrap rounded-full px-3 text-xs font-semibold",
        tone === "slate" && "bg-canvas text-body",
        tone === "green" && "bg-success-bg text-success",
        tone === "blue" && "bg-brand-tint text-brand",
        tone === "amber" && "bg-accent-soft text-accent-dark"
      )}
    >
      {children}
    </span>
  );
}

export function Bar({ value, tone = "blue" }: { value: string; tone?: "blue" | "amber" | "green" }) {
  return (
    <i
      className={cn("mx-bar", tone === "amber" && "amber", tone === "green" && "green")}
      style={{ "--v": value } as CSSProperties}
      aria-hidden="true"
    />
  );
}

function Kpi({ label, value, sub }: { label: string; value: string; sub?: string }) {
  return (
    <div className="min-w-0 overflow-hidden rounded-[10px] border border-line bg-white p-3.5 max-sm:p-2.5">
      <div className="truncate text-[11px] font-medium text-muted max-sm:text-[10px]">{label}</div>
      <div className="mt-1 truncate font-display text-[22px] font-bold leading-none tracking-tight text-ink max-sm:text-[17px]">
        {value}
      </div>
      {sub && (
        <div className="mt-2 flex items-center gap-1 truncate text-[11px] font-semibold text-success max-sm:text-[10px]">
          {sub}
        </div>
      )}
    </div>
  );
}

/** Hero management dashboard: All plants & projects */
export function HeroDashboard() {
  const tabs = ["Production", "Projects", "Inventory", "Purchase", "Sales", "Finance"];
  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 flex-wrap gap-1.5" aria-hidden="true">
        {tabs.map((t, i) => (
          <span
            key={t}
            className={cn(
              "rounded-md px-3 py-1.5 text-xs",
              i === 0 ? "bg-navy font-semibold text-white" : "bg-canvas text-body"
            )}
          >
            {t}
          </span>
        ))}
      </div>
      <div className="mt-4 grid grid-cols-3 gap-2.5">
        <Kpi label="Production plan" value="86%" sub="▲ On track" />
        <Kpi label="Work orders" value="128" sub="▲ 4 lines live" />
        <Kpi label="Project progress" value="63%" sub="▲ 14 active" />
      </div>
      <div className="mt-4 rounded-[10px] border border-line bg-white p-3">
        <div className="mb-2 flex justify-between text-[11px] text-muted">
          <span>Output vs plan</span>
          <span className="font-semibold text-ink">This week</span>
        </div>
        <div className="flex h-20 items-end gap-1.5" aria-hidden="true">
          {[42, 68, 55, 80, 64, 92, 74, 88, 58, 96, 70, 84].map((h, i) => (
            <span
              key={i}
              style={{ height: `${h}%` }}
              className={cn(
                "flex-1 rounded-sm",
                i % 4 === 3 ? "bg-accent" : "bg-brand/80"
              )}
            />
          ))}
        </div>
      </div>
    </BrowserFrame>
  );
}

/** Mini manufacturing card: WO-2291 */
export function MiniMfg() {
  const stages = ["PLANNED", "MATERIAL", "SHOP FLOOR", "QUALITY", "DISPATCH"];
  return (
    <div className="rounded-2xl border border-line bg-white p-5 text-left shadow-soft">
      <div className="flex items-center justify-between gap-2">
        <div className="text-xs text-muted">Work order WO-2291 · Packaging line 2</div>
        <Chip tone="green">In production</Chip>
      </div>
      <div className="mt-3 flex flex-wrap gap-1.5" aria-hidden="true">
        {stages.map((s, i) => (
          <span
            key={s}
            className={cn(
              "rounded px-2 py-1 font-mono text-[10px]",
              i <= 2 ? "bg-navy font-semibold text-white" : "bg-canvas text-muted"
            )}
          >
            {s}
          </span>
        ))}
      </div>
      <div className="mt-4">
        <div className="flex justify-between text-[11px] text-muted">
          <span>Packaging line 2</span>
          <b className="text-ink">68%</b>
        </div>
        <Bar value="68%" />
      </div>
    </div>
  );
}

/** Mini construction card: Township Phase II */
export function MiniConst() {
  return (
    <div className="rounded-2xl border border-line bg-white p-5 text-left shadow-soft">
      <div className="flex items-center justify-between gap-2">
        <div className="text-xs text-muted">Project · Township Phase II · BOQ progress</div>
        <Chip tone="blue">RA Bill 07 submitted</Chip>
      </div>
      <div className="mt-4 space-y-3">
        <div>
          <div className="flex justify-between text-[11px] text-muted">
            <span>Earthwork</span>
            <b className="text-ink">100%</b>
          </div>
          <Bar value="100%" tone="green" />
        </div>
        <div>
          <div className="flex justify-between text-[11px] text-muted">
            <span>RCC structure</span>
            <b className="text-ink">72%</b>
          </div>
          <Bar value="72%" />
        </div>
      </div>
    </div>
  );
}

/** Plant dashboard for manufacturing page */
export function PlantDashboard() {
  const tabs = ["Production", "Inventory", "Purchase", "Sales", "Finance", "HR", "Customers"];
  return (
    <BrowserFrame url="app.mxerp.in / plant-01 / 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">Plant 01 · Today</div>
        </div>
        <Chip tone="green">3 lines running</Chip>
      </div>
      <div className="mt-4 flex flex-wrap gap-1.5" aria-hidden="true">
        {tabs.map((t, i) => (
          <span
            key={t}
            className={cn(
              "rounded-md px-3 py-1.5 text-xs",
              i === 0 ? "bg-navy font-semibold text-white" : "bg-canvas text-body"
            )}
          >
            {t}
          </span>
        ))}
      </div>
      <div className="mt-4 grid grid-cols-3 gap-2.5">
        <Kpi label="Plan achieved" value="91%" sub="▲ +4% WoW" />
        <Kpi label="Stock value" value="₹2.4Cr" sub="▲ Healthy" />
        <Kpi label="Open orders" value="36" sub="▲ On schedule" />
      </div>
      <div className="mt-4 overflow-x-auto rounded-[10px] border border-line">
        <table className="w-full min-w-[420px] border-collapse text-left text-[11.5px]">
          <thead>
            <tr className="bg-canvas font-mono text-[10px] tracking-[0.08em] text-muted">
              <th className="px-3 py-2 font-medium">WORK ORDER</th>
              <th className="px-3 py-2 font-medium">ITEM</th>
              <th className="px-3 py-2 font-medium">LINE</th>
              <th className="px-3 py-2 font-medium">STATUS</th>
            </tr>
          </thead>
          <tbody className="text-body">
            {[
              ["WO-2291", "Packaging batch A", "Line 2", "In production", "text-accent-dark"],
              ["WO-2288", "Housing assembly", "Line 1", "Quality check", "text-brand"],
              ["WO-2284", "Control panel kit", "Line 3", "Finished goods", "text-success"],
              ["WO-2295", "Bracket set", "Line 1", "Planned", "text-muted"],
            ].map(([wo, item, line, status, color]) => (
              <tr key={wo as string} className="border-t border-line">
                <td className="px-3 py-2 font-mono font-medium text-ink">{wo}</td>
                <td className="px-3 py-2">{item}</td>
                <td className="px-3 py-2">{line}</td>
                <td className={cn("px-3 py-2 font-semibold", color)}>{status}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </BrowserFrame>
  );
}

/** Project dashboard for construction page */
const WBS_PHASES: { phase: string; value: string; tone?: "blue" | "amber" | "green" }[] = [
  { phase: "Earthwork", value: "100%", tone: "blue" },
  { phase: "RCC structure", value: "72%", tone: "blue" },
  { phase: "MEP services", value: "44%", tone: "blue" },
  { phase: "Finishing", value: "18%", tone: "amber" },
];

const CONST_STATUS: { label: string; state: string; tone: "green" | "amber" }[] = [
  { label: "DPR · today", state: "Submitted", tone: "green" },
  { label: "Cement · site store", state: "Reorder", tone: "amber" },
];

export function ProjectDashboard() {
  return (
    <BrowserFrame url="app.mxerp.in / projects / township-phase-ii">
      <div className="flex items-center justify-between gap-3">
        <div>
          <div className="text-xs text-muted">Project overview</div>
          <div className="font-display text-lg font-bold text-ink">Township Phase II</div>
        </div>
        <Chip tone="green">On track</Chip>
      </div>
      <div className="mt-3.5 grid grid-cols-3 gap-3">
        <Kpi label="Budget used" value="61%" sub="▲ Within plan" />
        <Kpi label="Pending activities" value="27" sub="▼ −5 this week" />
        <Kpi label="RA bills" value="07" sub="▲ Bill 07 ready" />
      </div>
      <div className="mt-3.5 rounded-[10px] border border-line bg-white p-3.5">
        <div className="flex items-center justify-between text-[11px]">
          <b className="font-display text-[12.5px] text-ink">WBS progress</b>
          <span className="text-muted">Actual vs planned</span>
        </div>
        <div className="mt-2.5 space-y-2.5">
          {WBS_PHASES.map(({ phase, value, tone }) => (
            <div key={phase} className="flex items-center gap-3">
              <span className="w-[92px] shrink-0 text-[11px] text-body">{phase}</span>
              <span className="min-w-0 flex-1">
                <Bar value={value} tone={tone} />
              </span>
              <b className="w-9 shrink-0 text-right text-[11px] text-ink">{value}</b>
            </div>
          ))}
        </div>
      </div>
      <div className="mt-3.5 flex flex-wrap gap-2.5">
        {CONST_STATUS.map(({ label, state, tone }) => (
          <div
            key={label}
            className="flex flex-1 items-center justify-between gap-3 rounded-[10px] border border-line bg-white px-3 py-2"
          >
            <span className="whitespace-nowrap rounded-md bg-canvas px-2 py-1 text-[11px] font-medium text-body">
              {label}
            </span>
            <b
              className={cn(
                "text-[11.5px] font-semibold",
                tone === "green" ? "text-success" : "text-accent-dark"
              )}
            >
              {state}
            </b>
          </div>
        ))}
      </div>
    </BrowserFrame>
  );
}