import type { DesignTheme } from './designTheme';

export type DesignTab = 'foundations' | 'components';

interface DesignHeaderProps {
  activeTab: DesignTab;
  onTabChange: (tab: DesignTab) => void;
  theme: DesignTheme;
  onThemeToggle: () => void;
}

const TABS: { label: string; id: DesignTab }[] = [
  { label: 'Foundations', id: 'foundations' },
  { label: 'Components', id: 'components' },
];

export const DesignHeader = ({ activeTab, onTabChange, theme, onThemeToggle }: DesignHeaderProps) => {
  const isDark = theme.mode === 'dark';

  return (
    <header
      className="h-16 px-8 flex flex-row items-center justify-between shrink-0 border-b border-solid"
      style={{
        backgroundColor: theme.headerBg,
        borderColor: theme.headerBorder,
      }}
    >
      {/* 좌측: 로고 + 버전 뱃지 */}
      <div className="flex flex-row items-center gap-3">
        <span
          className="font-sans text-2xl leading-8 font-bold"
          style={{ letterSpacing: '2.4px', color: theme.textAccent }}
        >
          WING-OPS
        </span>
        <div
          className="rounded-sm border border-solid py-1 px-2"
          style={{
            backgroundColor: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)',
            borderColor: isDark ? 'rgba(255,255,255,0.10)' : '#e2e8f0',
          }}
        >
          <span
            className="font-sans text-[10px] leading-[15px] uppercase"
            style={{ letterSpacing: '2px', color: theme.textMuted }}
          >
            Design System v1.0
          </span>
        </div>
      </div>

      {/* 중앙: 탭 네비게이션 */}
      <nav className="flex flex-row gap-8">
        {TABS.map(({ label, id }) => {
          const isActive = activeTab === id;

          return (
            <button
              key={label}
              type="button"
              onClick={() => onTabChange(id)}
              className={`font-sans text-base leading-6 bg-transparent cursor-pointer ${
                isActive ? 'font-bold border-b-2 pb-1' : 'font-medium border-none'
              }`}
              style={{
                letterSpacing: '-0.4px',
                color: isActive ? theme.textAccent : theme.textMuted,
                borderColor: isActive ? theme.textAccent : 'transparent',
              }}
            >
              {label}
            </button>
          );
        })}
      </nav>

      {/* 우측: 테마 토글 */}
      <div className="flex flex-row items-center">
        <button
          type="button"
          onClick={onThemeToggle}
          className="w-10 h-10 rounded-md border border-solid flex items-center justify-center cursor-pointer"
          style={{
            backgroundColor: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)',
            borderColor: isDark ? 'rgba(255,255,255,0.10)' : '#e2e8f0',
          }}
          title={isDark ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
        >
          <span className="text-lg">{isDark ? '☀️' : '🌙'}</span>
        </button>
      </div>
    </header>
  );
};

export default DesignHeader;