"use client";

import { useActionState } from "react";
import { addTierAction } from "@/lib/actions/services";
import { Input, TextArea } from "@/components/admin/EditServiceForm";
import { TierExtrasFields } from "@/components/admin/TierExtrasFields";

export function NewTierForm({ serviceId }: { serviceId: string }) {
  const [state, formAction, pending] = useActionState(addTierAction, {});

  return (
    <form action={formAction} className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 flex flex-col gap-3">
      <input type="hidden" name="serviceId" value={serviceId} />
      <p className="text-sm font-medium">Neue Preisstufe</p>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <Input name="name" label="Name (DE), z. B. „Standard“" required />
        <Input name="nameEn" label="Name (EN)" />
      </div>
      <div className="flex items-end gap-3">
        <label className="flex flex-col gap-1 text-sm">
          <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">Preis in €</span>
          <input
            name="price"
            type="number"
            min="0"
            step="1"
            required
            className="w-28 bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
          />
        </label>
        <label className="flex items-center gap-2 text-sm pb-2.5">
          <input type="checkbox" name="priceFrom" defaultChecked className="h-3.5 w-3.5" />
          „ab“-Preis (nicht Festpreis)
        </label>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <TextArea name="deliverables" label="Leistungen (DE), z. B. „ca. 2 Std · 20 Bilder“" />
        <TextArea name="deliverablesEn" label="Leistungen (EN)" />
      </div>
      <TierExtrasFields />
      {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"
      >
        Preisstufe hinzufügen
      </button>
    </form>
  );
}