"use client";

import { useManager } from "@/lib/manager-context";
import { useEffect, useState } from "react";

import type { ReviewEntity } from "./Manager.types";

interface FetchState {
  reviews: ReviewEntity[];
  loading: boolean;
  error: string | null;
}

function StarRating({ rating }: { rating: number }) {
  return (
    <div className="flex gap-0.5">
      {[1, 2, 3, 4, 5].map((star) => (
        <i
          key={star}
          className={
            star <= rating
              ? "fa-solid fa-star text-sm text-yellow-400"
              : "fa-regular fa-star text-sm text-(--color-border)"
          }
        />
      ))}
    </div>
  );
}

export default function ReviewsTab() {
  const { eateryId } = useManager();
  const [{ reviews, loading, error }, setState] = useState<FetchState>({
    reviews: [],
    loading: true,
    error: null,
  });

  useEffect(() => {
    if (!eateryId) return;

    const controller = new AbortController();

    fetch(`/api/eatery/review/${eateryId}`, { signal: controller.signal })
      .then((res) => {
        if (!res.ok) throw new Error(`Failed to load reviews: ${res.status}`);
        return res.json() as Promise<ReviewEntity[]>;
      })
      .then((data) => setState({ reviews: data, loading: false, error: null }))
      .catch((err: unknown) => {
        if (err instanceof Error && err.name === "AbortError") return;
        setState({
          reviews: [],
          loading: false,
          error: err instanceof Error ? err.message : "Failed to load reviews.",
        });
      });

    return () => controller.abort();
  }, [eateryId]);

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20 text-(--color-text-muted)">
        <i className="fa-solid fa-spinner fa-spin mr-2"></i>
        Loading reviews...
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-center justify-center py-20 text-red-500">
        <i className="fa-solid fa-triangle-exclamation mr-2"></i>
        {error}
      </div>
    );
  }

  if (reviews.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-20 text-center text-(--color-text-muted)">
        <i className="fa-regular fa-star mb-3 text-4xl"></i>
        <p className="text-sm font-medium">No reviews yet</p>
        <p className="mt-1 text-xs">Reviews from customers will appear here.</p>
      </div>
    );
  }

  const avgRating =
    reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length;

  const CustomerName = ({ customerId }: { customerId: string }) => {
    const [name, setName] = useState("");
    const [loading, setLoading] = useState(true);

    useEffect(() => {
      // Hàm gọi API
      const getName = async () => {
        try {
          setLoading(true);

          const response = await fetch(`/api/customer/${customerId}`);

          if (!response.ok) {
            throw new Error("Mạng lỗi hoặc không tìm thấy nhân viên");
          }

          const data = await response.json();

          setName(data["name"]);
        } catch (error) {
          console.error("Lỗi khi lấy tên:", error);
          setName("Lỗi tải tên");
        } finally {
          setLoading(false);
        }
      };

      if (customerId) {
        getName();
      }
    }, [customerId]); // Chạy lại nếu customerId thay đổi

    if (loading)
      return <span className="animate-pulse text-gray-400">...</span>;

    return <span>{name || "N/A"}</span>;
  };

  return (
    <div className="space-y-4">
      {/* Summary header */}
      <div className="flex items-center gap-4 rounded-2xl border border-(--color-border-light) bg-white p-5">
        <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-(--color-accent-light)">
          <i className="fa-solid fa-star text-2xl text-yellow-400"></i>
        </div>
        <div>
          <p className="text-foreground text-2xl font-bold">
            {avgRating.toFixed(1)}
            <span className="ml-1 text-sm font-normal text-(--color-text-muted)">
              / 5
            </span>
          </p>
          <StarRating rating={Math.round(avgRating)} />
          <p className="mt-0.5 text-xs text-(--color-text-muted)">
            {reviews.length} review{reviews.length !== 1 ? "s" : ""}
          </p>
        </div>
      </div>

      {/* Review list */}
      <div className="space-y-3">
        {reviews.map((review, idx) => (
          <div
            key={review.id ?? idx}
            className="rounded-2xl border border-(--color-border-light) bg-white p-4"
          >
            <div className="mb-2 flex items-start justify-between gap-3">
              <div className="flex items-center gap-2">
                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-(--color-accent-light)">
                  <i className="fa-solid fa-user text-xs text-(--color-primary)"></i>
                </div>
                <span className="text-sm font-medium text-(--color-text-secondary)">
                  <CustomerName customerId={review.reviewerId!} />
                </span>
              </div>
              <div className="flex shrink-0 flex-col items-end gap-1">
                <StarRating rating={review.rating} />
                {review.createdAt && (
                  <span className="text-xs text-(--color-text-muted)">
                    {new Date(review.createdAt).toLocaleDateString("vi-VN")}
                  </span>
                )}
              </div>
            </div>

            {review.comment ? (
              <p className="text-sm leading-relaxed text-(--color-text-secondary)">
                {review.comment}
              </p>
            ) : (
              <p className="text-sm text-(--color-text-muted) italic">
                No comment provided.
              </p>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}