"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { usePublicSession } from "@/components/shop/public-session-context";
import { useAuthModal } from "@/components/shop/auth-modal-context";
import DataService from "@/config/axios";

type ReviewRow = {
  _id: string;
  rating: number;
  title?: string;
  comment: string;
  status: string;
  createdAt?: string;
  product?: { title?: string; slug?: string } | null;
};

export default function AccountReviewsPage() {
  const { isAuthenticated, loading } = usePublicSession();
  const { openAuthModal } = useAuthModal();
  const [rows, setRows] = useState<ReviewRow[]>([]);
  const [busy, setBusy] = useState(false);

  const load = useCallback(async () => {
    if (!isAuthenticated) return;
    setBusy(true);
    try {
      const res = await DataService.get("/user/shop/reviews");
      setRows(res.data?.data || []);
    } catch {
      setRows([]);
    } finally {
      setBusy(false);
    }
  }, [isAuthenticated]);

  useEffect(() => {
    if (!loading && isAuthenticated) load();
  }, [loading, isAuthenticated, load]);

  if (loading) return <p className="text-gray-500">Loading…</p>;

  if (!isAuthenticated) {
    return (
      <div>
        <h1 className="text-2xl font-bold text-slate-900">Reviews</h1>
        <p className="mt-4 text-gray-600">Sign in to see your reviews.</p>
        <Button className="mt-4" type="button" onClick={() => openAuthModal("login")}>
          Log in
        </Button>
      </div>
    );
  }

  return (
    <div>
      <h1 className="text-2xl font-bold text-slate-900">My reviews</h1>
      <p className="mt-1 text-gray-600">Reviews you submitted on product pages.</p>
      {busy ? (
        <p className="mt-4 text-gray-500">Loading…</p>
      ) : rows.length === 0 ? (
        <p className="mt-4 text-gray-600">
          No reviews yet.{" "}
          <Link href="/products" className="text-primary hover:underline">
            Browse products
          </Link>
        </p>
      ) : (
        <ul className="mt-6 space-y-4">
          {rows.map((r) => (
            <li key={r._id} className="rounded-lg border bg-white p-4">
              <div className="flex flex-wrap items-baseline justify-between gap-2">
                <p className="font-semibold text-slate-900">
                  {r.product?.slug ? (
                    <Link href={`/products/${r.product.slug}`} className="hover:text-primary">
                      {r.product.title || "Product"}
                    </Link>
                  ) : (
                    r.product?.title || "Product"
                  )}
                </p>
                <p className="text-xs capitalize text-gray-500">{r.status}</p>
              </div>
              <p className="mt-1 text-sm text-amber-600">{"★".repeat(r.rating)}{"☆".repeat(5 - r.rating)}</p>
              {r.title ? <p className="mt-1 text-sm font-medium">{r.title}</p> : null}
              <p className="mt-1 text-sm text-gray-700">{r.comment}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}