// shadcn/ui-inspired primitives for Hanyang Bot
const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React;

// Context for the current language
const LangCtx = createContext({ lang: 'ko', t: window.I18N.ko, setLang: () => {}, zhVariant: 'cn', setZhVariant: () => {} });
const useLang = () => useContext(LangCtx);

// Classnames helper
const cx = (...a) => a.filter(Boolean).join(' ');

// shadcn-style Button
function Button({ variant = 'default', size = 'md', className = '', children, ...rest }) {
  const base = 'inline-flex items-center justify-center gap-2 rounded-lg font-semibold transition-all duration-200 focus-ring disabled:opacity-60 disabled:pointer-events-none select-none';
  const variants = {
    default: 'bg-hanyang-600 text-white hover:bg-hanyang-700 active:bg-hanyang-800 shadow-sm hover:shadow-hanyang',
    gold:    'bg-gold-500 text-hanyang-900 hover:bg-gold-400 active:bg-gold-600 shadow-sm hover:shadow-gold',
    outline: 'border border-ink-200 text-ink-800 bg-white hover:bg-ink-50 hover:border-ink-300',
    ghost:   'text-ink-700 hover:bg-ink-100',
    link:    'text-hanyang-600 hover:text-hanyang-700 underline underline-offset-4',
    subtle:  'bg-hanyang-50 text-hanyang-700 hover:bg-hanyang-100',
  };
  const sizes = {
    sm: 'h-8 px-3 text-[13px]',
    md: 'h-10 px-4 text-[14px]',
    lg: 'h-12 px-6 text-[15px]',
    xl: 'h-14 px-7 text-[16px]',
    icon: 'h-10 w-10',
  };
  return (
    <button className={cx(base, variants[variant], sizes[size], className)} {...rest}>
      {children}
    </button>
  );
}

// Card
function Card({ className = '', children, as: As = 'div', ...rest }) {
  return (
    <As className={cx('bg-white rounded-2xl border border-ink-100 shadow-card', className)} {...rest}>
      {children}
    </As>
  );
}

// Badge
function Badge({ children, tone = 'ink', className = '' }) {
  const tones = {
    ink:     'bg-ink-100 text-ink-700 border-ink-200',
    hanyang: 'bg-hanyang-50 text-hanyang-700 border-hanyang-100',
    gold:    'bg-gold-50 text-gold-700 border-gold-200',
    outline: 'bg-white text-ink-600 border-ink-200',
    solid:   'bg-hanyang-600 text-white border-hanyang-600',
    dark:    'bg-ink-900 text-white border-ink-900',
  };
  return (
    <span className={cx('inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-semibold tracking-wide uppercase rounded-full border', tones[tone], className)}>
      {children}
    </span>
  );
}

// Section wrapper (consistent vertical rhythm)
function Section({ id, eyebrow, title, sub, children, className = '', align = 'left', toneNav = null }) {
  return (
    <section id={id} data-screen-label={toneNav} className={cx('py-20 md:py-28', className)}>
      <div className="max-w-[1200px] mx-auto px-6 md:px-10">
        {(eyebrow || title) && (
          <div className={cx('mb-12 md:mb-16 max-w-3xl', align === 'center' && 'mx-auto text-center')}>
            {eyebrow && (
              <div className="text-[12px] font-semibold uppercase tracking-[0.16em] text-hanyang-600 mb-4">
                {eyebrow}
              </div>
            )}
            {title && (
              <h2 className="text-[34px] md:text-[48px] leading-[1.1] font-extrabold text-ink-900 tracking-tight text-pretty">
                {title}
              </h2>
            )}
            {sub && (
              <p className="mt-4 text-[16px] md:text-[18px] leading-relaxed text-ink-500 max-w-2xl text-pretty">
                {sub}
              </p>
            )}
          </div>
        )}
        {children}
      </div>
    </section>
  );
}

// Language toggle — three-state segmented control
function LangToggle() {
  const { lang, setLang, zhVariant, setZhVariant } = useLang();
  // KO · 简(zhCN) · 繁(zhTW) · EN — 中文은 lang='zh' 유지 + zhVariant로 간/번 구분
  const opts = [
    { label: 'KO', font: 'font-ko', active: lang === 'ko',
      on: () => setLang('ko') },
    { label: '简', font: 'font-sc', active: lang === 'zh' && zhVariant === 'cn',
      on: () => { setLang('zh'); setZhVariant('cn'); } },
    { label: '繁', font: 'font-tc', active: lang === 'zh' && zhVariant === 'tw',
      on: () => { setLang('zh'); setZhVariant('tw'); } },
    { label: 'EN', font: 'font-en', active: lang === 'en',
      on: () => setLang('en') },
  ];
  return (
    <div role="radiogroup" aria-label="Language"
         className="inline-flex items-center p-0.5 rounded-full border border-ink-200 bg-white shadow-sm">
      {opts.map((o, i) => (
        <button
          key={i}
          role="radio"
          aria-checked={o.active}
          onClick={o.on}
          className={cx(
            'px-3 h-8 min-w-[36px] rounded-full text-[12px] font-bold tracking-wide transition-all',
            o.font,
            o.active
              ? 'bg-hanyang-600 text-white shadow-sm'
              : 'text-ink-500 hover:text-ink-800'
          )}
        >
          {o.label}
        </button>
      ))}
    </div>
  );
}

// Tier badge pill — circular medal
function TierMedal({ color = 'bronze', size = 56, glow = false }) {
  const palette = {
    bronze:   { from: '#c08b5c', to: '#7a4b1f', ring: '#ddae7e' },
    silver:   { from: '#d3d9e2', to: '#8a92a1', ring: '#e3e7ee' },
    gold:     { from: '#f6d472', to: '#cf9417', ring: '#f8e2a0' },
    platinum: { from: '#c4d7ec', to: '#6b85a8', ring: '#dfe9f5' },
  };
  const p = palette[color] || palette.bronze;
  return (
    <div
      className={cx('relative rounded-full grid place-items-center', glow && 'animate-float')}
      style={{
        width: size, height: size,
        background: `radial-gradient(circle at 30% 25%, ${p.from} 0%, ${p.to} 75%)`,
        boxShadow: glow ? `0 6px 24px ${p.to}55, inset 0 0 0 2px ${p.ring}` : `inset 0 0 0 2px ${p.ring}`,
      }}
    >
      <div className="absolute inset-[6px] rounded-full"
           style={{ border: `1px dashed ${p.ring}`, opacity: 0.8 }} />
      <svg width={size*0.42} height={size*0.42} viewBox="0 0 24 24" fill="none" className="relative z-10">
        <path d="M12 2l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-1.5L12 2z"
              fill="#fff" fillOpacity="0.95" />
      </svg>
    </div>
  );
}

// Progress bar (shadcn Progress style)
function Progress({ value = 0, className = '' }) {
  return (
    <div className={cx('h-2 w-full rounded-full bg-ink-100 overflow-hidden', className)}>
      <div
        className="h-full rounded-full bg-gradient-to-r from-hanyang-600 to-gold-500 transition-[width] duration-500"
        style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
      />
    </div>
  );
}

// Localized text dict (multilingual mini-pill showing the same concept in 3 languages)
function TriBadge({ ko, zh, en, className = '' }) {
  return (
    <div className={cx('inline-flex items-center gap-1 text-[10.5px] font-semibold', className)}>
      <span className="px-2 py-0.5 rounded-full bg-hanyang-50 text-hanyang-700 font-ko border border-hanyang-100">{ko}</span>
      <span className="px-2 py-0.5 rounded-full bg-gold-50 text-gold-800 font-tc border border-gold-200">{zh}</span>
      <span className="px-2 py-0.5 rounded-full bg-ink-100 text-ink-700 font-en border border-ink-200">{en}</span>
    </div>
  );
}

Object.assign(window, {
  cx, LangCtx, useLang,
  Button, Card, Badge, Section, LangToggle, TierMedal, Progress, TriBadge,
});