"use client";

import { CustomButton } from "@/core/components/base/button";
import { CustomInput } from "@/core/components/base/input";
import { userInfoService } from "@/core/service/user-info.service";
import { getContactImageUrl } from "@/core/utils";
import { DASHBOARD_ROUTE } from "@modules/dashboard/routes/route.constant";
import { useQuery } from "@tanstack/react-query";
import { Plus, Search, Users } from "lucide-react";
import { useEffect, useState, type ChangeEvent } from "react";
import { useNavigate } from "react-router-dom";
import { CreateCampaignModal } from "../../components/create-campaign-modal";
import { getCampaignsService } from "../../service/campaigns.service";
import type { Campaign, CampaignTab } from "./campaigns.type";

export function CampaignsPage() {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState<CampaignTab>("فعال");
  const [searchQuery, setSearchQuery] = useState<string>("");
  const [currentCampaign, setCurrentCampaign] = useState<Array<Campaign>>([]);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);

  const {
    data: campaigns = [],
    isLoading,
    refetch,
  } = useQuery({
    queryKey: ["campaigns"],
    queryFn: getCampaignsService,
  });

  useEffect(() => {
    if (campaigns) {
      const user = userInfoService.getUserInfo();
      let filtered = campaigns;

      switch (activeTab) {
        case "my":
          filtered = campaigns.filter(
            (c) => Number(c.user_id) === Number(user.WorkflowID)
          );
          break;
        case "منتخب":
          filtered = campaigns.filter((c) => c.status === "منتخب");
          break;
        case "group":
          filtered = campaigns.filter(
            (c) => c.school_code === user.school_code
          );
          break;
        case "فعال":
        default:
          filtered = campaigns;
          break;
      }
      setCurrentCampaign(filtered);
    }
  }, [campaigns, activeTab]); // Added activeTab to dependencies

  const tabs: { value: CampaignTab; label: string }[] = [
    { value: "فعال", label: "تمام کارزار‌ها" },
    { value: "my", label: "کارزار‌های من" },
    { value: "منتخب", label: "کارزار‌های برتر" },
    { value: "group", label: "کارزار‌های گروه" },
  ];

  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
    const query = e.target.value;
    setSearchQuery(query);
    setActiveTab("فعال");

    if (query === "") {
      handleTabChange(activeTab, campaigns);
    } else {
      const filteredCampaigns = campaigns.filter((campaign) =>
        campaign.title.toLowerCase().includes(query.toLowerCase())
      );
      setCurrentCampaign(filteredCampaigns);
    }
  };

  const handleTabChange = (tab: CampaignTab, campaignData = campaigns) => {
    setActiveTab(tab);
    const user = userInfoService.getUserInfo();
    let filtered = campaignData;

    switch (tab) {
      case "my":
        filtered = campaignData.filter(
          (c) => Number(c.user_id) === Number(user.WorkflowID)
        );
        break;
      case "منتخب":
        filtered = campaignData.filter((c) => c.status === "منتخب");
        break;

      case "group":
        filtered = campaignData.filter(
          (c) => c.school_code === user.school_code
        );
        break;
      case "فعال":
      default:
        filtered = campaignData;
        break;
    }
    setCurrentCampaign(filtered);
    setSearchQuery("");
  };

  const handleJoin = (campaign: Campaign) => {
    navigate(
      `${DASHBOARD_ROUTE.sub}/${DASHBOARD_ROUTE.joinToCampaing}?id=${campaign.WorkflowID}`,
      {
        replace: true,
      }
    );
  };

  const showCampaing = (cId: number) => {
    navigate(`${DASHBOARD_ROUTE.sub}/${DASHBOARD_ROUTE.campaing}/${cId}`, {
      replace: true,
    });
  };

  const renderSkeleton = () => (
    <div className="space-y-4">
      {[1, 2, 3].map((i) => (
        <div
          key={i}
          className="bg-white rounded-xl shadow-md p-4 animate-pulse"
        >
          <div className="flex items-center gap-4">
            <div className="w-16 h-16 rounded-lg bg-gray-200" />
            <div className="flex-1 space-y-2">
              <div className="w-3/4 h-4 bg-gray-200 rounded" />
              <div className="w-1/2 h-3 bg-gray-200 rounded" />
            </div>
            <div className="w-24 h-10 bg-gray-200 rounded-lg" />
          </div>
        </div>
      ))}
    </div>
  );

  return (
    <div className="min-h-screen bg-gray-50 p-4" dir="rtl">
      <div className="max-w-3xl mx-auto">
        <header className="mb-6">
          <h1 className="text-3xl font-bold text-slate-800 text-right mb-2">
            کارزار‌ها
          </h1>
          <p className="text-slate-600 text-right">
            برای تغییر جهان، کارزار ایجاد کنید و دیگران را دعوت کنید
          </p>
        </header>

        <div className="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div className="relative flex-1">
            <CustomInput
              type="text"
              placeholder="جستجوی کارزار..."
              value={searchQuery}
              onChange={handleSearchChange}
              className="pr-10 w-full"
            />
            <Search
              size={20}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"
            />
          </div>
          <CustomButton
            variant="primary"
            onClick={() => setIsCreateModalOpen(true)}
            className="flex items-center justify-center gap-2"
          >
            <Plus size={20} />
            <span>ایجاد کارزار</span>
          </CustomButton>
        </div>

        <div className="mb-6">
          <div className="flex gap-2 overflow-x-auto pb-2 border-b border-gray-200">
            {tabs.map((tab) => (
              <button
                key={tab.value}
                onClick={() => handleTabChange(tab.value)}
                className={`px-4 py-2 text-sm font-medium whitespace-nowrap rounded-t-lg transition-colors ${
                  activeTab === tab.value
                    ? "bg-white border-gray-200 border-t border-x text-blue-600"
                    : "text-slate-600 hover:text-slate-800 hover:bg-gray-100"
                }`}
              >
                {tab.label}
              </button>
            ))}
          </div>
        </div>

        <main>
          {isLoading ? (
            renderSkeleton()
          ) : currentCampaign.length > 0 ? (
            <ul className="space-y-4">
              {currentCampaign.map((campaign) => (
                <li
                  key={`${campaign.user_id}-${campaign.WorkflowID}`}
                  className="bg-white rounded-xl shadow-sm overflow-hidden transition-shadow hover:shadow-lg"
                >
                  <div className="p-4 flex items-center gap-4">
                    <div className="w-16 h-16 rounded-lg overflow-hidden bg-gray-100 shrink-0">
                      {campaign.image ? (
                        <img
                          src={getContactImageUrl(
                            campaign.ValueP1226S1951StageID
                          )}
                          alt={campaign.title}
                          className="w-full h-full object-cover"
                        />
                      ) : (
                        <div className="w-full h-full bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center text-blue-500">
                          <Users size={24} />
                        </div>
                      )}
                    </div>

                    <div className="flex-1 text-right">
                      <h3 className="text-lg font-semibold text-slate-800">
                        {campaign.title}
                      </h3>

                      <div className="flex flex-row gap-0.5">
                        <span className="text-sm text-gray-500 ">
                          ایجاد کننده :
                        </span>
                        <p className="text-sm text-gray-500 truncate">
                          {campaign.user_id_nickname}
                        </p>
                      </div>
                      <p className="text-sm text-gray-500 mt-1">
                        {Number(campaign.signature_count)} عضو
                      </p>
                      <p className="text-sm text-gray-500 mt-1">
                        {Number(campaign.comment_count)} کامنت
                      </p>
                    </div>

                    <div className="flex flex-col gap-2">
                      {activeTab === "منتخب" && (
                        <CustomButton
                          onClick={() => handleJoin(campaign)}
                          variant="info"
                          className="shrink-0"
                        >
                          انتخاب{" "}
                        </CustomButton>
                      )}

                      <CustomButton
                        onClick={() => showCampaing(campaign.WorkflowID)}
                        variant="info"
                        className="shrink-0"
                      >
                        جزییات
                      </CustomButton>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          ) : (
            <div className="text-center py-12">
              <p className="text-slate-600 text-lg">
                {searchQuery
                  ? "کارزاری با این مشخصات یافت نشد."
                  : "کارزاری در این دسته وجود ندارد."}
              </p>
            </div>
          )}
        </main>
      </div>

      <CreateCampaignModal
        isOpen={isCreateModalOpen}
        onClose={() => setIsCreateModalOpen(false)}
        onSuccess={() => refetch()}
      />
    </div>
  );
}

export default CampaignsPage;