"use client";

import { useState, useCallback, useEffect } from "react";
import { fetchPayrollRuns } from "@/lib/supabase/payroll-actions";
import PayrollListPage from "./PayrollListPage";
import PayrollNewPage from "./PayrollNewPage";
import PayslipDetailPage from "./PayslipDetailPage";
import PageSkeleton from "./PageSkeleton";

type ViewType = "list" | "new" | "payslip";

export default function PayrollShell() {
  const [view, setView] = useState<ViewType>("list");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    fetchPayrollRuns()
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, []);

  const goToList = useCallback(() => setView("list"), []);
  const goToNew = useCallback(() => setView("new"), []);
  const goToPayslip = useCallback(() => setView("payslip"), []);
  const handleCreated = useCallback(() => {
    goToList();
  }, [goToList]);

  if (loading) return <PageSkeleton name="Payroll" />;

  return (
    <>
      {view === "list" && <PayrollListPage onRunPayroll={goToNew} />}
      {view === "new" && <PayrollNewPage onBack={goToList} onSuccess={handleCreated} />}
      {view === "payslip" && <PayslipDetailPage />}
    </>
  );
}