"use client";

import { useEffect, useState } from "react";
import { useActionState } from "react";
import { useRouter } from "next/navigation";
import { adminCreateClientAction } from "@/lib/actions/clientAccounts";

export function NewClientForm() {
  const [open, setOpen] = useState(false);
  const [state, formAction, pending] = useActionState(adminCreateClientAction, {});
  const router = useRouter();

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

  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="mb-6 text-xs border border-white/30 rounded-lg px-3.5 py-1.5 hover:border-white transition-colors"
      >
        + Neuer Kunde
      </button>
    );
  }

  return (
    <form
      action={formAction}
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 mb-6 flex flex-col gap-3"
    >
      <div className="flex items-center justify-between">
        <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">
          Neues Kundenkonto anlegen (vor Ort)
        </p>
        <button
          type="button"
          onClick={() => setOpen(false)}
          className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] transition-colors"
        >
          Abbrechen
        </button>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <ClientField label="Vorname" name="firstName" type="text" required />
        <ClientField label="Nachname" name="lastName" type="text" required />
      </div>
      <ClientField label="Spitzname (optional)" name="nickname" type="text" />
      <ClientField label="Geburtsdatum" name="birthDate" type="date" required />
      <ClientField label="Telefonnummer" name="phone" type="tel" required />
      <div className="flex flex-col gap-3">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Anschrift</span>
        <ClientField label="Straße & Hausnummer" name="billingStreet" type="text" required />
        <div className="grid grid-cols-[8rem_1fr] gap-4">
          <ClientField label="PLZ" name="billingPostCode" type="text" required />
          <ClientField label="Ort" name="billingCity" type="text" required />
        </div>
        <ClientField label="Land (Ländercode, z. B. DE)" name="billingCountryCode" type="text" defaultValue="DE" />
      </div>
      <ClientField label="E-Mail" name="email" type="email" required />
      <ClientField label="Passwort (mind. 8 Zeichen)" name="password" type="password" required minLength={8} />
      <p className="text-xs text-[var(--rk-ink-muted)]">
        Übergangspasswort, am besten etwas Einfaches, das direkt mündlich mitgegeben werden kann — muss beim
        ersten Login zwingend geändert werden.
      </p>

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

      <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 transition-colors"
      >
        {pending ? "…" : "Konto anlegen"}
      </button>
    </form>
  );
}

function ClientField({
  label,
  name,
  type,
  required,
  minLength,
  defaultValue,
}: {
  label: string;
  name: string;
  type: string;
  required?: boolean;
  minLength?: number;
  defaultValue?: string;
}) {
  return (
    <label className="flex flex-col gap-1.5 text-sm">
      <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">{label}</span>
      <input
        name={name}
        type={type}
        required={required}
        minLength={minLength}
        defaultValue={defaultValue}
        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 transition-colors"
      />
    </label>
  );
}