"use client";

import type { CollectiveAgreement, Weekday, WorkerType } from "@/lib/supabase/types";

const WEEKDAYS: Weekday[] = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];

export type RoleEmploymentValue = {
  workerType: WorkerType;
  collectiveAgreement: CollectiveAgreement;
  workDays: Weekday[];
  isBetriebsrat: boolean;
  hasDienstwagen: boolean;
  isLateraleFuehrung: boolean;
  isCLevel: boolean;
};

// Shared by the hire wizard (StepVertrag) and DatenAendernPanel — both edit
// the same set of employees columns, just against different local state.
export function RoleEmploymentFields({ value, onChange }: { value: RoleEmploymentValue; onChange: (patch: Partial<RoleEmploymentValue>) => void }) {
  function toggleWorkDay(day: Weekday) {
    onChange({ workDays: value.workDays.includes(day) ? value.workDays.filter((d) => d !== day) : [...value.workDays, day] });
  }

  return (
    <div className="flex flex-col gap-3">
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <div>
          <label className="mb-1 block text-xs font-semibold text-ink-muted">Angestellte:r / Arbeiter:in</label>
          <select
            value={value.workerType}
            onChange={(e) => onChange({ workerType: e.target.value as WorkerType })}
            className="w-full rounded border border-border px-3 py-2 text-sm"
          >
            <option value="Angestellte:r">Angestellte:r</option>
            <option value="Arbeiter:in">Arbeiter:in</option>
          </select>
        </div>
        <div>
          <label className="mb-1 block text-xs font-semibold text-ink-muted">Kollektivvertrag</label>
          <select
            value={value.collectiveAgreement}
            onChange={(e) => onChange({ collectiveAgreement: e.target.value as CollectiveAgreement })}
            className="w-full rounded border border-border px-3 py-2 text-sm"
          >
            <option value="Handel">Handel</option>
            <option value="Süßwaren">Süßwaren</option>
          </select>
        </div>
      </div>

      <div>
        <label className="mb-1 block text-xs font-semibold text-ink-muted">Arbeitstage</label>
        <div className="flex flex-wrap gap-1.5">
          {WEEKDAYS.map((day) => (
            <button
              key={day}
              type="button"
              onClick={() => toggleWorkDay(day)}
              className={`rounded-full px-3 py-1.5 text-xs font-semibold ${
                value.workDays.includes(day) ? "bg-brand-500 text-white" : "border border-border text-ink-muted hover:bg-surface"
              }`}
            >
              {day}
            </button>
          ))}
        </div>
      </div>

      <div className="flex flex-col gap-2">
        <label className="flex items-center gap-2 text-sm text-ink-body">
          <input type="checkbox" checked={value.isBetriebsrat} onChange={(e) => onChange({ isBetriebsrat: e.target.checked })} />
          Betriebsrat
        </label>
        <label className="flex items-center gap-2 text-sm text-ink-body">
          <input type="checkbox" checked={value.hasDienstwagen} onChange={(e) => onChange({ hasDienstwagen: e.target.checked })} />
          Dienstwagen
        </label>
        <label className="flex items-center gap-2 text-sm text-ink-body">
          <input type="checkbox" checked={value.isLateraleFuehrung} onChange={(e) => onChange({ isLateraleFuehrung: e.target.checked })} />
          Laterale Führung
        </label>
        <label className="flex items-center gap-2 text-sm text-ink-body">
          <input type="checkbox" checked={value.isCLevel} onChange={(e) => onChange({ isCLevel: e.target.checked })} />
          C-Level
        </label>
      </div>
    </div>
  );
}