"use client";

import { useActionState, useState } from "react";
import { submitFeedbackAction } from "@/lib/actions/feedback";

export function FeedbackForm({
  token,
  locale,
  labels,
}: {
  token: string;
  locale: string;
  labels: {
    ratingLabel: string;
    starUnitLabel: string;
    commentLabel: string;
    commentRewardHint: string;
    allowTestimonialLabel: string;
    submit: string;
    success: string;
    rewardCodeIntro: string;
  };
}) {
  const [state, formAction, pending] = useActionState(submitFeedbackAction, {});
  const [rating, setRating] = useState(0);
  const [hovered, setHovered] = useState(0);

  if (state.success) {
    return (
      <div>
        <p className="text-sm text-emerald-400">{labels.success}</p>
        {state.rewardCode && (
          <p className="mt-4 text-sm text-[var(--rk-ink-muted)]">
            {labels.rewardCodeIntro}{" "}
            <span className="font-mono text-[var(--rk-ink)] border border-white/15 rounded-lg px-2.5 py-1">
              {state.rewardCode}
            </span>
          </p>
        )}
      </div>
    );
  }

  return (
    <form action={formAction} className="flex flex-col gap-5">
      <input type="hidden" name="token" value={token} />
      <input type="hidden" name="locale" value={locale} />
      <input type="hidden" name="rating" value={rating} />

      <div>
        <p className="text-xs uppercase tracking-[0.15em] text-[var(--rk-ink-muted)] mb-2">{labels.ratingLabel}</p>
        <div className="flex gap-1.5">
          {[1, 2, 3, 4, 5].map((n) => (
            <button
              key={n}
              type="button"
              onClick={() => setRating(n)}
              onMouseEnter={() => setHovered(n)}
              onMouseLeave={() => setHovered(0)}
              aria-label={`${n} ${labels.starUnitLabel}`}
              className="text-3xl leading-none transition-transform hover:scale-110"
              style={{ color: n <= (hovered || rating) ? "#f5c518" : "var(--rk-ink-muted)" }}
            >
              ★
            </button>
          ))}
        </div>
      </div>

      <label className="flex flex-col gap-1.5 text-xs">
        <span className="text-[var(--rk-ink-muted)]">{labels.commentLabel}</span>
        <textarea
          name="comment"
          rows={4}
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
        <span className="text-[var(--rk-ink-muted)] opacity-80">{labels.commentRewardHint}</span>
      </label>

      <label className="flex items-start gap-2 text-xs text-[var(--rk-ink-muted)]">
        <input type="checkbox" name="allowTestimonial" className="h-3.5 w-3.5 mt-0.5" />
        {labels.allowTestimonialLabel}
      </label>

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

      <button
        type="submit"
        disabled={pending || rating === 0}
        className="self-start border border-white/30 rounded-lg px-5 py-2.5 text-xs uppercase tracking-[0.2em] hover:border-white hover:bg-white/5 transition-colors disabled:opacity-40"
      >
        {labels.submit}
      </button>
    </form>
  );
}