import { type ButtonHTMLAttributes, type ReactNode } from 'react';
import { cn } from '@lib/utils/cn';

/**
 * TabBar — 탭 버튼 그룹 공통 컴포넌트
 *
 * 3가지 스타일:
 * - 'underline' (기본): border-b 밑줄 탭 (MLOps, RiskMap 스타일)
 * - 'pill': 라운드 pill 탭 (ChinaFishing 스타일)
 * - 'segmented': 배경 그룹 segmented control 스타일
 *
 * 사용:
 *   <TabBar>
 *     <TabButton active={tab === 'a'} onClick={() => setTab('a')}>탭 A</TabButton>
 *     <TabButton active={tab === 'b'} onClick={() => setTab('b')}>탭 B</TabButton>
 *   </TabBar>
 */

export interface TabBarProps {
  variant?: 'underline' | 'pill' | 'segmented';
  children: ReactNode;
  className?: string;
}

export function TabBar({ variant = 'underline', children, className }: TabBarProps) {
  const variantClass = {
    underline: 'flex gap-0 border-b border-border',
    pill: 'flex items-center gap-1',
    segmented: 'flex items-center gap-1 bg-surface-raised rounded-lg p-1 border border-border w-fit',
  }[variant];
  return <div className={cn(variantClass, className)}>{children}</div>;
}

export interface TabButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  active?: boolean;
  variant?: 'underline' | 'pill' | 'segmented';
  icon?: ReactNode;
  children: ReactNode;
}

/**
 * TabButton — 단일 탭 버튼. active 상태에 따라 스타일 변화.
 */
export function TabButton({
  active = false,
  variant = 'underline',
  icon,
  children,
  className,
  type = 'button',
  ...props
}: TabButtonProps) {
  const variantClass = {
    underline: cn(
      'flex items-center gap-1.5 px-4 py-2 text-[11px] font-medium border-b-2 transition-colors',
      active ? 'text-blue-400 border-blue-400' : 'text-hint border-transparent hover:text-label',
    ),
    pill: cn(
      'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-medium transition-colors',
      active
        ? 'bg-blue-600 text-on-vivid'
        : 'text-muted-foreground hover:bg-secondary hover:text-foreground',
    ),
    segmented: cn(
      'flex items-center gap-1.5 px-4 py-2 rounded-md text-[11px] font-medium transition-colors',
      active
        ? 'bg-blue-600 text-on-vivid'
        : 'text-muted-foreground hover:text-foreground hover:bg-surface-overlay',
    ),
  }[variant];

  return (
    <button type={type} className={cn(variantClass, className)} {...props}>
      {icon}
      {children}
    </button>
  );
}
