import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"
import { TabsList as InnerTabsList, TabsTrigger as InnerTabsTrigger, tabsListVariants, tabsTriggerClassName } from "@/components/ui/tabs"
import { cn } from "@/lib/utils"
import { ProIndicator } from "@/components/pro/pro-indicator"

export const FEATURE_TABS_SURFACE_CLASSNAME = "bg-[#f5f6f8] dark:bg-muted/20"
export const FeatureTabs = TabsPrimitive.Root

export function FeatureTabsNavigation({ activeValue, children, className, ...props }:
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & { activeValue: string }) {
  const listRef = React.useRef<HTMLDivElement>(null)
  const [indicator, setIndicator] = React.useState({ left: 0, width: 0 })

  React.useLayoutEffect(() => {
    const list = listRef.current
    if (!list) return
    const measure = () => {
      const active = list.querySelector<HTMLElement>('[role="tab"][data-state="active"]')
      if (active) setIndicator({ left: active.offsetLeft, width: active.offsetWidth })
    }
    measure()
    const observer = new ResizeObserver(measure)
    observer.observe(list)
    const active = list.querySelector<HTMLElement>('[role="tab"][data-state="active"]')
    if (active) {
      observer.observe(active)
      const viewport = list.parentElement
      if (viewport) {
        if (active.offsetLeft < viewport.scrollLeft) viewport.scrollLeft = active.offsetLeft
        else if (active.offsetLeft + active.offsetWidth > viewport.scrollLeft + viewport.clientWidth) {
          viewport.scrollLeft = active.offsetLeft + active.offsetWidth - viewport.clientWidth
        }
      }
    }
    return () => observer.disconnect()
  }, [activeValue, children])

  return (
    <div className="border-b bg-background px-4 sm:px-6">
      <div className="overflow-x-auto">
        <TabsPrimitive.List ref={listRef} className={cn("relative flex w-max min-w-full items-center gap-1", className)} {...props}>
          {children}
          <span aria-hidden="true" className="pointer-events-none absolute bottom-0 h-0.5 bg-primary transition-[left,width] duration-200 ease-out motion-reduce:transition-none" style={{ left: indicator.left, width: indicator.width }} />
        </TabsPrimitive.List>
      </div>
    </div>
  )
}

export const FeatureTabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger ref={ref} className={cn(
    "inline-flex min-h-12 shrink-0 items-center justify-center gap-2 whitespace-nowrap px-3 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary motion-reduce:transition-none",
    className
  )} {...props} />
))
FeatureTabsTrigger.displayName = "FeatureTabsTrigger"

export const FeatureTabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content ref={ref} className={cn(
    "min-w-0 p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring sm:p-6",
    className
  )} {...props} />
))
FeatureTabsContent.displayName = "FeatureTabsContent"

/** Rounded inner tabs stay visually distinct from the primary underline row. */
export const FeatureSubTabsList = React.forwardRef<
  React.ElementRef<typeof InnerTabsList>,
  React.ComponentPropsWithoutRef<typeof InnerTabsList>
>(({ className, ...props }, ref) => (
  <div className="max-w-full overflow-x-auto">
    <InnerTabsList ref={ref} variant="default" className={className} {...props} />
  </div>
))
FeatureSubTabsList.displayName = "FeatureSubTabsList"

export const FeatureSubTabsTrigger = InnerTabsTrigger

/** A compact view switcher when the same preview changes, rather than tab panels. */
export function FeatureSubNavigation({ label, value, onValueChange, options }: {
  label: string
  value: string
  onValueChange: (value: string) => void
  options: { value: string; label: string; pro?: boolean }[]
}) {
  return (
    <div className="max-w-full overflow-x-auto">
      <div role="group" aria-label={label} className={tabsListVariants({ variant: "default" })}>
        {options.map(option => (
          <button key={option.value} type="button" aria-pressed={value === option.value} onClick={() => onValueChange(option.value)} className={cn(tabsTriggerClassName, "aria-[pressed=true]:bg-background aria-[pressed=true]:text-foreground aria-[pressed=true]:shadow-sm")}>
            {option.label}{option.pro && <ProIndicator size="sm" />}
          </button>
        ))}
      </div>
    </div>
  )
}