alpenwerk-hr/components/employees/EmployeeDetail.tsx

"use client";

import { ArrowLeft, ArrowRightLeft, Clock, Pencil, RotateCcw, TrendingUp, XCircle } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
import { Avatar } from "@/components/ui/Avatar";
import { Button } from "@/components/ui/Button";
import { StatusChip } from "@/components/ui/StatusChip";
import { fmtFullName, tenure } from "@/lib/format";
import type { Database } from "@/lib/supabase/types";
import { DatenAendernPanel } from "./panels/DatenAendernPanel";
import { KarenzPanel } from "./panels/KarenzPanel";
import { PromotePanel } from "./panels/PromotePanel";
import { RehirePanel } from "./panels/RehirePanel";
import { TerminatePanel } from "./panels/TerminatePanel";
import { TransferPanel } from "./panels/TransferPanel";
import { HistorieTab } from "./tabs/HistorieTab";
import { NotizenTab } from "./tabs/NotizenTab";
import { OrganisationTab } from "./tabs/OrganisationTab";
import { StammdatenTab } from "./tabs/StammdatenTab";
import { VertragTab } from "./tabs/VertragTab";

type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];
type Division = Database["public"]["Tables"]["divisions"]["Row"];
type Department = Database["public"]["Tables"]["departments"]["Row"];
type Team = Database["public"]["Tables"]["teams"]["Row"];
type Location = Database["public"]["Tables"]["locations"]["Row"];
type HistoryRow = Database["public"]["Tables"]["employee_history"]["Row"];
type Dependent = Database["public"]["Tables"]["employee_dependents"]["Row"];
type NoteRow = Database["public"]["Tables"]["employee_notes"]["Row"];
type MiniEmployee = { id: string; first_name: string; last_name: string; job_title: string; status?: string };
type OpenPosition = { id: string; position_number: string; title: string; team_id: string; is_lead: boolean };

type EmployeeDetailProps = {
  employee: EmployeeRow;
  manager: MiniEmployee | null;
  directReports: MiniEmployee[];
  history: HistoryRow[];
  dependents: Dependent[];
  notes: NoteRow[];
  divisions: Division[];
  departments: Department[];
  teams: Team[];
  locations: Location[];
  openPositions: OpenPosition[];
};

type PanelType = "transfer" | "promote" | "karenz" | "daten" | "terminate" | "rehire" | null;
const TABS = ["Stammdaten", "Vertrag", "Organisation", "Historie", "HR-Notizen"] as const;

export function EmployeeDetail(props: EmployeeDetailProps) {
  const { employee, manager, directReports, history, dependents, notes, divisions, departments, teams, locations } = props;
  const [tab, setTab] = useState<(typeof TABS)[number]>("Stammdaten");
  const [panel, setPanel] = useState<PanelType>(null);

  const division = divisions.find((d) => d.id === employee.division_id);
  const team = employee.team_id ? teams.find((t) => t.id === employee.team_id) : undefined;
  const department = team ? departments.find((d) => d.id === team.department_id) : undefined;
  const breadcrumb = [division?.name, department?.name, team?.name].filter(Boolean).join(" › ") || "–";
  const location = locations.find((l) => l.id === employee.location_id);

  const isActive = employee.status === "Aktiv" || employee.status === "Karenz";
  const canEditData = employee.status !== "Ausgetreten";

  return (
    <div className="flex flex-col gap-6">
      <Link href="/employees" className="flex w-fit items-center gap-1.5 text-sm font-semibold text-ink-muted hover:text-ink">
        <ArrowLeft className="h-4 w-4" /> Zurück zu Mitarbeiter:innen
      </Link>

      <div className="rounded border border-border bg-white p-6">
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div className="flex items-start gap-4">
            <Avatar firstName={employee.first_name} lastName={employee.last_name} size="lg" />
            <div>
              <div className="flex items-center gap-2">
                <h2 className="text-xl font-extrabold text-ink">
                  {fmtFullName(employee.first_name, employee.last_name, employee.title_prefix, employee.title_suffix)}
                </h2>
                <StatusChip status={employee.status} entryDate={employee.entry_date} />
              </div>
              <p className="text-sm text-ink-body">{employee.job_title}</p>
              <p className="text-xs text-ink-muted">{breadcrumb}</p>
              <p className="mt-1 text-xs text-ink-muted">
                Pers.-Nr. {employee.personnel_number}
                {employee.status !== "Geplant" && <> · Zugehörigkeit: {tenure(employee.entry_date, employee.exit_date)}</>}
              </p>
            </div>
          </div>

          <div className="flex flex-wrap gap-2">
            {isActive && (
              <>
                <ActionButton icon={ArrowRightLeft} label="Versetzen" onClick={() => setPanel("transfer")} />
                <ActionButton icon={TrendingUp} label="Befördern" onClick={() => setPanel("promote")} />
                <ActionButton icon={Clock} label={employee.status === "Karenz" ? "Karenz verwalten" : "Karenz"} onClick={() => setPanel("karenz")} />
              </>
            )}
            {canEditData && <ActionButton icon={Pencil} label="Daten ändern" onClick={() => setPanel("daten")} />}
            {isActive && (
              <Button
                variant="secondary"
                size="sm"
                onClick={() => setPanel("terminate")}
                className="!border-danger-solid !text-danger-solid hover:!bg-danger-bg"
              >
                <XCircle className="h-4 w-4" /> Austritt
              </Button>
            )}
            {employee.status === "Ausgetreten" && (
              <Button size="sm" onClick={() => setPanel("rehire")}>
                <RotateCcw className="h-4 w-4" /> Wiedereinstellen
              </Button>
            )}
          </div>
        </div>
      </div>

      {/* Tabs, so the list gets the tablist role and each button says
          whether it is the selected one. */}
      <div role="tablist" aria-label="Mitarbeiterdetails" className="flex gap-1 overflow-x-auto border-b border-border">
        {TABS.map((t) => (
          <button
            key={t}
            role="tab"
            aria-selected={tab === t}
            onClick={() => setTab(t)}
            className={`whitespace-nowrap border-b-2 px-4 py-2 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-500 ${
              tab === t ? "border-brand-500 text-brand-700" : "border-transparent text-ink-muted hover:text-ink"
            }`}
          >
            {t === "HR-Notizen" ? `HR-Notizen ${notes.length}` : t}
          </button>
        ))}
      </div>

      <div className="rounded border border-border bg-white p-6">
        {tab === "Stammdaten" && <StammdatenTab employee={employee} location={location} dependents={dependents} />}
        {tab === "Vertrag" && <VertragTab employee={employee} />}
        {tab === "Organisation" && (
          <OrganisationTab employeeId={employee.id} manager={manager} directReports={directReports} breadcrumb={breadcrumb} />
        )}
        {tab === "Historie" && <HistorieTab history={history} />}
        {tab === "HR-Notizen" && <NotizenTab employeeId={employee.id} notes={notes} />}
      </div>

      <TransferPanel
        open={panel === "transfer"}
        onClose={() => setPanel(null)}
        employee={employee}
        divisions={divisions}
        departments={departments}
        teams={teams}
        currentTeamId={employee.team_id}
      />
      <PromotePanel open={panel === "promote"} onClose={() => setPanel(null)} employee={employee} />
      <KarenzPanel open={panel === "karenz"} onClose={() => setPanel(null)} employee={employee} />
      <DatenAendernPanel
        open={panel === "daten"}
        onClose={() => setPanel(null)}
        employee={employee}
        dependents={dependents}
        locationCountry={location?.country}
      />
      <TerminatePanel open={panel === "terminate"} onClose={() => setPanel(null)} employee={employee} directReportCount={directReports.length} />
      <RehirePanel open={panel === "rehire"} onClose={() => setPanel(null)} employee={employee} />
    </div>
  );
}

function ActionButton({ icon: Icon, label, onClick }: { icon: typeof ArrowRightLeft; label: string; onClick: () => void }) {
  return (
    <Button variant="secondary" size="sm" onClick={onClick}>
      <Icon className="h-4 w-4" /> {label}
    </Button>
  );
}