"use client";

import { useEffect, useState } from "react";
import { useActionState } from "react";
import { useRouter } from "next/navigation";
import { adminCreateOrderForClientAction } from "@/lib/actions/admin";
import { SHOOTING_TYPES } from "@/lib/orderConstants";
import { RequiredMark } from "@/components/auth/RegisterForm";
import { ClientSearchField, type ClientOption } from "@/components/admin/ClientSearchField";

export type { ClientOption };

export function NewOrderForClientForm({ clients, defaultClientId }: { clients: ClientOption[]; defaultClientId?: string }) {
  const [state, formAction, pending] = useActionState(adminCreateOrderForClientAction, {});
  const router = useRouter();
  const [client, setClient] = useState<ClientOption | null>(clients.find((c) => c.id === defaultClientId) || null);

  useEffect(() => {
    if (state.orderId) router.push(`/de/admin/orders/${state.orderId}`);
  }, [state.orderId, router]);

  return (
    <form
      action={formAction}
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 flex flex-col gap-4 max-w-2xl"
    >
      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">
          Kunde
          <RequiredMark />
        </span>
        <ClientSearchField clients={clients} value={client} onChange={setClient} />
        <input type="hidden" name="clientId" value={client?.id || ""} />
      </label>
      <p className="text-xs text-[var(--rk-ink-muted)] -mt-2">
        Der Kunde braucht bereits ein Konto. Noch keins?{" "}
        <a href="/de/admin/clients" className="underline hover:text-[var(--rk-ink)]">
          Erst vor Ort anlegen
        </a>
        , dann hierher zurückkommen.
      </p>

      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">
          Art des Shootings
          <RequiredMark />
        </span>
        <select
          name="shootingType"
          required
          defaultValue=""
          className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3.5 py-2.5 text-[var(--rk-ink)] focus:outline-none focus:border-white/50"
        >
          <option value="" disabled>
            Bitte wählen
          </option>
          {SHOOTING_TYPES.map((t) => (
            <option key={t} value={t}>
              {t}
            </option>
          ))}
        </select>
      </label>

      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">
          Charakter / Idee
          <RequiredMark />
        </span>
        <input
          name="characterOrConcept"
          required
          className="bg-transparent border border-white/15 rounded-lg px-3.5 py-2.5 text-[var(--rk-ink)] focus:outline-none focus:border-white/50"
        />
      </label>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <label className="flex flex-col gap-1.5 text-sm">
          <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Ort / Event</span>
          <input
            name="eventLocation"
            className="bg-transparent border border-white/15 rounded-lg px-3.5 py-2.5 text-[var(--rk-ink)] focus:outline-none focus:border-white/50"
          />
        </label>
        <label className="flex flex-col gap-1.5 text-sm">
          <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Wunschtermin</span>
          <input
            name="datePeriod"
            type="date"
            className="bg-transparent border border-white/15 rounded-lg px-3.5 py-2.5 text-[var(--rk-ink)] focus:outline-none focus:border-white/50"
          />
        </label>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <label className="flex flex-col gap-1.5 text-sm">
          <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Instagram</span>
          <input
            name="instagramHandle"
            className="bg-transparent border border-white/15 rounded-lg px-3.5 py-2.5 text-[var(--rk-ink)] focus:outline-none focus:border-white/50"
          />
        </label>
        <label className="flex flex-col gap-1.5 text-sm">
          <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Discord</span>
          <input
            name="discordHandle"
            className="bg-transparent border border-white/15 rounded-lg px-3.5 py-2.5 text-[var(--rk-ink)] focus:outline-none focus:border-white/50"
          />
        </label>
      </div>

      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Idee & Stimmung</span>
        <textarea
          name="ideaMood"
          rows={3}
          className="bg-transparent border border-white/15 rounded-lg px-3.5 py-2.5 text-[var(--rk-ink)] focus:outline-none focus:border-white/50 resize-y"
        />
      </label>

      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Sonstige Anmerkungen</span>
        <textarea
          name="additionalNotes"
          rows={3}
          className="bg-transparent border border-white/15 rounded-lg px-3.5 py-2.5 text-[var(--rk-ink)] focus:outline-none focus:border-white/50 resize-y"
        />
      </label>

      {state.error && <p className="text-sm text-red-400">{state.error}</p>}

      <button
        type="submit"
        disabled={pending || !client}
        title={!client ? "Bitte zuerst einen Kunden auswählen" : undefined}
        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"
      >
        {pending ? "…" : "Auftrag anlegen"}
      </button>
    </form>
  );
}