"use client";

/**
 * HRM → Employees (PRD 7.1; plan K, approved 26 Oct 2026): employees (HR-01, HR-02), leave (HR-04, which lives
 * inside 7.1 rather than its own submenu) and setup: leave types, public holidays and employee types (HR-03).
 * Pay, ID and payment details are behind HRM → Salaries (Q1), enforced by the API.
 */

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 { EmployeesView } from "./employees-view";
import { LeaveView } from "./leave-view";
import { SetupView } from "./setup-view";
import { Loading } from "@/components/medora/loading";

type Tab = "employees" | "leave" | "setup";
const LABEL: Record<Tab, string> = { employees: "Employees", leave: "Leave", setup: "Setup" };

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())}`;
};

export default function EmployeesPage() {
  const { can, loaded } = useMenuPermissions();
  const today = localToday();
  const show: Record<Tab, boolean> = {
    employees: loaded && can("HRM/Employees", "Read"),
    leave: loaded && can("HRM/Leave", "Read"),
    setup: loaded && (can("HRM/Leave", "Update") || can("HRM/Employees", "Update")),
  };
  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 addEmployee = React.useRef<(() => void) | null>(null);
  const [importing, setImporting] = React.useState(false);
  const current = tab && tabs.includes(tab) ? tab : (tabs[0] ?? null);

  if (!loaded)
    return (
      <Loading what="employees" columns={6} rows={8} toolbar={3} />
    );

  return (
    <div className="medora mx-auto w-full max-w-6xl space-y-4">
      <MedoraPageHeader
        title="Employees"
        description="Staff records, leave and leave balances."
        primary={current === "employees" && can("HRM/Employees", "Create") ? { label: "Add employee", icon: PlusIcon, onSelect: () => addEmployee.current?.() } : undefined}
        more={current === "employees" && can("HRM/Employees", "Create") ? [{ label: "Import from CSV", onSelect: () => setImporting(true) }] : []}
      />
      {!current ? (
        <p className="text-sm text-muted-foreground">Your role can&apos;t see employees.</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 === "employees" ? <EmployeesView today={today} may={(a) => can("HRM/Employees", a)} addRef={addEmployee} importOpen={importing} onImportOpenChange={setImporting} /> : null}
          {current === "leave" ? <LeaveView today={today} may={(a) => can("HRM/Leave", a)} /> : null}
          {current === "setup" ? <SetupView today={today} mayEmployees={can("HRM/Employees", "Update")} mayLeave={can("HRM/Leave", "Update")} /> : null}
        </>
      )}
    </div>
  );
}