"use client";

import { useActionState, useState } from "react";
import { createQuickReviewAction } from "@/lib/actions/quickReviews";
import { shortDisplayName } from "@/lib/formatName";

export function NewQuickReviewForm() {
  const [state, formAction, pending] = useActionState(createQuickReviewAction, {});
  const [rating, setRating] = useState(5);
  const [name, setName] = useState("");

  return (
    <form
      action={formAction}
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 flex flex-col gap-3 mb-8"
    >
      <input type="hidden" name="rating" value={rating} />
      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Voller Name</span>
        <input
          name="authorName"
          placeholder="z. B. Till Kuhlmann"
          required
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
        {name.trim() && (
          <span className="text-xs text-[var(--rk-ink-muted)]">
            Erscheint auf der Startseite als „{shortDisplayName(name)}"
          </span>
        )}
      </label>
      <div>
        <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-1.5">Sternebewertung</p>
        <div className="flex gap-1">
          {[1, 2, 3, 4, 5].map((n) => (
            <button
              key={n}
              type="button"
              onClick={() => setRating(n)}
              aria-label={`${n} Sterne`}
              className="text-2xl leading-none"
              style={{ color: n <= rating ? "#f5c518" : "var(--rk-ink-muted)" }}
            >
              ★
            </button>
          ))}
        </div>
      </div>
      <label className="flex items-center gap-2 text-sm">
        <input type="checkbox" name="visible" defaultChecked className="h-3.5 w-3.5" />
        Sofort sichtbar auf der Startseite
      </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"
      >
        Kurzbewertung anlegen
      </button>
      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
    </form>
  );
}