"use client";

import { useState, type FormEvent } from "react";
import type { ProductReviewSummary } from "@/lib/sanity/queries";

type Props = {
  productId: string;
  summary: ProductReviewSummary;
};

function Stars({ rating }: { rating: number }) {
  return (
    <span aria-hidden="true" className="text-[var(--accent)]">
      {"★".repeat(Math.round(rating))}
      <span className="text-[var(--line)]">{"★".repeat(5 - Math.round(rating))}</span>
    </span>
  );
}

function formatDate(iso: string) {
  try {
    return new Date(iso).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" });
  } catch {
    return "";
  }
}

export function ProductReviews({ productId, summary }: Props) {
  const [isFormOpen, setIsFormOpen] = useState(false);
  const [status, setStatus] = useState<"idle" | "submitting" | "error">("idle");
  const [rating, setRating] = useState<number | "">("");
  const [justSubmitted, setJustSubmitted] = useState(false);

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (!rating) {
      setStatus("error");
      return;
    }

    const form = event.currentTarget;
    const formData = new FormData(form);
    setStatus("submitting");

    try {
      const response = await fetch("/api/reviews", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          productId,
          rating,
          authorName: formData.get("authorName"),
          authorEmail: formData.get("authorEmail"),
          title: formData.get("title"),
          body: formData.get("body"),
        }),
      });

      if (!response.ok) {
        throw new Error("request_failed");
      }

      form.reset();
      setRating("");
      setStatus("idle");
      setIsFormOpen(false);
      setJustSubmitted(true);
    } catch {
      setStatus("error");
    }
  };

  return (
    <section className="space-y-5 border-t border-[var(--line)] pt-8">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="space-y-1">
          <h2 className="font-serif text-3xl text-[var(--foreground)]">Avis clients</h2>
          {summary.count > 0 ? (
            <p className="flex items-center gap-2 text-sm text-[var(--muted)]">
              <Stars rating={summary.averageRating || 0} />
              <span>
                {summary.averageRating?.toFixed(1)} / 5 ({summary.count} avis)
              </span>
            </p>
          ) : (
            <p className="text-sm text-[var(--muted)]">Aucun avis pour le moment.</p>
          )}
        </div>
        <button
          type="button"
          onClick={() => {
            setJustSubmitted(false);
            setIsFormOpen((open) => !open);
          }}
          className="inline-flex items-center justify-center rounded-xl border border-[var(--accent-3)] px-4 py-2.5 text-sm font-semibold text-[var(--accent-3)] hover:bg-[#fff6f6]"
        >
          {isFormOpen ? "Annuler" : "Laisser un avis"}
        </button>
      </div>

      {justSubmitted ? (
        <p className="rounded-2xl border border-[#cfe9df] bg-[#f7fdf9] px-4 py-3 text-sm text-[#24513d]">
          Merci ! Votre avis sera visible après modération.
        </p>
      ) : null}

      {isFormOpen ? (
        <form onSubmit={handleSubmit} className="space-y-4 rounded-2xl border border-[var(--line)] bg-[var(--surface)] p-5">
          <label className="block space-y-1.5 text-sm">
            <span className="font-medium text-[var(--foreground)]">Note</span>
            <select
              name="rating"
              required
              value={rating}
              onChange={(event) => setRating(event.target.value ? Number(event.target.value) : "")}
              className="h-11 w-full max-w-[10rem] rounded-xl border border-[var(--line)] bg-white px-3 outline-none focus:border-[var(--accent)]"
            >
              <option value="" disabled>
                Choisir...
              </option>
              {[5, 4, 3, 2, 1].map((value) => (
                <option key={value} value={value}>
                  {value} / 5
                </option>
              ))}
            </select>
          </label>
          <div className="grid gap-4 sm:grid-cols-2">
            <label className="block space-y-1.5 text-sm">
              <span className="font-medium text-[var(--foreground)]">Votre nom</span>
              <input
                name="authorName"
                type="text"
                required
                maxLength={80}
                className="h-11 w-full rounded-xl border border-[var(--line)] bg-white px-3 outline-none focus:border-[var(--accent)]"
              />
            </label>
            <label className="block space-y-1.5 text-sm">
              <span className="font-medium text-[var(--foreground)]">Email (non affiché)</span>
              <input
                name="authorEmail"
                type="email"
                className="h-11 w-full rounded-xl border border-[var(--line)] bg-white px-3 outline-none focus:border-[var(--accent)]"
              />
            </label>
          </div>
          <label className="block space-y-1.5 text-sm">
            <span className="font-medium text-[var(--foreground)]">Titre (optionnel)</span>
            <input
              name="title"
              type="text"
              maxLength={120}
              className="h-11 w-full rounded-xl border border-[var(--line)] bg-white px-3 outline-none focus:border-[var(--accent)]"
            />
          </label>
          <label className="block space-y-1.5 text-sm">
            <span className="font-medium text-[var(--foreground)]">Votre avis</span>
            <textarea
              name="body"
              required
              maxLength={2000}
              rows={4}
              className="w-full rounded-xl border border-[var(--line)] bg-white px-3 py-2 outline-none focus:border-[var(--accent)]"
            />
          </label>

          {status === "error" ? (
            <p className="text-sm text-[var(--accent)]">
              {rating ? "Une erreur est survenue, réessayez plus tard." : "Choisissez une note avant d'envoyer votre avis."}
            </p>
          ) : null}

          <button
            type="submit"
            disabled={status === "submitting"}
            className="inline-flex items-center justify-center rounded-xl bg-[var(--accent)] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[var(--accent-2)] disabled:cursor-not-allowed disabled:opacity-60"
          >
            {status === "submitting" ? "Envoi..." : "Envoyer mon avis"}
          </button>
        </form>
      ) : null}

      {summary.reviews.length > 0 ? (
        <div className="space-y-4">
          {summary.reviews.map((review) => (
            <article key={review._id} className="space-y-1.5 rounded-2xl border border-[var(--line)] bg-white p-4">
              <div className="flex items-center justify-between gap-3">
                <Stars rating={review.rating} />
                <span className="text-xs text-[var(--muted)]">{formatDate(review.createdAt)}</span>
              </div>
              {review.title ? <p className="font-semibold text-[var(--foreground)]">{review.title}</p> : null}
              <p className="text-sm text-[var(--muted)]">{review.body}</p>
              <p className="text-xs font-semibold uppercase tracking-[0.1em] text-[var(--accent-3)]">{review.authorName}</p>
            </article>
          ))}
        </div>
      ) : null}
    </section>
  );
}