"use client";

import { useActionState, useState } from "react";
import { createTestimonialAction } from "@/lib/actions/testimonials";

export function NewTestimonialForm({ defaultSource = "manual" }: { defaultSource?: "manual" | "google" }) {
  const [state, formAction, pending] = useActionState(createTestimonialAction, {});
  const [source, setSource] = useState<"manual" | "google">(defaultSource);
  const [rating, setRating] = useState(5);

  return (
    <form
      action={formAction}
      encType="multipart/form-data"
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 flex flex-col gap-3 mb-8"
    >
      <input type="hidden" name="source" value={source} />
      {source === "google" && <input type="hidden" name="rating" value={rating} />}

      <div className="flex gap-1.5 mb-1">
        {(["manual", "google"] as const).map((s) => (
          <button
            key={s}
            type="button"
            onClick={() => setSource(s)}
            className={`text-xs uppercase tracking-[0.1em] rounded-full px-3.5 py-1.5 transition-colors ${
              source === s ? "bg-white/10 text-[var(--rk-ink)]" : "text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)]"
            }`}
          >
            {s === "manual" ? "Eigene Kundenstimme" : "Google-Bewertung"}
          </button>
        ))}
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <input
          name="authorName"
          placeholder="Name/Handle (z. B. Zoneks)"
          required
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
        <input
          name="realName"
          placeholder={'Echter Name (optional, steht davor: Max „Zoneks")'}
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
      </div>
      <input
        name="context"
        placeholder="Kontext, z. B. Cosplay Shooting (optional)"
        className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
      />
      <textarea
        name="quote"
        placeholder={source === "google" ? "Text der Google-Bewertung" : "Zitat (Deutsch)"}
        required
        rows={3}
        className="bg-transparent border border-white/15 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-white/50 resize-y"
      />
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <textarea
          name="quoteEn"
          placeholder="Zitat (Englisch, optional)"
          rows={3}
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-white/50 resize-y"
        />
        <input
          name="contextEn"
          placeholder="Kontext (Englisch, optional)"
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50 h-fit"
        />
      </div>

      {source === "google" ? (
        <div className="flex flex-col gap-3">
          <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>
          <input
            name="reviewUrl"
            placeholder="Link zur echten Google-Bewertung (optional, für Nachprüfbarkeit)"
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </div>
      ) : (
        <label className="flex flex-col gap-1.5 text-sm">
          <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Rundes Profilbild (optional)</span>
          <input name="image" type="file" accept="image/jpeg,image/png,image/webp" className="text-sm" />
          <span className="text-xs text-[var(--rk-ink-muted)]">
            Am besten ein Bild der Kundin/des Kunden selbst oder eines der beim Shooting entstandenen Fotos.
          </span>
        </label>
      )}

      <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"
      >
        {source === "google" ? "Google-Bewertung übernehmen" : "Kundenstimme anlegen"}
      </button>
      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
    </form>
  );
}