"use client";
import React, { useEffect } from "react";
import { useAppSelector, useAppDispatch } from "../hooks/hooks";
import { hideModal, showModal } from "../store/Slice/modalSlice";
import useApiPost from "@/app/hooks/postData";
import { ClipLoader } from "react-spinners";
import { IoChevronForward, IoCloseOutline } from "react-icons/io5";

function ReportReel() {
  const dispatch = useAppDispatch();
  const isOpen = useAppSelector((state) => state.modals.ReelReportText);
  const ReelId = useAppSelector((state) => state.ReelId.id);
  const ReelUserId = useAppSelector((state) => state.ReelId.user_id);
  const { data, postData, loading } = useApiPost();

  useEffect(() => {
    if (isOpen) {
      postData("/get_report_text", { type: "reel" });
    }
  }, [isOpen]);

  const Report_Text = data?.all_report_text || [];

  const handleSelectReport = async (reportId: string) => {
    try {
      await postData("/reel_add_report", {
        reel_id: ReelId,
        reported_user_id: ReelUserId,
        report_text_id: reportId,
      });
      dispatch(hideModal("ReelReportText"));
      dispatch(showModal("ReelReportSuccess"));
    } catch (error) {
      console.error("Report failed");
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black/70 backdrop-blur-sm z-[150] p-4">
      {/* MODAL CONTAINER - Background updated to modal-color */}
      <div className="bg-[var(--modal-color)] rounded-[10px] shadow-3xl w-full max-w-[420px] md:max-w-[550px] overflow-hidden animate-in fade-in zoom-in duration-200">
        
        {/* Header */}
        <div className="relative border-b border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] h-[50px] flex items-center justify-center">
          <button 
            onClick={() => dispatch(hideModal("ReelReportText"))}
            className="absolute left-4 text-[var(--text-primary)] hover:opacity-70 "
          >
            <IoCloseOutline size={32} strokeWidth={1} />
          </button>
          
          <h2 className="text-[var(--text-primary)] font-medium text-[17px] mt-1">
            Report
          </h2>
        </div>

        {/* Sub-header text */}
        <div className="px-4 sm:px-6 pt-4 pb-2 border-b border-[var(--border-color)]">
          <h3 className="text-[var(--text-primary)] font-medium text-[16px]">
            Why are you reporting this post?
          </h3>
        </div>

        {/* List Area */}
        <div className="max-h-[400px] overflow-y-auto">
          {loading ? (
            <div className="flex justify-center items-center py-10">
              <ClipLoader color="var(--text-primary)" size={25} />
            </div>
          ) : (
            Report_Text.map((item: any) => (
              <button
                key={item.id}
                onClick={() => handleSelectReport(item.id)}
                className="w-full flex items-center justify-between px-4 sm:px-6 border-b border-[var(--border-color)] py-4 hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)]  text-left"
              >
                <span className="text-[var(--text-primary)] text-[15px] font-normal">
                  {item.text}
                </span>
                <IoChevronForward className="text-[var(--text-secondary)]" size={20} />
              </button>
            ))
          )}
        </div>
      </div>
    </div>
  );
}

export default ReportReel;