import OmsorgButton from "../../components/ui/OmsorgButton";
import { useValueListItems } from "../../app/useValueListItems";

export const emptyContractForm = {
  contractType: "",
  startDate: "",
  endDate: "",
  status: "",
  weeklyHours: "",
  hourlyWage: "",
  allowancesDescription: "",
  overtimeRules: "",
  vacationDaysPerYear: "",
  probationPeriodMonths: "",
};

export function contractToFormValues(contract) {
  return {
    contractType: contract.contractType ?? "",
    startDate: contract.startDate ?? "",
    endDate: contract.endDate ?? "",
    status: contract.status ?? "",
    weeklyHours: contract.weeklyHours ?? "",
    hourlyWage: contract.hourlyWage ?? "",
    allowancesDescription: contract.allowancesDescription ?? "",
    overtimeRules: contract.overtimeRules ?? "",
    vacationDaysPerYear: contract.vacationDaysPerYear ?? "",
    probationPeriodMonths: contract.probationPeriodMonths ?? "",
  };
}

export function contractFormToPayload(form, { employeeId, includeStatus = false } = {}) {
  const payload = {
    contractType: form.contractType,
    employeeId,
    facilityId: null,
    startDate: form.startDate,
    endDate: form.endDate || null,
    weeklyHours: form.weeklyHours === "" ? null : Number(form.weeklyHours),
    hourlyWage: form.hourlyWage === "" ? null : Number(form.hourlyWage),
    allowancesDescription: form.allowancesDescription.trim() || null,
    overtimeRules: form.overtimeRules.trim() || null,
    vacationDaysPerYear: form.vacationDaysPerYear === "" ? null : Number(form.vacationDaysPerYear),
    probationPeriodMonths: form.probationPeriodMonths === "" ? null : Number(form.probationPeriodMonths),
  };

  if (includeStatus) {
    payload.status = form.status;
  }

  return payload;
}

export default function ContractForm({ form, onChange, includeStatus = false }) {
  const { items: contractTypes } = useValueListItems("ContractType");
  const { items: contractStatuses } = useValueListItems("ContractStatus");

  function updateField(field) {
    return (event) => onChange({ ...form, [field]: event.target.value });
  }

  return (
    <div className="form-grid">
      <label className="form-field">
        <span>Vertragstyp *</span>
        <select value={form.contractType} onChange={updateField("contractType")} required>
          <option value="">— auswählen —</option>
          {contractTypes.map((option) => (
            <option key={option.id} value={option.value}>
              {option.value}
            </option>
          ))}
        </select>
      </label>

      {includeStatus && (
        <label className="form-field">
          <span>Status</span>
          <select value={form.status} onChange={updateField("status")}>
            {contractStatuses.map((option) => (
              <option key={option.id} value={option.value}>
                {option.value}
              </option>
            ))}
          </select>
        </label>
      )}

      <div className="form-row">
        <label className="form-field">
          <span>Beginn *</span>
          <input type="date" value={form.startDate} onChange={updateField("startDate")} required />
        </label>

        <label className="form-field">
          <span>Ende</span>
          <input type="date" value={form.endDate} onChange={updateField("endDate")} />
        </label>
      </div>

      <div className="form-row">
        <label className="form-field">
          <span>Arbeitszeit (Std./Woche)</span>
          <input type="number" min="0" step="0.5" value={form.weeklyHours} onChange={updateField("weeklyHours")} />
        </label>

        <label className="form-field">
          <span>Stundenlohn (€)</span>
          <input type="number" min="0" step="0.01" value={form.hourlyWage} onChange={updateField("hourlyWage")} />
        </label>
      </div>

      <label className="form-field">
        <span>Zuschläge</span>
        <input value={form.allowancesDescription} onChange={updateField("allowancesDescription")} />
      </label>

      <label className="form-field">
        <span>Überstundenregelung</span>
        <input value={form.overtimeRules} onChange={updateField("overtimeRules")} />
      </label>

      <div className="form-row">
        <label className="form-field">
          <span>Urlaubsanspruch (Tage/Jahr)</span>
          <input
            type="number"
            min="0"
            value={form.vacationDaysPerYear}
            onChange={updateField("vacationDaysPerYear")}
          />
        </label>

        <label className="form-field">
          <span>Probezeit (Monate)</span>
          <input
            type="number"
            min="0"
            value={form.probationPeriodMonths}
            onChange={updateField("probationPeriodMonths")}
          />
        </label>
      </div>
    </div>
  );
}

export function FormActions({ onCancel, isSaving, submitLabel }) {
  return (
    <div className="form-actions">
      <OmsorgButton variant="secondary" type="button" onClick={onCancel} disabled={isSaving}>
        Abbrechen
      </OmsorgButton>
      <OmsorgButton type="submit" disabled={isSaving}>
        {isSaving ? "Speichert..." : submitLabel}
      </OmsorgButton>
    </div>
  );
}