"use client";

import { useState, useCallback, useEffect } from "react";
import { fetchEmployees as fetchEmps } from "@/lib/supabase/employees-actions";
import EmployeesPage from "./EmployeesPage";
import EmployeesNewPage from "./EmployeesNewPage";
import EmployeesDetailPage from "./EmployeesDetailPage";
import PageSkeleton from "./PageSkeleton";

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

export default function EmployeesShell() {
  const [view, setView] = useState<ViewType>("list");
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

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

  const goToList = useCallback(() => { setView("list"); setSelectedId(null); }, []);
  const goToNew = useCallback(() => { setView("new"); setSelectedId(null); }, []);
  const goToDetail = useCallback((id: string) => { setSelectedId(id); setView("detail"); }, []);
  const handleCreated = useCallback((id: string) => {
    goToDetail(id);
  }, [goToDetail]);

  if (loading) return <PageSkeleton />;

  return (
    <>
      {view === "list" && <EmployeesPage onAdd={goToNew} />}
      {view === "new" && <EmployeesNewPage onBack={goToList} />}
      {view === "detail" && selectedId && <EmployeesDetailPage employeeId={selectedId} onBack={goToList} />}
    </>
  );
}