"use client";

import { useState } from "react";
import { SegmentedControl } from "@/components/ui/SegmentedControl";
import type { OpenPositionResolved } from "@/lib/positions";
import { EmployeeTree } from "./EmployeeTree";
import { PositionTree } from "./PositionTree";
import { ReorgWorkbench } from "./ReorgWorkbench";
import type { OrgDepartment, OrgDivision, OrgEmployee, OrgTeam, ReorgScenarioSummary } from "./types";

type View = "ma" | "pos" | "reo";

type OrgChartClientProps = {
  employees: OrgEmployee[];
  divisions: OrgDivision[];
  departments: OrgDepartment[];
  teams: OrgTeam[];
  openPositions: OpenPositionResolved[];
  reorgScenarios: ReorgScenarioSummary[];
};

export function OrgChartClient({ employees, divisions, departments, teams, openPositions, reorgScenarios }: 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: "Positionen" },
          { value: "reo", label: "Reorganisation" },
        ]}
      />
      {view === "ma" && <EmployeeTree employees={employees} />}
      {view === "pos" && (
        <PositionTree employees={employees} divisions={divisions} departments={departments} teams={teams} openPositions={openPositions} />
      )}
      {view === "reo" && (
        <ReorgWorkbench employees={employees} divisions={divisions} departments={departments} teams={teams} reorgScenarios={reorgScenarios} />
      )}
    </div>
  );
}