"use client";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Filter, Search, XCircle } from "lucide-react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import PriceRangeInput from "./PriceRangeInput";
import AreaRangeInput from "./AreaRangeInput";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "../ui/select";
import { motion, AnimatePresence } from "framer-motion";
import { getCities, City } from "@/lib/api";

interface MainPageSearchProps {
  showAdvanced: boolean;
  setShowAdvanced: (show: boolean) => void;
}

export default function MainPageSearch({ showAdvanced, setShowAdvanced }: MainPageSearchProps) {
  const router = useRouter();
  const [searchType, setSearchType] = useState("unit");

  // Cities from backend
  const [cities, setCities] = useState<City[]>([]);

  // Search state for units
  const [unitNumber, setUnitNumber] = useState("");
  const [unitName, setUnitName] = useState("");
  const [selectedCity, setSelectedCity] = useState("");
  const [unitType, setUnitType] = useState("");
  const [rooms, setRooms] = useState("");
  const [bathrooms, setBathrooms] = useState("");
  const [floors, setFloors] = useState("");
  const [saleType, setSaleType] = useState("");

  // Search state for projects
  const [projectNumber, setProjectNumber] = useState("");
  const [projectName, setProjectName] = useState("");
  const [projectCity, setProjectCity] = useState("");
  const [projectType, setProjectType] = useState("");

  // Fetch cities on mount
  useEffect(() => {
    getCities().then(setCities).catch(console.error);
  }, []);

  // Handle search
  const handleSearch = () => {
    const params = new URLSearchParams();

    if (searchType === "unit") {
      params.set("tab", "properties");
      if (unitNumber) params.set("unitNumber", unitNumber);
      if (unitName) params.set("unitName", unitName);
      if (selectedCity) params.set("city", selectedCity);
      if (unitType) params.set("type", unitType);
      if (rooms) params.set("rooms", rooms);
      if (bathrooms) params.set("bathrooms", bathrooms);
      if (floors) params.set("floors", floors);
      if (saleType) params.set("section", saleType);
    } else {
      params.set("tab", "projects");
      if (projectNumber) params.set("projectNumber", projectNumber);
      if (projectName) params.set("projectName", projectName);
      if (projectCity) params.set("city", projectCity);
      if (projectType) params.set("type", projectType);
    }

    router.push(`/search?${params.toString()}`);
  };

  const containerVariants = {
    hidden: { opacity: 0, y: -20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { staggerChildren: 0.1, delayChildren: 0.2 },
    },
    exit: { opacity: 0, y: 20 },
  };

  return (
    <motion.div
      layout
      className="flex flex-col gap-6 justify-center items-center bg-[#FFFFFF80] p-4 rounded-2xl"
    >
      <motion.div layout="position" className="flex justify-center w-full gap-2">
        <Button
          className={`py-6 rounded-full flex-1`}
          variant={searchType === "unit" ? "default" : "ghost"}
          onClick={() => setSearchType("unit")}
        >
          بحث عن وحدة
        </Button>
        <Button
          className={`py-6 rounded-full flex-1`}
          variant={searchType === "project" ? "default" : "ghost"}
          onClick={() => setSearchType("project")}
        >
          بحث عن مشروع
        </Button>
      </motion.div>
      <div className="flex flex-col gap-4 w-full">
        <div className="flex flex-col gap-4 w-full">
          {searchType === "unit" ? (
            <>
              <motion.div layout className="flex flex-col md:flex-row gap-4 w-full">
                <motion.div layout="position" className="flex-1 min-w-[100px]">
                  <Input
                    placeholder="رقم الوحدة"
                    type="number"
                    className="rounded-full w-full"
                    value={unitNumber}
                    onChange={(e) => setUnitNumber(e.target.value)}
                  />
                </motion.div>
                <motion.div layout="position" className="flex-1 min-w-[100px]">
                  <Input
                    placeholder="اسم الوحدة"
                    className="rounded-full w-full"
                    value={unitName}
                    onChange={(e) => setUnitName(e.target.value)}
                  />
                </motion.div>
                <motion.div layout="position" className="flex-1 min-w-[150px]">
                  <Select dir="rtl" value={selectedCity} onValueChange={setSelectedCity}>
                    <SelectTrigger className="w-full rounded-full text-base md:text-sm py-2.5">
                      <SelectValue placeholder="اختر المدينة" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectGroup>
                        <SelectLabel>مدن</SelectLabel>
                        {cities.map((city) => (
                          <SelectItem key={city.id} value={city.id.toString()}>
                            {city.name}
                          </SelectItem>
                        ))}
                      </SelectGroup>
                    </SelectContent>
                  </Select>
                </motion.div>
                <motion.div layout="position" className="flex-1 min-w-[150px]">
                  <Select dir="rtl" value={unitType} onValueChange={setUnitType}>
                    <SelectTrigger className="w-full rounded-full text-base md:text-sm py-2.5">
                      <SelectValue placeholder="نوع الوحدة" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectGroup>
                        <SelectLabel>انواع الوحدة</SelectLabel>
                        <SelectItem value="villa">فيلا</SelectItem>
                        <SelectItem value="apartment">شقة</SelectItem>
                        <SelectItem value="house">بيت</SelectItem>
                        <SelectItem value="land">أرض</SelectItem>
                        <SelectItem value="duplex">دوبلكس</SelectItem>
                      </SelectGroup>
                    </SelectContent>
                  </Select>
                </motion.div>
                <AnimatePresence mode="popLayout">
                  {!showAdvanced && (
                    <motion.div
                      className="flex-1 flex gap-2 min-w-[150px]"
                      exit={{ opacity: 0, y: 10 }}
                      transition={{ duration: 0.2 }}
                    >
                      <Button
                        onClick={() => setShowAdvanced(true)}
                        className="flex px-3 rounded-full items-center bg-primary-muted text-primary hover:text-white"
                      >
                        <Filter />
                      </Button>
                      <motion.div layoutId="search-button" className="flex-1">
                        <Button
                          onClick={handleSearch}
                          className="flex px-5 rounded-full w-full items-center bg-primary-muted text-primary hover:text-white"
                        >
                          <Search />
                          بحث
                        </Button>
                      </motion.div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </motion.div>
              <AnimatePresence>
                {showAdvanced && (
                  <motion.div
                    layout
                    className="flex flex-col md:flex-row gap-4 w-full"
                    initial={{ opacity: 0, y: -10 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -10 }}
                  >
                    <motion.div layout="position" className="flex-1 min-w-[150px]">
                      <Select dir="rtl" value={rooms} onValueChange={setRooms}>
                        <SelectTrigger className="w-full rounded-full text-base md:text-sm py-2.5">
                          <SelectValue placeholder="عدد الغرف" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectGroup>
                            <SelectLabel>عدد الغرف</SelectLabel>
                            <SelectItem value="1">1</SelectItem>
                            <SelectItem value="2">2</SelectItem>
                            <SelectItem value="3">3</SelectItem>
                            <SelectItem value="4">4</SelectItem>
                            <SelectItem value="5">5+</SelectItem>
                          </SelectGroup>
                        </SelectContent>
                      </Select>
                    </motion.div>
                    <motion.div layout="position" className="flex-1 min-w-[150px]">
                      <Select dir="rtl" value={bathrooms} onValueChange={setBathrooms}>
                        <SelectTrigger className="w-full rounded-full text-base md:text-sm py-2.5">
                          <SelectValue placeholder="عدد الحمامات" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectGroup>
                            <SelectLabel>عدد الحمامات</SelectLabel>
                            <SelectItem value="1">1</SelectItem>
                            <SelectItem value="2">2</SelectItem>
                            <SelectItem value="3">3</SelectItem>
                            <SelectItem value="4">4</SelectItem>
                            <SelectItem value="5">5+</SelectItem>
                          </SelectGroup>
                        </SelectContent>
                      </Select>
                    </motion.div>
                    <motion.div layout="position" className="flex-1 min-w-[150px]">
                      <Select dir="rtl" value={floors} onValueChange={setFloors}>
                        <SelectTrigger className="w-full rounded-full text-base md:text-sm py-2.5">
                          <SelectValue placeholder="عدد الادوار" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectGroup>
                            <SelectLabel>عدد الادوار</SelectLabel>
                            <SelectItem value="1">1</SelectItem>
                            <SelectItem value="2">2</SelectItem>
                            <SelectItem value="3">3+</SelectItem>
                          </SelectGroup>
                        </SelectContent>
                      </Select>
                    </motion.div>
                    <Select dir="rtl" value={saleType} onValueChange={setSaleType}>
                      <SelectTrigger className="w-full md:w-auto min-w-[150px] rounded-full">
                        <SelectValue placeholder="شراء/بيع" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectGroup>
                          <SelectItem value="sale">بيع</SelectItem>
                          <SelectItem value="rent">إيجار</SelectItem>
                        </SelectGroup>
                      </SelectContent>
                    </Select>
                    <div className="flex items-center gap-2 lg:col-span-2">
                      <p className="text-[#45556C] whitespace-nowrap">نطاق السعر</p>
                      <PriceRangeInput />
                    </div>
                    <div className="flex items-center gap-2 lg:col-span-2">
                      <p className="text-[#45556C] whitespace-nowrap">مساحة</p>
                      <AreaRangeInput />
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </>
          ) : (
            <motion.div layout className="flex flex-col md:flex-row gap-4 w-full">
              <motion.div layout="position" className="flex-1 min-w-[100px]">
                <Input
                  placeholder="رقم المشروع"
                  type="number"
                  className="rounded-full w-full"
                  value={projectNumber}
                  onChange={(e) => setProjectNumber(e.target.value)}
                />
              </motion.div>
              <motion.div layout="position" className="flex-1 min-w-[100px]">
                <Input
                  placeholder="اسم المشروع"
                  className="rounded-full w-full"
                  value={projectName}
                  onChange={(e) => setProjectName(e.target.value)}
                />
              </motion.div>
              <motion.div layout="position" className="flex-1 min-w-[150px]">
                <Select dir="rtl" value={projectCity} onValueChange={setProjectCity}>
                  <SelectTrigger className="w-full rounded-full py-2.5">
                    <SelectValue placeholder="اختر المدينة" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectGroup>
                      <SelectLabel>مدن</SelectLabel>
                      {cities.map((city) => (
                        <SelectItem key={city.id} value={city.id.toString()}>
                          {city.name}
                        </SelectItem>
                      ))}
                    </SelectGroup>
                  </SelectContent>
                </Select>
              </motion.div>
              <AnimatePresence mode="popLayout">
                {!showAdvanced && (
                  <motion.div
                    className="flex-1 flex gap-2 min-w-[150px]"
                    exit={{ opacity: 0, y: 10 }}
                    transition={{ duration: 0.2 }}
                  >
                    <Button
                      onClick={() => setShowAdvanced(true)}
                      className="flex px-3 rounded-full items-center bg-primary-muted text-primary hover:text-white"
                    >
                      <Filter />
                    </Button>
                    <motion.div layoutId="search-button" className="flex-1">
                      <Button
                        onClick={handleSearch}
                        className="flex px-5 rounded-full w-full items-center bg-primary-muted text-primary hover:text-white"
                      >
                        <Search />
                        بحث
                      </Button>
                    </motion.div>
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.div>
          )}
        </div>

        {/* Advanced fields for project search */}
        <AnimatePresence>
          {searchType === "project" && showAdvanced && (
            <motion.div
              layout
              className="flex flex-col md:flex-row gap-4 w-full"
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
            >
              <motion.div layout="position" className="flex-1 min-w-[150px]">
                <Select dir="rtl" value={projectType} onValueChange={setProjectType}>
                  <SelectTrigger className="w-full rounded-full text-base md:text-sm py-2.5">
                    <SelectValue placeholder="نوع العقار" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectGroup>
                      <SelectLabel>انواع العقار</SelectLabel>
                      <SelectItem value="villa">فيلا</SelectItem>
                      <SelectItem value="apartment">شقة</SelectItem>
                      <SelectItem value="house">بيت</SelectItem>
                    </SelectGroup>
                  </SelectContent>
                </Select>
              </motion.div>
              <div className="flex items-center gap-2 lg:col-span-2">
                <p className="text-[#45556C] whitespace-nowrap">نطاق السعر</p>
                <PriceRangeInput />
              </div>
              <div className="flex items-center gap-2 lg:col-span-2">
                <p className="text-[#45556C] whitespace-nowrap">مساحة العقار</p>
                <AreaRangeInput />
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        <AnimatePresence mode="popLayout">
          {showAdvanced && (
            <motion.div
              key="advanced-search"
              variants={containerVariants}
              initial="hidden"
              animate="visible"
              exit="exit"
              className="w-full"
            >
              <div className="w-full flex justify-center items-center gap-4 mt-4">
                <Button
                  variant="ghost"
                  className="text-red-500 bg-red-100 hover:bg-red-200 hover:text-red-500 rounded-full flex items-center gap-2 transition-colors duration-300"
                  onClick={() => setShowAdvanced(false)}
                >
                  <XCircle className="w-5 h-5" />
                  إلغاء البحث المتقدم
                </Button>
                <motion.div
                  layoutId="search-button"
                  className="min-w-[150px] w-fit"
                >
                  <Button
                    onClick={handleSearch}
                    className="flex px-5 rounded-full w-full items-center bg-primary-muted text-primary hover:text-white"
                  >
                    <Search />
                    بحث
                  </Button>
                </motion.div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </motion.div>
  );
}