alpenwerk-hr/components/employees/panels/DatenAendernPanel.tsx

"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { changeEmployeeData } from "@/actions/employees";
import { CountryPicker } from "@/components/ui/CountryPicker";
import { SlideOver } from "@/components/ui/SlideOver";
import { useToast } from "@/components/ui/Toast";
import { UN_COUNTRIES } from "@/lib/countries";
import type { ContractType, Database, EmploymentType, GenderType } from "@/lib/supabase/types";

type EmployeeRow = Database["public"]["Views"]["employees_directory"]["Row"];

export function DatenAendernPanel({ open, onClose, employee }: { open: boolean; onClose: () => void; employee: EmployeeRow }) {
  const { showToast } = useToast();
  const router = useRouter();
  const [pending, setPending] = useState(false);
  const [effectiveDate, setEffectiveDate] = useState(new Date().toISOString().slice(0, 10));

  const [firstName, setFirstName] = useState(employee.first_name);
  const [lastName, setLastName] = useState(employee.last_name);
  const [gender, setGender] = useState<GenderType>(employee.gender);
  const [birthDate, setBirthDate] = useState(employee.birth_date);
  const [svNummer, setSvNummer] = useState(employee.sv_nummer ?? "");
  const [nationality, setNationality] = useState(employee.nationality);
  const [address, setAddress] = useState(employee.address ?? "");
  const [addressCountry, setAddressCountry] = useState(employee.address_country ?? "Österreich");
  const [email, setEmail] = useState(employee.email);
  const [phone, setPhone] = useState(employee.phone ?? "");

  const [employmentType, setEmploymentType] = useState<EmploymentType>(employee.employment_type);
  const [weeklyHours, setWeeklyHours] = useState(String(employee.weekly_hours));
  const [contractType, setContractType] = useState<ContractType>(employee.contract_type);
  const [contractEndDate, setContractEndDate] = useState(employee.contract_end_date ?? "");

  function handleEmploymentTypeChange(value: EmploymentType) {
    setEmploymentType(value);
    if (value === "Vollzeit") setWeeklyHours("38.5");
  }

  async function handleSubmit() {
    if (employmentType === "Teilzeit" && (Number(weeklyHours) <= 0 || Number(weeklyHours) >= 38.5)) {
      showToast("Wochenstunden bei Teilzeit müssen zwischen 0 und 38,5 liegen.", "error");
      return;
    }
    if (contractType === "befristet" && !contractEndDate) {
      showToast("Bei befristetem Vertrag ist ein Enddatum erforderlich.", "error");
      return;
    }
    if (!effectiveDate) {
      showToast("Bitte ein Wirksam-ab-Datum angeben.", "error");
      return;
    }
    setPending(true);
    const result = await changeEmployeeData({
      employee_id: employee.id,
      effective_date: effectiveDate,
      person: {
        first_name: firstName,
        last_name: lastName,
        gender,
        birth_date: birthDate,
        sv_nummer: svNummer,
        nationality,
        address,
        address_country: addressCountry,
        email,
        phone,
      },
      contract: {
        employment_type: employmentType,
        weekly_hours: Number(weeklyHours),
        contract_type: contractType,
        contract_end_date: contractType === "befristet" ? contractEndDate : "",
      },
    });
    setPending(false);
    if (result.success) {
      showToast("Daten aktualisiert.");
      router.refresh();
      onClose();
    } else {
      showToast(result.error ?? "Fehler beim Speichern.", "error");
    }
  }

  return (
    <SlideOver
      open={open}
      onClose={onClose}
      title="Daten ändern"
      subtitle={`${employee.first_name} ${employee.last_name} · ${employee.job_title}`}
      footer={
        <>
          <button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
            Abbrechen
          </button>
          <button
            onClick={handleSubmit}
            disabled={pending}
            className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
          >
            Speichern
          </button>
        </>
      }
    >
      <div className="flex flex-col gap-6">
        <div>
          <label className="mb-1 block text-sm font-semibold text-ink">Wirksam ab*</label>
          <input
            type="date"
            value={effectiveDate}
            onChange={(e) => setEffectiveDate(e.target.value)}
            className="w-full rounded border border-border px-3 py-2 text-sm"
          />
        </div>

        <div>
          <h3 className="mb-3 text-sm font-bold text-ink">Person</h3>
          <div className="flex flex-col gap-3">
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="mb-1 block text-xs font-semibold text-ink-muted">Vorname</label>
                <input value={firstName} onChange={(e) => setFirstName(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
              </div>
              <div>
                <label className="mb-1 block text-xs font-semibold text-ink-muted">Nachname</label>
                <input value={lastName} onChange={(e) => setLastName(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="mb-1 block text-xs font-semibold text-ink-muted">Geschlecht</label>
                <select value={gender} onChange={(e) => setGender(e.target.value as GenderType)} className="w-full rounded border border-border px-3 py-2 text-sm">
                  <option value="m">männlich</option>
                  <option value="w">weiblich</option>
                </select>
              </div>
              <div>
                <label className="mb-1 block text-xs font-semibold text-ink-muted">Geburtsdatum</label>
                <input
                  type="date"
                  value={birthDate}
                  onChange={(e) => setBirthDate(e.target.value)}
                  className="w-full rounded border border-border px-3 py-2 text-sm"
                />
              </div>
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-ink-muted">SV-Nummer</label>
              <input value={svNummer} onChange={(e) => setSvNummer(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-ink-muted">Staatsbürgerschaft</label>
              <CountryPicker value={nationality} onChange={setNationality} countries={UN_COUNTRIES} placeholder="Staatsbürgerschaft suchen…" />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="mb-1 block text-xs font-semibold text-ink-muted">Adresse</label>
                <input value={address} onChange={(e) => setAddress(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
              </div>
              <div>
                <label className="mb-1 block text-xs font-semibold text-ink-muted">Land</label>
                <CountryPicker value={addressCountry} onChange={setAddressCountry} countries={UN_COUNTRIES} placeholder="Land suchen…" />
              </div>
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-ink-muted">E-Mail</label>
              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-ink-muted">Telefon</label>
              <input value={phone} onChange={(e) => setPhone(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
            </div>
          </div>
        </div>

        <div>
          <h3 className="mb-3 text-sm font-bold text-ink">Vertrag</h3>
          <div className="flex flex-col gap-3">
            <div>
              <label className="mb-1 block text-xs font-semibold text-ink-muted">Beschäftigungsausmaß</label>
              <select
                value={employmentType}
                onChange={(e) => handleEmploymentTypeChange(e.target.value as EmploymentType)}
                className="w-full rounded border border-border px-3 py-2 text-sm"
              >
                <option value="Vollzeit">Vollzeit</option>
                <option value="Teilzeit">Teilzeit</option>
              </select>
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-ink-muted">Wochenstunden</label>
              <input
                type="number"
                step="0.5"
                value={weeklyHours}
                disabled={employmentType === "Vollzeit"}
                onChange={(e) => setWeeklyHours(e.target.value)}
                className="w-full rounded border border-border px-3 py-2 text-sm disabled:bg-surface disabled:text-ink-muted"
              />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-ink-muted">Vertragsart</label>
              <select
                value={contractType}
                onChange={(e) => setContractType(e.target.value as ContractType)}
                className="w-full rounded border border-border px-3 py-2 text-sm"
              >
                <option value="unbefristet">unbefristet</option>
                <option value="befristet">befristet</option>
              </select>
            </div>
            {contractType === "befristet" && (
              <div>
                <label className="mb-1 block text-xs font-semibold text-ink-muted">Befristet bis*</label>
                <input
                  type="date"
                  value={contractEndDate}
                  onChange={(e) => setContractEndDate(e.target.value)}
                  className="w-full rounded border border-border px-3 py-2 text-sm"
                />
              </div>
            )}
          </div>
        </div>
      </div>
    </SlideOver>
  );
}