"use client";

import { useState, useEffect, useCallback } from "react";
import { useTranslations } from "next-intl";
import axios from "axios";
import { Button, Tooltip, Spinner } from "@heroui/react";
import { Info, MessageSquare, Star } from "lucide-react";
import StarRow from "./StarRow";
import { BaseModal } from "@/components/modal";
import { AR_LOCALE_LATIN_DIGITS } from "@/lib/arDateFormat";
import { API_BASE_URL } from "@/lib/axios";

const API_URL = API_BASE_URL;
const PER_PAGE = 10;

/** Laravel `offerable_type` query value for GET /user/reviews */
export type ReviewOfferableType =
  | "auctions"
  | "single_auctions"
  | "offers";

export type SellerReviewsSectionProps = {
  offerableId: string;
  offerableType: ReviewOfferableType;
  sellerLabel?: string;
  summary?: { avg: number; count: number } | null;
};

interface ReviewItem {
  id?: string;
  rating: number;
  comment?: string | null;
  created_at?: string;
  buyer?: { id?: string; name?: string; avatar?: string };
  buyer_name?: string;
}

/** Raw paginator body: { data: ReviewItem[], meta } — no success/message wrapper */
function parseReviewsListResponse(body: unknown): {
  items: ReviewItem[];
  meta: {
    current_page?: number;
    last_page?: number;
    per_page?: number;
    total?: number;
  };
} {
  if (!body || typeof body !== "object") return { items: [], meta: {} };
  const o = body as Record<string, unknown>;
  const raw = o.data;
  const items = Array.isArray(raw) ? (raw as ReviewItem[]) : [];
  const meta =
    o.meta && typeof o.meta === "object"
      ? (o.meta as {
          current_page?: number;
          last_page?: number;
          per_page?: number;
          total?: number;
        })
      : {};
  return { items, meta };
}

function formatDate(dateStr: string | null | undefined, isAr: boolean): string {
  if (!dateStr) return "—";
  try {
    const d = new Date(dateStr);
    if (isNaN(d.getTime())) return dateStr;
    return d.toLocaleDateString(isAr ? AR_LOCALE_LATIN_DIGITS : "en-SA", {
      year: "numeric",
      month: "short",
      day: "numeric",
    });
  } catch {
    return dateStr;
  }
}

function getBuyerName(review: ReviewItem): string {
  if (review.buyer?.name) return review.buyer.name;
  if (review.buyer_name) return review.buyer_name;
  return "—";
}

function getBuyerAvatar(review: ReviewItem): string | null {
  const url = review.buyer?.avatar;
  if (typeof url === "string" && url.trim()) return url;
  return null;
}

export default function SellerReviewsSection({
  offerableId,
  offerableType,
  summary,
}: SellerReviewsSectionProps) {
  const t = useTranslations("REVIEWS_SECTION");
  const [reviews, setReviews] = useState<ReviewItem[]>([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);
  const [reviewsModalOpen, setReviewsModalOpen] = useState(false);
  const [howToReviewModalOpen, setHowToReviewModalOpen] = useState(false);
  const isAr =
    typeof window !== "undefined" &&
    !window.location.pathname.startsWith("/en");

  const fetchReviews = useCallback(
    async (pageNum: number, append: boolean) => {
      if (!offerableId?.trim()) return;
      setLoading(true);
      try {
        const res = await axios.get(`${API_URL}/user/reviews`, {
          params: {
            offerable_id: offerableId,
            offerable_type: offerableType,
            per_page: PER_PAGE,
            page: pageNum,
          },
          headers: { Accept: "application/json" },
        });
        const { items, meta } = parseReviewsListResponse(res?.data);
        const lastPage = meta.last_page ?? meta.current_page ?? pageNum;
        const currentPage = meta.current_page ?? pageNum;
        setHasMore(currentPage < lastPage);
        if (append) {
          setReviews((prev) => [...prev, ...items]);
        } else {
          setReviews(items);
        }
      } catch {
        setReviews([]);
        setHasMore(false);
      } finally {
        setLoading(false);
      }
    },
    [offerableId, offerableType],
  );

  useEffect(() => {
    if (offerableId?.trim()) {
      setPage(1);
      fetchReviews(1, false);
    } else {
      setReviews([]);
    }
  }, [offerableId, offerableType, fetchReviews]);

  const openReviewsModal = () => {
    setReviewsModalOpen(true);
    if (reviews.length === 0 && offerableId?.trim()) {
      setPage(1);
      fetchReviews(1, false);
    }
  };

  const loadMore = () => {
    const next = page + 1;
    setPage(next);
    fetchReviews(next, true);
  };

  const avg = summary?.avg ?? 0;
  const count = summary?.count ?? 0;
  const displayAvg = Number.isFinite(avg) ? avg.toFixed(1) : "0";
  const displayCount = Number.isFinite(count) ? count : 0;

  return (
    <div className="bg-white rounded-2xl p-5 shadow">
      <div className="flex items-center justify-between gap-2 mb-4">
        <h3 className="font-bold text-[#0F5132]">{t("title")}</h3>
        <Tooltip content={t("how_to_review_tooltip")} placement="top">
          <button
            type="button"
            onClick={() => setHowToReviewModalOpen(true)}
            className="p-1.5 rounded-full text-slate-500 hover:text-primary hover:bg-primary/10 transition-colors"
            aria-label={t("how_to_review_tooltip")}
          >
            <Info className="w-4 h-4" />
          </button>
        </Tooltip>
      </div>

      {/* Summary */}
      <div className="flex flex-wrap items-center gap-4 mb-4">
        <div className="flex items-center gap-2">
          <StarRow rating={avg} size="md" />
          <span className="font-bold text-slate-800">{displayAvg}</span>
        </div>
        <span className="text-sm text-slate-600">
          {t("count_label", { count: displayCount })}
        </span>
        {(displayCount > 0 || reviews.length > 0) && (
          <Button
            size="sm"
            variant="flat"
            className="min-w-0 h-7 px-2.5 text-xs"
            onPress={openReviewsModal}
            startContent={<MessageSquare className="w-3.5 h-3.5" />}
          >
            {t("show_reviews")}
          </Button>
        )}
      </div>

      {displayCount === 0 && !reviews.length && (
        <p className="text-sm text-slate-500 py-4">{t("no_reviews")}</p>
      )}

      {/* Reviews modal */}
      <BaseModal
        isOpen={reviewsModalOpen}
        onOpenChange={setReviewsModalOpen}
        title={t("title")}
        contentClassName="max-w-lg max-h-[85vh]"
        headerClassName="px-6 pt-6 sm:pt-7 pb-3 text-start"
        bodyClassName="px-6 pb-6 sm:pb-7 pt-1"
      >
        <div className="space-y-4">
          {loading && reviews.length === 0 ? (
            <div className="py-12 flex flex-col items-center justify-center gap-3">
              <Spinner size="lg" color="primary" />
              <p className="text-sm text-slate-500">{t("load_more")}...</p>
            </div>
          ) : reviews.length === 0 ? (
            <p className="text-sm text-slate-500 py-8 text-center">
              {t("no_reviews")}
            </p>
          ) : (
            <>
              <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-1">
                {reviews.map((r, idx) => (
                  <div
                    key={r.id ?? idx}
                    className="p-5 rounded-xl border border-slate-100 bg-slate-50/50 hover:bg-slate-50/80 transition-colors"
                  >
                    <div className="flex items-start gap-3">
                      {getBuyerAvatar(r) ? (
                        <img
                          src={getBuyerAvatar(r)!}
                          alt={getBuyerName(r)}
                          width={44}
                          height={44}
                          className="rounded-full object-cover flex-shrink-0 w-11 h-11"
                        />
                      ) : (
                        <div className="w-11 h-11 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 font-bold flex-shrink-0 text-base">
                          {getBuyerName(r).charAt(0) || "?"}
                        </div>
                      )}
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 flex-wrap">
                          <span className="font-semibold text-slate-800">
                            {getBuyerName(r)}
                          </span>
                          <StarRow rating={r.rating} size="sm" />
                        </div>
                        {r.comment && (
                          <p className="text-sm text-slate-600 mt-2 leading-relaxed">
                            {r.comment}
                          </p>
                        )}
                        {r.created_at && (
                          <p className="text-xs text-slate-500 mt-3 pt-0.5">
                            {formatDate(r.created_at, isAr)}
                          </p>
                        )}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              {hasMore && (
                <button
                  type="button"
                  onClick={loadMore}
                  disabled={loading}
                  className="w-full py-2.5 rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-700 hover:bg-slate-50 disabled:opacity-60 transition-colors"
                >
                  {loading ? "..." : t("load_more")}
                </button>
              )}
            </>
          )}
        </div>
      </BaseModal>

      {/* How to review popup */}
      <BaseModal
        isOpen={howToReviewModalOpen}
        onOpenChange={setHowToReviewModalOpen}
        title={t("how_to_review_tooltip")}
        contentClassName="max-w-md"
        headerClassName="px-6 pt-6 sm:pt-7 pb-3 text-start"
        bodyClassName="px-6 pb-6 sm:pb-7 pt-1"
      >
        <div
          className="flex gap-5 p-5 sm:p-6 rounded-2xl bg-gradient-to-br from-emerald-50 to-teal-50/50 border border-emerald-100"
          dir={isAr ? "rtl" : "ltr"}
        >
          <div className="flex-shrink-0 w-12 h-12 rounded-full bg-[#0F5132]/10 flex items-center justify-center">
            <Star className="w-6 h-6 text-[#0F5132]" />
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-slate-700 leading-relaxed text-sm">
              {t("how_to_review_content")}
            </p>
          </div>
        </div>
      </BaseModal>
    </div>
  );
}