"use client";
import { Suspense, useEffect, useState, type ReactNode } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import DashboardLayout from "@/components/DashboardLayout";
import ComplaintCard, { type Complaint } from "@/components/complaints/ComplaintCard";
import ComplaintModal from "@/components/complaints/ComplaintModal";
import { apiFetch, formatApiMsg } from "@/lib/api";

interface ComplaintsListData {
  data: Complaint[];
  pagination?: {
    current_page: number;
    last_page: number;
    per_page: number;
    total: number;
  };
}

const COMPLAINT_SKELETON_KEYS = [
  "complaints-skeleton-1",
  "complaints-skeleton-2",
  "complaints-skeleton-3",
  "complaints-skeleton-4",
  "complaints-skeleton-5",
  "complaints-skeleton-6",
] as const;

function ComplaintsSkeleton() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
      {COMPLAINT_SKELETON_KEYS.map((skeletonKey) => (
        <div
          key={skeletonKey}
          className="bg-[#1E2128] rounded-2xl p-4 mx-5 animate-pulse"
        >
          <div className="flex items-center justify-between mb-3">
            <div className="w-1/2">
              <div className="h-4 bg-white/10 rounded mb-1" />
              <div className="h-3 w-1/2 bg-white/5 rounded" />
            </div>
            <div className="h-5 w-16 bg-white/5 rounded-full" />
          </div>
          <div className="flex items-center gap-1.5 mt-4">
            <div className="w-3 h-3 bg-white/5 rounded-full" />
            <div className="h-3 w-20 bg-white/5 rounded" />
          </div>
        </div>
      ))}
    </div>
  );
}

function renderComplaintsContent({
  loading,
  error,
  data,
  page,
  totalPages,
  onOpenView,
  onPageChange,
}: {
  loading: boolean;
  error: string;
  data: ComplaintsListData | null;
  page: number;
  totalPages: number;
  onOpenView: (id: number | string) => void;
  onPageChange: (page: number) => void;
}): ReactNode {
  if (loading) {
    return <ComplaintsSkeleton />;
  }

  if (error) {
    return (
      <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-8 text-center">
        <i className="ri-error-warning-line text-red-400 text-3xl mb-3 block" />
        <p className="text-red-400 text-sm">{error}</p>
      </div>
    );
  }

  if (!data || data.data.length === 0) {
    return (
      <div className="bg-[#1E2128] rounded-2xl p-12 text-center">
        <i className="ri-customer-service-2-line text-gray-600 text-5xl mb-4 block" />
        <p className="text-gray-400 text-sm">لا توجد شكاوى</p>
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        {data.data.map((complaint) => (
          <ComplaintCard
            key={complaint.id}
            complaint={complaint}
            onClick={() => onOpenView(complaint.id)}
          />
        ))}
      </div>

      {totalPages > 1 && (
        <div className="flex items-center justify-center gap-2 mt-4" dir="ltr">
          <button
            onClick={() => onPageChange(Math.max(1, page - 1))}
            disabled={page === 1}
            className="w-8 h-8 rounded-lg bg-[#1E2128] border border-white/5 text-gray-400 flex items-center justify-center disabled:opacity-50 hover:bg-white/5 transition-colors cursor-pointer"
          >
            <i className="ri-arrow-left-s-line" />
          </button>

          <span className="text-white text-sm font-medium px-4">
            الصفحة {page} من {totalPages}
          </span>

          <button
            onClick={() => onPageChange(Math.min(totalPages, page + 1))}
            disabled={page === totalPages}
            className="w-8 h-8 rounded-lg bg-[#1E2128] border border-white/5 text-gray-400 flex items-center justify-center disabled:opacity-50 hover:bg-white/5 transition-colors cursor-pointer"
          >
            <i className="ri-arrow-right-s-line" />
          </button>
        </div>
      )}
    </div>
  );
}

export default function ComplaintsPage() {
  return (
    <Suspense
      fallback={
        <DashboardLayout title="الشكاوى" subtitle="إدارة ومتابعة الشكاوى والاقتراحات">
          <ComplaintsSkeleton />
        </DashboardLayout>
      }
    >
      <ComplaintsPageContent />
    </Suspense>
  );
}

function ComplaintsPageContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const complaintIdFromUrl = searchParams.get("id");
  const [data, setData] = useState<ComplaintsListData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [page, setPage] = useState(1);

  // Modal state
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalMode, setModalMode] = useState<"create" | "view">("create");
  const [selectedComplaintId, setSelectedComplaintId] = useState<
    number | string | undefined
  >(undefined);

  useEffect(() => {
    if (!complaintIdFromUrl) {
      return;
    }

    setModalMode("view");
    setSelectedComplaintId(complaintIdFromUrl);
    setIsModalOpen(true);
  }, [complaintIdFromUrl]);

  useEffect(() => {
    let active = true;
    setLoading(true);
    setError("");

    apiFetch<ComplaintsListData>(`/provider/complains?page=${page}&perPage=15`, {
      method: "GET",
      successCase: (res) => {
        if (active && res.data) setData(res.data);
      },
      errorCase: (res) => {
        if (active) setError(formatApiMsg(res.msg) || "تعذّر تحميل الشكاوى");
      },
    }).finally(() => {
      if (active) setLoading(false);
    });

    return () => {
      active = false;
    };
  }, [page]);

  const handleOpenCreate = () => {
    setModalMode("create");
    setSelectedComplaintId(undefined);
    setIsModalOpen(true);
  };

  const handleOpenView = (id: number | string) => {
    setModalMode("view");
    setSelectedComplaintId(id);
    setIsModalOpen(true);
    router.replace(`/complaints?id=${encodeURIComponent(String(id))}`);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    if (complaintIdFromUrl) {
      router.replace("/complaints");
    }
  };

  const handleCreateSuccess = () => {
    // If we are on page 1, refetch. Otherwise go to page 1.
    if (page === 1) {
      // Force refetch by toggling a key or just manually re-calling.
      // Simplest way: re-set page to 1 (won't trigger effect if already 1).
      // So let's extract fetch logic.
      setLoading(true);
      apiFetch<ComplaintsListData>(`/provider/complains?page=1&perPage=15`, {
        method: "GET",
        successCase: (res) => {
          if (res.data) setData(res.data);
        },
      }).finally(() => {
        setLoading(false);
      });
    } else {
      setPage(1);
    }
  };

  // Pagination logic
  const pagination = data?.pagination;
  const totalPages = pagination?.last_page || 1;

  return (
    <DashboardLayout title="الشكاوى" subtitle="إدارة ومتابعة الشكاوى والاقتراحات">
      <div className="flex items-center justify-between mb-6">
        <button
          onClick={handleOpenCreate}
          className="bg-[#FCD704] text-[#13151A] font-semibold text-sm px-5 py-2.5 rounded-xl cursor-pointer whitespace-nowrap flex items-center gap-2"
        >
          <i className="ri-add-line text-base" />
          <span>إضافة شكوى</span>
        </button>
      </div>

      {renderComplaintsContent({
        loading,
        error,
        data,
        page,
        totalPages,
        onOpenView: handleOpenView,
        onPageChange: setPage,
      })}

      <ComplaintModal
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        mode={modalMode}
        complaintId={selectedComplaintId}
        onSuccess={handleCreateSuccess}
      />
    </DashboardLayout>
  );
}