import React, { createContext, useContext, useState } from 'react';

const TabsContext = createContext<any>(null);

export const TabsRoot = ({ defaultValue, value, onValueChange, children, className = '', ...props }: any) => {
  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
  const currentValue = value !== undefined ? value : uncontrolledValue;
  const handleValueChange = (newVal: string) => {
    if (value === undefined) setUncontrolledValue(newVal);
    onValueChange?.(newVal);
  };
  return (
    <TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
      <div className={className} {...props}>{children}</div>
    </TabsContext.Provider>
  );
};
TabsRoot.displayName = "Tabs";

export const TabsList = React.forwardRef<HTMLDivElement, any>(({ className = '', ...props }, ref) => (
  <div ref={ref} className={`inline-flex h-10 items-center justify-center rounded-md bg-surface p-1 text-text-muted ${className}`} {...props} />
));
TabsList.displayName = "TabsList";

export const TabsTrigger = React.forwardRef<HTMLButtonElement, any>(({ value, className = '', onClick, ...props }, ref) => {
  const context = useContext(TabsContext);
  const isSelected = context?.value === value;
  return (
    <button
      ref={ref}
      onClick={(e) => { context?.onValueChange(value); onClick?.(e); }}
      data-state={isSelected ? 'active' : 'inactive'}
      className={`inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-text data-[state=active]:shadow-sm ${className}`}
      {...props}
    />
  );
});
TabsTrigger.displayName = "TabsTrigger";

export const TabsContent = React.forwardRef<HTMLDivElement, any>(({ value, className = '', children, ...props }, ref) => {
  const context = useContext(TabsContext);
  if (context?.value !== value) return null;
  return (
    <div ref={ref} data-state="active" className={`mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${className}`} {...props}>
      {children}
    </div>
  );
});
TabsContent.displayName = "TabsContent";