"use client";

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Button } from "../ui/button";
import { Filter, XCircle } from "lucide-react";

export default function SearchFilters({
  children,
  advancedChildren,
  extraSearchButton,
  showSerachButton = true,
  isSearchMapPage = false,
  controlledShowAdvanced,
  onControlledShowAdvancedChange,
}: {
  children: React.ReactNode;
  advancedChildren?: React.ReactNode;
  extraSearchButton?: React.ReactNode;
  showSerachButton?: boolean;
  isSearchMapPage?: boolean;
  controlledShowAdvanced?: boolean;
  onControlledShowAdvancedChange?: (open: boolean) => void;
}) {
  const [showAdvancedInternal, setShowAdvancedInternal] =
    useState(false);

  const showAdvanced =
    controlledShowAdvanced ?? showAdvancedInternal;

  const setShowAdvanced = (open: boolean) => {
    if (onControlledShowAdvancedChange) {
      onControlledShowAdvancedChange(open);
    } else {
      setShowAdvancedInternal(open);
    }
  };

  return (
    <motion.div
      layout
      className="
        flex
        flex-col

        gap-3

        items-center

        w-full
      "
    >
      <div
        className="
          flex
          flex-col
          lg:flex-row

          gap-2

          items-center

          w-full
        "
      >
        {children}

        <AnimatePresence mode="popLayout">
          {!showAdvanced && showSerachButton && (
            <motion.div
              className="
                flex

                gap-2

                w-full
                lg:w-auto
              "
              exit={{ opacity: 0, y: 10 }}
              transition={{ duration: 0.2 }}
            >
              {advancedChildren && (
                <Button
                  onClick={() => setShowAdvanced(true)}
                  className={`
                    ${
                      isSearchMapPage
                        ? "hidden md:flex"
                        : "flex"
                    }

                    h-[48px]
                    w-[48px]

                    shrink-0

                    rounded-full

                    items-center
                    justify-center

                    bg-[#E2E8F0]

                    text-[#0F172A]

                    hover:bg-[#CBD5E1]
                    hover:text-[#0F172A]

                    border
                    border-[#CBD5E1]
                  `}
                >
                  <Filter className="w-5 h-5" />
                </Button>
              )}

              {showSerachButton && (
                <motion.div
                  className="
                    w-full
                    lg:w-auto
                  "
                >
                  {extraSearchButton}
                </motion.div>
              )}
            </motion.div>
          )}
        </AnimatePresence>
      </div>

      <AnimatePresence>
        {showAdvanced && (
          <motion.div
            layout
            className="
              grid

              grid-cols-1
              md:grid-cols-2
              xl:grid-cols-4

              gap-3

              w-full
            "
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
          >
            {advancedChildren}
          </motion.div>
        )}
      </AnimatePresence>

      <AnimatePresence mode="popLayout">
        {showAdvanced && (
          <motion.div
            key="advanced-search-buttons"
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 20 }}
            className="
              w-full

              flex
              flex-wrap

              justify-center
              items-center

              gap-3

              mt-2
            "
          >
            <Button
              variant="ghost"
              className="
                h-[44px]

                px-4

                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-4 h-4" />
              إلغاء البحث المتقدم
            </Button>

            {showSerachButton && (
              <motion.div
                className="
                  min-w-[140px]
                  w-fit
                "
              >
                {extraSearchButton}
              </motion.div>
            )}
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
}