"use client";

import { useState } from "react";
import { SegmentedControl } from "@/components/ui/SegmentedControl";
import { AsOfPicker } from "./AsOfPicker";
import { EmployeeTree } from "./EmployeeTree";
import { PositionTree } from "./PositionTree";
import type { OrgEmployee, OrgUnitNode, OrgVacancy } from "./types";

type View = "ma" | "pos";

type OrgChartClientProps = {
  employees: OrgEmployee[];
  units: OrgUnitNode[];
  vacancies: OrgVacancy[];
  asOf: string;
  today: string;
  projectedCount: number;
  historyStartsAt: string | null;
  /** Arrived via "Im Organigramm anzeigen" — unfold and centre this person. */
  focusId: string | null;
};

export function OrgChartClient({
  employees,
  units,
  vacancies,
  asOf,
  today,
  projectedCount,
  historyStartsAt,
  focusId,
}: OrgChartClientProps) {
  const [view, setView] = useState<View>("ma");

  return (
    <div className="flex flex-col gap-4">
      <SegmentedControl<View>
        value={view}
        onChange={setView}
        options={[
          { value: "ma", label: "Mitarbeiter" },
          { value: "pos", label: "Organisation" },
        ]}
      />

      <AsOfPicker asOf={asOf} today={today} projectedCount={projectedCount} historyStartsAt={historyStartsAt} />

      {view === "ma" && <EmployeeTree employees={employees} focusId={focusId} />}
      {view === "pos" && <PositionTree employees={employees} units={units} vacancies={vacancies} />}
    </div>
  );
}