"use client";
import React, { useState, useEffect } from 'react';
import SearchFilters from '@/components/search/searchFilters';
import BasicAgentFilters from '@/components/find-agents/BasicAgentFilters';
import CustomTabs from '@/components/common/CustomTabs';
import AgentCard from '@/components/find-agents/AgentCard';
import Pagination from '@/components/common/pagination';
import { WideTerraceCard } from "@/components/main-page/WideTerraceCard";
import { TerraceCard } from "@/components/main-page/TerraceCard";
import { getAgents } from '@/lib/api';

const FindAgentsPage = () => {
  const [agents, setAgents] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [agentType, setAgentType] = useState("marketer");
  const [activeTab, setActiveTab] = useState("all");
  const [city, setCity] = useState("");
  const [searchValue, setSearchValue] = useState("");
  const [page, setPage] = useState(1);
  const pageSize = 9;

  useEffect(() => {
    async function loadAgents() {
      setLoading(true);
      try {
        const data = await getAgents({ limit: 100 });
        const mappedData = data.map((agent: any) => ({
          id: agent.id,
          name: agent.name,
          type: agent.location.split(' - ')[1] || 'مسوق عقاري',
          location: agent.location.split(' - ')[0],
          imageUrl: agent.image,
          verified: agent.verified,
          createdAt: agent.createdAt,
          socialIcons: [],
          role: agent.role?.toLowerCase() || ''
        }));
        setAgents(mappedData);
      } catch (error) {
        console.error("Error loading agents:", error);
      } finally {
        setLoading(false);
      }
    }
    loadAgents();
  }, []);

  // Reset to first page when filters change
  useEffect(() => {
    setPage(1);
  }, [agentType, city, searchValue, activeTab]);

  const tabs = [
    { id: 'all', label: 'الكل' },
    { id: 'featured', label: 'المميزون' },
    { id: 'newest', label: 'الأحدث' },
  ];

  const filteredAgents = agents
    .filter((agent) => {
      const searchMatch = searchValue ? agent.name.toLowerCase().includes(searchValue.toLowerCase()) : true;
      const cityMatch = city ? agent.location.toLowerCase().includes(city.toLowerCase()) : true;

      const role = agent.role || '';
      const isMarketer = role.includes('marketer') || role.includes('broker') || role.includes('agent') || role.includes('مسوق');
      const isCompany = role.includes('company') || role.includes('developer') || role.includes('شركة') || role.includes('مطور');

      const typeMatch = agentType === "marketer" ? isMarketer : isCompany;

      // Featured logic: filter by verified status
      if (activeTab === "featured" && !agent.verified) return false;

      return typeMatch && cityMatch && searchMatch;
    })
    .sort((a, b) => {
      // Newest logic: sort by ID descending
      if (activeTab === "newest") {
        return b.id - a.id;
      }
      return 0;
    });

  const totalCount = filteredAgents.length;
  const totalPages = Math.ceil(totalCount / pageSize);

  const paginatedAgents = filteredAgents.slice((page - 1) * pageSize, page * pageSize);

  return (
<div
  className="
    w-[92%]
    lg:w-[90%]

    mx-auto

    pb-10
  "
>        {/* <CustomTabs
        tabs={tabs}
        title="ابحث عن عقاري موثوق"
        subtitle="اكتشف كلّ ما هو جديد حول المشاريع لتحظى بأفضل فرص الاستثمار."
        defaultValue="all"
        value={activeTab}
        onValueChange={setActiveTab}
        tabFilters={[
          {
            value: "all",
            content: (
              <SearchFilters
                children={(
                  <BasicAgentFilters
                    agentType={agentType}
                    onAgentTypeChange={setAgentType}
                    city={city}
                    onCityChange={setCity}
                    searchValue={searchValue}
                    onSearchChange={setSearchValue}
                  />
                )}
              />
            ),
          },
          {
            value: "featured",
            content: (
              <SearchFilters
                children={(
                  <BasicAgentFilters
                    agentType={agentType}
                    onAgentTypeChange={setAgentType}
                    city={city}
                    onCityChange={setCity}
                    searchValue={searchValue}
                    onSearchChange={setSearchValue}
                  />
                )}
              />
            ),
          },
          {
            value: "newest",
            content: (
              <SearchFilters
                children={(
                  <BasicAgentFilters
                    agentType={agentType}
                    onAgentTypeChange={setAgentType}
                    city={city}
                    onCityChange={setCity}
                    searchValue={searchValue}
                    onSearchChange={setSearchValue}
                  />
                )}
              />
            ),
          }
        ]}
      >
        {null}
      </CustomTabs> */}

<div
  className="
    relative

    mb-6
    lg:mb-10

    px-4
    lg:px-6

    py-5
    lg:py-6

    rounded-[20px]

    bg-[#F8FAFC]

    border
    border-[#E2E8F0]
  "
>
<div className="font-bold text-[24px] lg:text-3xl">
            ابحث عن عقاري موثوق
        </div>
<div
  className="
    text-[#45556C]

    mt-2

    mb-5
    lg:mb-8

    text-[14px]
    lg:text-[16px]
  "
>
            اكتشف كلّ ما هو جديد حول المشاريع لتحظى بأفضل فرص الاستثمار
        </div>
        
        <div>
          <SearchFilters
            children={(
              <BasicAgentFilters
                agentType={agentType}
                onAgentTypeChange={setAgentType}
                city={city}
                onCityChange={setCity}
                searchValue={searchValue}
                onSearchChange={setSearchValue}
              />
            )}
          />
        </div>
      </div>

<div
  className="
    grid

    gap-4
    lg:gap-5

    grid-cols-1
    sm:grid-cols-2
    xl:grid-cols-3
    2xl:grid-cols-4
  "
>
          {paginatedAgents.map((agent) => (
          <AgentCard key={agent.id} agent={agent} />
        ))}
        {/* You can keep these cards at the end if you want them to always show */}
        <div className="hidden md:block">
          <TerraceCard classNames="h-[233px]" />
        </div>
      </div>

      <Pagination
        currentPage={page}
        totalPages={totalPages}
        pageSize={pageSize}
        totalCount={totalCount}
        itemLabel="وسيط"
        onPageChange={setPage}
      />
    </div>
  );
};

export default FindAgentsPage;