"use client";
import { useState, ReactNode, useEffect } from "react";

export type TabItem = {
  key: string;
  label: string;
  content: ReactNode;
  disabled?: boolean;       // ← new: optional disabled tab
  icon?: ReactNode;         // ← new: optional icon before label
};

type TabsProps = {
  tabs: TabItem[];
  defaultActive?: string;
  onTabChange?: (key: string) => void;   // ← new: callback when tab changes
  className?: string;                    // ← new: custom class for wrapper
  headerClassName?: string;              // ← new: custom class for tab headers
  contentClassName?: string;             // ← new: custom class for content area
  variant?: "default" | "underline" | "pills";  // ← new: future-proof variants
};

export function Tabs({
  tabs,
  defaultActive,
  onTabChange,
  className = "",
  headerClassName = "",
  contentClassName = "",
  variant = "default",
}: TabsProps) {
  const initialActive = defaultActive || tabs[0]?.key || "";
  const [active, setActive] = useState(initialActive);

  // Sync external control if defaultActive changes
  useEffect(() => {
    if (defaultActive && defaultActive !== active) {
      setActive(defaultActive);
    }
  }, [defaultActive]);

  const handleTabClick = (key: string) => {
    if (tabs.find(t => t.key === key)?.disabled) return;

    setActive(key);
    onTabChange?.(key);
  };

  return (
    <div className={`flex flex-col w-full ${className}`}>
      {/* Tab Headers */}
      <ul
        className={`
          border flex gap-3 sm:gap-4 md:gap-5 2xl:gap-6 m-0 
          border-grey2b rounded-xl p-4 2xl:px-5 2xl:py-8 rounded-b-none bg-secondary
          ${headerClassName}
        `}
        role="tablist"
      >
        {tabs.map((tab) => {
          const isActive = active === tab.key;

          return (
            <li
              key={tab.key}
              role="tab"
              aria-selected={isActive}
              aria-disabled={tab.disabled}
              onClick={() => handleTabClick(tab.key)}
              className={`
                md:text-base text-sm p-3 2xl:p-5 w-full text-center 
                transition-all duration-300 rounded-xl border 2xl:rounded-2xl 
                cursor-pointer flex items-center justify-center gap-2
                ${tab.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
                ${isActive
                  ? "bg-primary border-primary text-white font-medium"
                  : "bg-secondary25 border-grey2b text-grey-de hover:bg-secondary hover:border-grey92"
                }
              `}
            >
              {tab.icon && <span className="inline-flex">{tab.icon}</span>}
              <span>{tab.label}</span>
            </li>
          );
        })}
      </ul>

      {/* Tab Content */}
      <div
        className={`
          border border-grey2b rounded-xl rounded-t-none border-t-0 
          p-4 2xl:p-5 bg-secondary ${contentClassName}
        `}
        role="tabpanel"
      >
        {tabs.map((tab) =>
          tab.key === active ? (
            <div key={tab.key} className="w-full animate-fade-in">
              {tab.content}
            </div>
          ) : null
        )}
      </div>
    </div>
  );
}