"use client";

import { useActionState } from "react";
import { createServiceAction } from "@/lib/actions/services";
import { SHOOTING_TYPES } from "@/lib/orderConstants";

export function NewServiceForm() {
  const [state, formAction, pending] = useActionState(createServiceAction, {});

  return (
    <form action={formAction} className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 flex flex-col gap-3">
      <p className="text-sm font-medium text-[var(--rk-ink)]">Neues Angebot</p>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <Input name="title" label="Titel (DE)" required />
        <Input name="titleEn" label="Titel (EN)" />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <TextArea name="description" label="Beschreibung (DE)" />
        <TextArea name="descriptionEn" label="Beschreibung (EN)" />
      </div>
      <label className="flex flex-col gap-1 text-sm max-w-xs">
        <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">Auftragsart-Vorbelegung</span>
        <select name="shootingType" className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2">
          {SHOOTING_TYPES.map((t) => (
            <option key={t} value={t}>{t}</option>
          ))}
        </select>
      </label>
      <p className="text-xs text-[var(--rk-ink-muted)]">Preisstufen fügst du danach auf der Bearbeiten-Seite des Angebots hinzu.</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"
      >
        Anlegen
      </button>
    </form>
  );
}

function Input({ name, label, required }: { name: string; label: string; required?: boolean }) {
  return (
    <label className="flex flex-col gap-1 text-sm">
      <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">{label}</span>
      <input name={name} required={required} className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50" />
    </label>
  );
}

function TextArea({ name, label }: { name: string; label: string }) {
  return (
    <label className="flex flex-col gap-1 text-sm">
      <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">{label}</span>
      <textarea name={name} rows={2} className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50" />
    </label>
  );
}