"use client";

import { useActionState, useState } from "react";
import { Star } from "lucide-react";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Button } from "@/components/ui/Button";
import { submitReview, type ReviewFormState } from "@/lib/actions/reviews";
import type { Dictionary } from "@/content/types";
import type { Review } from "@/generated/prisma/client";

const initialState: ReviewFormState = { status: "idle" };

export function ReviewsSection({ dict, reviews }: { dict: Dictionary; reviews: Review[] }) {
  const [state, formAction, pending] = useActionState(submitReview, initialState);
  const [rating, setRating] = useState(5);

  return (
    <section className="mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8">
      <SectionHeading title={dict.reviews.title} subtitle={dict.reviews.subtitle} />

      {reviews.length === 0 ? (
        <p className="mt-16 text-center text-charcoal-400">{dict.reviews.emptyState}</p>
      ) : (
        <div className="mt-16 grid gap-6 lg:grid-cols-3">
          {reviews.map((review) => (
            <figure
              key={review.id}
              className="flex flex-col gap-4 rounded-2xl border border-charcoal-950/5 bg-white p-8 shadow-sm shadow-charcoal-950/5"
            >
              <div className="flex gap-1 text-gold-500">
                {Array.from({ length: 5 }).map((_, i) => (
                  <Star key={i} size={16} fill={i < review.rating ? "currentColor" : "none"} />
                ))}
              </div>
              <blockquote className="flex-1 text-charcoal-700">&ldquo;{review.quote}&rdquo;</blockquote>
              <figcaption className="text-sm font-semibold text-charcoal-400">
                {review.authorName}
              </figcaption>
            </figure>
          ))}
        </div>
      )}

      <div className="mx-auto mt-16 max-w-xl rounded-2xl border border-charcoal-950/5 bg-charcoal-50/40 p-8">
        <h3 className="text-lg font-semibold text-charcoal-950">{dict.reviews.formTitle}</h3>

        {state.status === "success" ? (
          <p className="mt-4 rounded-xl bg-white p-4 text-center text-charcoal-700">
            {dict.reviews.success}
          </p>
        ) : (
          <form action={formAction} className="mt-6 flex flex-col gap-4">
            <div className="flex flex-col gap-1.5">
              <label className="text-xs font-semibold uppercase tracking-wide text-charcoal-400">
                {dict.reviews.fields.name}
              </label>
              <input
                name="authorName"
                type="text"
                required
                maxLength={80}
                className="w-full min-w-0 rounded-xl border border-charcoal-950/10 bg-white px-4 py-3 text-sm text-charcoal-950 focus:border-gold-500 focus:outline-none"
              />
            </div>

            <div className="flex flex-col gap-1.5">
              <label className="text-xs font-semibold uppercase tracking-wide text-charcoal-400">
                {dict.reviews.fields.rating}
              </label>
              <input type="hidden" name="rating" value={rating} />
              <div className="flex gap-1">
                {Array.from({ length: 5 }).map((_, i) => {
                  const value = i + 1;
                  return (
                    <button
                      key={value}
                      type="button"
                      onClick={() => setRating(value)}
                      aria-label={`${value} star`}
                      className="text-gold-500"
                    >
                      <Star size={24} fill={value <= rating ? "currentColor" : "none"} />
                    </button>
                  );
                })}
              </div>
            </div>

            <div className="flex flex-col gap-1.5">
              <label className="text-xs font-semibold uppercase tracking-wide text-charcoal-400">
                {dict.reviews.fields.quote}
              </label>
              <textarea
                name="quote"
                required
                minLength={10}
                maxLength={600}
                rows={4}
                className="w-full min-w-0 rounded-xl border border-charcoal-950/10 bg-white px-4 py-3 text-sm text-charcoal-950 focus:border-gold-500 focus:outline-none"
              />
            </div>

            {state.status === "error" ? (
              <p className="text-sm text-red-600">{state.message ?? dict.reviews.error}</p>
            ) : null}

            <Button type="submit" disabled={pending} className="w-full sm:w-auto">
              {pending ? dict.reviews.submitting : dict.reviews.submit}
            </Button>
          </form>
        )}
      </div>
    </section>
  );
}