"use client";

import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
import React from "react";
import { Filter } from "lucide-react";

interface Tab {
  id: string;
  label: string;
}

interface CustomTabsProps {
  tabs: Tab[];
  title?: string;
  subtitle?: string;
  defaultValue: string;
  children: React.ReactNode;
  showTabs?: boolean;
  tabFilters?: { value: string; content: React.ReactNode }[];
  value?: string;
  onValueChange?: (value: string) => void;
  isSearchMapPage?: boolean;
  headerButton?: React.ReactNode;
  onOpenAdvanced?: () => void;
  controlledShowAdvanced?: boolean;
  onControlledShowAdvancedChange?: (open: boolean) => void;
}

export default function CustomTabs({
  tabs,
  title,
  subtitle,
  defaultValue,
  children,
  showTabs = true,
  tabFilters,
  value,
  onValueChange,
  isSearchMapPage = false,
  headerButton,
  onOpenAdvanced,
  controlledShowAdvanced,
}: CustomTabsProps) {
  return (
    <>
      <div
       className={`
  relative

  ${
    isSearchMapPage
      ? "mb-1 px-3 py-3"
      : "mb-4 px-5 lg:px-6 py-5 lg:py-6"
  }

  rounded-[24px]

  bg-[#F1F5F9]

  border
  border-[#E2E8F0]

  scale-[0.88]

  origin-top
`}
      >
        {title && (
          <div className="flex justify-between items-center">
            <div
              className="
                font-bold

              text-[22px]
lg:text-[36px]

                leading-tight

                text-[#0F172A]
              "
            >
              {title}
            </div>

            {headerButton}
          </div>
        )}

        {subtitle && (
          <div
            className="
              text-[#64748B]

              mt-1
              mb-4
              lg:mb-6

             text-[12px]
lg:text-[15px]
            "
          >
            {subtitle}
          </div>
        )}

        <div>
          {showTabs && (
            <Tabs
              className="flex flex-col"
              defaultValue={defaultValue}
              value={value}
              onValueChange={onValueChange}
              dir="rtl"
            >
              <div
                className={`
                  mb-2

                  border-b
                  border-[#E2E8F0]

                  overflow-x-auto
                  no-scrollbar

                  ${
                    isSearchMapPage
                      ? "order-2 md:order-0 mx-auto md:m-0 px-2 md:px-0"
                      : ""
                  }
                `}
              >
                <TabsList
                  className="
                    bg-transparent
                    rounded-none
                    min-w-max

                    gap-2
                  "
                >
                  <>
                    {tabs.map((tab) => (
                      <TabsTrigger
                        key={tab.id}
                        value={tab.id}
                        className={`
                          rounded-full

                         h-[34px]
lg:h-[38px]

                          px-3
                       px-2.5
lg:px-4

                          text-[#64748B]

                          data-[state=active]:text-[#0F172A]

                          bg-transparent

                          data-[state=active]:bg-white

                          text-[12px]
                          lg:text-[14px]

                          font-medium

                          transition-all

                          border
                          border-transparent

                          data-[state=active]:border-[#E2E8F0]

                          shadow-none

                          ${
                            isSearchMapPage
                              ? "mx-1 md:mx-0"
                              : ""
                          }
                        `}
                      >
                        {isSearchMapPage && (
                          <img
                            src="/icons/list.svg"
                            className="size-3 md:size-4 md:hidden ml-1"
                          />
                        )}

                        {tab.label}
                      </TabsTrigger>
                    ))}

                    {isSearchMapPage && !controlledShowAdvanced && (
                      <TabsTrigger
                        value={value ?? (tabs?.[0]?.id || "")}
                        className="
                          md:hidden

                          rounded-full

h-[34px]
lg:h-[38px]
                          px-3

                          text-[#64748B]

                          data-[state=active]:text-black

                          bg-white

                          data-[state=active]:bg-white

                          text-sm

                          border
                          border-[#E2E8F0]
                        "
                        onClick={(e) => {
                          e.preventDefault();
                          onOpenAdvanced?.();
                        }}
                      >
                        <Filter className="w-4 h-4" />
                      </TabsTrigger>
                    )}
                  </>
                </TabsList>
              </div>

              {tabFilters?.map((item) => (
                <TabsContent key={item.value} value={item.value}>
                  <div className="sm:mt-2">
                    {item.content}
                  </div>
                </TabsContent>
              ))}
            </Tabs>
          )}
        </div>
      </div>

      {children}
    </>
  );
}