"use client";

import { useActionState, useState } from "react";
import { createQmSubmissionAction } from "@/lib/actions/qm";

export function NewQmSubmissionForm() {
  const [state, formAction, pending] = useActionState(createQmSubmissionAction, {});
  const [target, setTarget] = useState<"qm" | "hr">("qm");

  return (
    <form action={formAction} encType="multipart/form-data" className="border border-white/10 rounded-xl p-5 flex flex-col gap-3">
      <div className="flex flex-col gap-1.5">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">An</span>
        <div className="flex gap-4">
          <label className="flex items-center gap-2 text-sm">
            <input
              type="radio"
              name="target"
              value="qm"
              checked={target === "qm"}
              onChange={() => setTarget("qm")}
              className="h-3.5 w-3.5"
            />
            Qualitätsmanagement
          </label>
          <label className="flex items-center gap-2 text-sm">
            <input
              type="radio"
              name="target"
              value="hr"
              checked={target === "hr"}
              onChange={() => setTarget("hr")}
              className="h-3.5 w-3.5"
            />
            Personalabteilung
          </label>
        </div>
        <p className="text-xs text-[var(--rk-ink-muted)]">
          Vertrauliche Themen (z. B. Konflikte, persönliche Anliegen) gehen nur an die Personalabteilung — nicht an das
          QM-Team.
        </p>
      </div>

      {target === "hr" && (
        <label className="flex items-center gap-2 text-sm border border-white/10 rounded-lg px-3 py-2">
          <input type="checkbox" name="anonymous" value="on" className="h-3.5 w-3.5" />
          Anonym einreichen — dein Name wird der Personalabteilung nicht angezeigt
        </label>
      )}
      <input
        name="title"
        placeholder="Titel"
        required
        className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
      />
      <textarea
        name="description"
        placeholder="Beschreibung (optional)"
        rows={4}
        className="bg-transparent border border-white/15 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-white/50 resize-y"
      />
      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Anhang (optional)</span>
        <input name="attachment" type="file" accept="image/jpeg,image/png,image/webp,application/pdf" className="text-sm" />
      </label>
      <button
        type="submit"
        disabled={pending}
        className="self-start border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
      >
        Einreichen
      </button>
      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
      {state.success && <p className="text-sm text-emerald-400">Eingereicht.</p>}
    </form>
  );
}