"use client";

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useLocale, useTranslations } from "next-intl";
import { useSetAtom } from "jotai";
import { useSession } from "@/auth/session-provider";
import { loginModalAtom } from "@/components/state/loginAtom";
import {
  fetchPublicReviews,
  submitPublicReview,
  type PublicReviewItem,
  type ReviewableType,
} from "@/lib/publicReviewsApi";
import { formatRatingLabel, parseServiceRating } from "@/lib/serviceRating";
import { ServiceStarRow, ServiceStarRatingInput } from "./ServiceRatingStars";
import {
  Button,
  Textarea,
  Modal,
  ModalContent,
  ModalHeader,
  ModalBody,
} from "@heroui/react";
import { useCallback, useState, useEffect } from "react";
import { toast } from "react-toastify";

type Props = {
  isActive: boolean;
  reviewableId: string | null | undefined;
  reviewableType: ReviewableType | null | undefined;
};

export default function ServiceDetailReviewsSection({
  isActive,
  reviewableId,
  reviewableType,
}: Props) {
  const t = useTranslations("SERVICE_DETAIL_MODAL");
  const locale = useLocale();
  const lang = locale || "ar";
  const session = useSession();
  const token = session?.access_token ?? null;
  const queryClient = useQueryClient();
  const setLoginOpen = useSetAtom(loginModalAtom);

  const id = reviewableId != null ? String(reviewableId).trim() : "";
  const typeOk =
    reviewableType === "medical_service" ||
    reviewableType === "transport_service" ||
    reviewableType === "product";

  const sectionEnabled = Boolean(isActive && id && typeOk);
  const [reviewsListOpen, setReviewsListOpen] = useState(false);
  const [draftRating, setDraftRating] = useState(5);
  const [draftComment, setDraftComment] = useState("");

  useEffect(() => {
    if (!isActive) {
      setDraftRating(5);
      setDraftComment("");
      setReviewsListOpen(false);
    }
  }, [isActive]);

  const listQueryEnabled = Boolean(sectionEnabled && reviewsListOpen);

  const { data, isLoading, isError } = useQuery({
    queryKey: ["public-reviews", id, reviewableType, lang],
    queryFn: () =>
      fetchPublicReviews({
        reviewable_id: id,
        reviewable_type: reviewableType as ReviewableType,
        per_page: 20,
        token: token ?? undefined,
        lang,
      }),
    enabled: listQueryEnabled,
    staleTime: 60_000,
  });

  const reviews = data ?? [];

  const invalidate = useCallback(() => {
    queryClient.invalidateQueries({
      queryKey: ["public-reviews", id, reviewableType, lang],
    });
  }, [queryClient, id, reviewableType, lang]);

  const mutation = useMutation({
    mutationFn: async () => {
      if (!token || !typeOk) throw new Error("auth");
      await submitPublicReview({
        reviewable_id: id,
        reviewable_type: reviewableType as ReviewableType,
        rating: draftRating,
        comment: draftComment,
        token,
        lang,
      });
    },
    onSuccess: () => {
      toast.success(t("review_submit_success"));
      setDraftComment("");
      invalidate();
    },
    onError: () => {
      toast.error(t("review_submit_error"));
    },
  });

  if (!sectionEnabled) return null;

  return (
    <>
      <div
        className="border-t border-slate-100 px-4 py-3 mt-3 space-y-3"
        dir="rtl"
      >
        <div className="flex flex-wrap items-center justify-between gap-2">
          <h3 className="text-sm font-bold text-slate-800">
            {t("review_submit_section_title")}
          </h3>
          <Button
            type="button"
            size="sm"
            variant="bordered"
            className="shrink-0 border-[#1B7A50] text-[#1B7A50] font-semibold"
            onPress={() => setReviewsListOpen(true)}
          >
            {t("reviews_open_list")}
          </Button>
        </div>

        <div className="rounded-xl border border-slate-100 bg-white p-3 space-y-2">
          <p className="text-xs font-semibold text-slate-600">
            {t("review_your_rating")}
          </p>
          {!token ? (
            <p className="text-sm text-slate-600 leading-relaxed">
              {t("login_to_review")}
              <button
                type="button"
                onClick={() => setLoginOpen(true)}
                className="mr-1 font-bold text-[#1B7A50] hover:underline"
              >
                {t("login_cta")}
              </button>
            </p>
          ) : (
            <>
              <ServiceStarRatingInput
                value={draftRating}
                onChange={setDraftRating}
                starAriaLabel={(n) => t("review_star_aria", { n })}
              />
              <Textarea
                size="sm"
                minRows={2}
                placeholder={t("review_comment_placeholder")}
                value={draftComment}
                onChange={(e) => setDraftComment(e.target.value)}
                classNames={{ inputWrapper: "bg-slate-50" }}
              />
              <Button
                size="sm"
                className="w-full bg-[#1B7A50] text-white font-bold"
                isLoading={mutation.isPending}
                onPress={() => mutation.mutate()}
              >
                {t("review_submit")}
              </Button>
            </>
          )}
        </div>
      </div>

      <Modal
        isOpen={reviewsListOpen}
        onOpenChange={setReviewsListOpen}
        size="md"
        scrollBehavior="inside"
        backdrop="blur"
        placement="center"
        classNames={{
          base: "max-h-[85vh] max-w-lg mx-4 sm:mx-auto",
          wrapper: "items-center px-0",
          backdrop: "bg-black/40 backdrop-blur-sm",
        }}
      >
        <ModalContent className="rounded-2xl border border-slate-200/90" dir="rtl">
          <ModalHeader className="flex flex-col gap-1 border-b border-slate-100 pb-3 text-right">
            {t("reviews_list_modal_title")}
          </ModalHeader>
          <ModalBody className="py-4">
            {isLoading ? (
              <p className="text-sm text-slate-500 py-2">
                {t("reviews_loading")}
              </p>
            ) : isError ? (
              <p className="text-sm text-rose-600 py-2">
                {t("reviews_error")}
              </p>
            ) : reviews.length === 0 ? (
              <p className="text-sm text-slate-500 py-1">
                {t("reviews_empty")}
              </p>
            ) : (
              <ul className="max-h-[min(50vh,22rem)] space-y-3 overflow-y-auto pr-0.5">
                {reviews.map((r: PublicReviewItem, idx: number) => {
                  const n = parseServiceRating(r.rating);
                  return (
                    <li
                      key={`${r.date}-${r.reviewer}-${idx}`}
                      className="rounded-lg bg-slate-50/90 px-3 py-2 text-sm"
                    >
                      <div className="flex flex-wrap items-center justify-between gap-2">
                        <span className="font-semibold text-slate-800">
                          {r.reviewer}
                        </span>
                        {n != null ? (
                          <span className="flex items-center gap-1 text-xs text-amber-700">
                            <ServiceStarRow value={n} />
                            <span>
                              {formatRatingLabel(r.rating) ?? r.rating}
                            </span>
                          </span>
                        ) : (
                          <span className="text-xs text-slate-500">
                            {r.rating}
                          </span>
                        )}
                      </div>
                      {r.date ? (
                        <div className="mt-0.5 text-xs text-slate-400">
                          {r.date}
                        </div>
                      ) : null}
                      {r.comment ? (
                        <p className="mt-1.5 text-slate-600 leading-snug whitespace-pre-wrap">
                          {r.comment}
                        </p>
                      ) : null}
                    </li>
                  );
                })}
              </ul>
            )}
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
}