"use client";

/**
 * HRM → Payroll (PRD 7.2 – 7.9; plan L, approved 26 Oct 2026): runs and payslips (HR-05 – HR-08), what goes into
 * them (HR-10, HR-11, HR-13, HR-14, HR-17), loans and advances (HR-12, HR-16), P9 cards (HR-09) and the statutory
 * rate versions payroll runs on (HR-15). Nothing statutory is built in: payroll runs only on rates the pharmacy has
 * entered and confirmed (Q1). Payslips by SMS and email wait for plan M (Q2).
 */

import * as React from "react";
import { PlusIcon } from "lucide-react";

import { MedoraPageHeader } from "@/components/medora/page-header";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useMenuPermissions } from "@/lib/permissions";
import { useTabParam } from "@/lib/use-tab-param";

import { LoansView } from "./loans-view";
import { P9View } from "./p9-view";
import { RatesView } from "./rates-view";
import { RecordsView } from "./records-view";
import { RunsView } from "./runs-view";
import { Loading } from "@/components/medora/loading";

type Tab = "runs" | "records" | "loans" | "p9" | "rates";
const LABEL: Record<Tab, string> = { runs: "Payroll runs", records: "Pay items and logs", loans: "Loans and advances", p9: "P9", rates: "Statutory rates" };

const pad = (x: number) => String(x).padStart(2, "0");
const localToday = () => {
  const d = new Date();
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
};
const signedInId = () => {
  try {
    const u = JSON.parse(localStorage.getItem("user") ?? "null") as { id?: number } | null;
    return u?.id ?? null;
  } catch {
    return null;
  }
};

export default function PayrollPage() {
  const { can, loaded } = useMenuPermissions();
  const today = localToday();
  const [userId, setUserId] = React.useState<number | null>(null);
  React.useEffect(() => setUserId(signedInId()), []);
  const pay = loaded && can("HRM/Payroll", "Read");
  const show: Record<Tab, boolean> = { runs: pay, records: pay, loans: pay, p9: pay, rates: loaded && (can("HRM/Statutory rates", "Read") || pay) };
  const tabs = (Object.keys(LABEL) as Tab[]).filter((t) => show[t]);
  const [tabParam, setTab] = useTabParam(); // page tabs change the URL (tabs spec 7.1)
  const tab = tabParam as Tab | null;
  const prepareRun = React.useRef<(() => void) | null>(null);
  const current = tab && tabs.includes(tab) ? tab : (tabs[0] ?? null);

  if (!loaded)
    return (
      <Loading what="payroll" columns={6} rows={5} numeric={[3, 4]} />
    );

  return (
    <div className="medora mx-auto w-full max-w-6xl space-y-4">
      <MedoraPageHeader title="Payroll" description="Monthly, casual and piece-rate pay, payslips and P9s. Confidential." primary={current === "runs" && can("HRM/Payroll", "Create") ? { label: "Prepare a run", icon: PlusIcon, onSelect: () => prepareRun.current?.() } : undefined} />
      {!current ? (
        <p className="text-sm text-muted-foreground">Your role can&apos;t see payroll.</p>
      ) : (
        <>
          <Tabs value={current} onValueChange={(v) => setTab(v as Tab)}>
            <TabsList variant="line">
              {tabs.map((t) => (
                <TabsTrigger key={t} value={t} className="flex-none">
                  {LABEL[t]}
                </TabsTrigger>
              ))}
            </TabsList>
          </Tabs>
          {current === "runs" ? <RunsView today={today} userId={userId} may={(a) => can("HRM/Payroll", a)} prepareRef={prepareRun} /> : null}
          {current === "records" ? <RecordsView today={today} may={(a) => can("HRM/Payroll", a)} /> : null}
          {current === "loans" ? <LoansView today={today} may={(a) => can("HRM/Payroll", a)} /> : null}
          {current === "p9" ? <P9View today={today} /> : null}
          {current === "rates" ? <RatesView today={today} may={(a) => can("HRM/Statutory rates", a)} /> : null}
        </>
      )}
    </div>
  );
}