{label && {label}}

e.target.style.borderColor = 'rgba(255,255,255,0.2)'}
      onBlur={e => e.target.style.borderColor = 'rgba(255,255,255,0.08)'} />
  </div>
);

const AdminSelect = ({ label, options, value, onChange }) => (
  <div style={{ marginBottom: 16 }}>
    {label && <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>{label}</label>}
    <select value={value} onChange={onChange} style={{ ...inputBase, height: 40, padding: '0 12px', appearance: 'none', cursor: 'pointer' }}>
      {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
    </select>
  </div>
);

/* ─── Language Tabs ─── */
const LanguageTabs = ({ activeLang, onLangChange }) => {
  const theme = useTheme();
  const langs = [{ id: 'ko', label: 'KO' }, { id: 'en', label: 'EN' }, { id: 'zh', label: 'ZH' }, { id: 'ja', label: 'JA' }];
  return (
    <div style={{ display: 'flex', gap: 2, padding: 3, background: 'rgba(255,255,255,0.04)', borderRadius: 8, marginBottom: 20, width: 'fit-content' }}>
      {langs.map(l => (
        <button key={l.id} onClick={() => onLangChange(l.id)} style={{
          padding: '6px 16px', border: 'none', borderRadius: 6, cursor: 'pointer', fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11, fontWeight: 500, letterSpacing: '0.3px', transition: 'all 0.15s',
          background: activeLang === l.id ? theme.accent : 'transparent',
          color: activeLang === l.id ? '#fff' : 'rgba(255,255,255,0.45)',
        }}>{l.label}</button>
      ))}
    </div>
  );
};

/* ─── Media Uploader ─── */
const MediaUploader = ({ label, accept = 'image/*' }) => {
  const theme = useTheme();
  const [hovered, setHovered] = React.useState(false);
  return (
    <div style={{ marginBottom: 16 }}>
      {label && <label style={{ display: 'block', fontSize: 12, fontWeight: 500, color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>{label}</label>}
      <div style={{
        border: `2px dashed ${hovered ? theme.accent : 'rgba(255,255,255,0.08)'}`,
        borderRadius: theme.borderRadius, padding: '36px 20px', textAlign: 'center',
        background: hovered ? theme.accentBg : 'transparent', transition: 'all 0.2s', cursor: 'pointer',
      }} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
        <div style={{ color: hovered ? theme.accent : 'rgba(255,255,255,0.3)', marginBottom: 10 }}><AdminIcon name="upload" size={28} /></div>
        <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', margin: 0 }}>클릭하거나 파일을 드래그하세요</p>
        <p style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)', margin: '6px 0 0' }}>{accept === 'image/*' ? 'PNG, JPG, SVG (최대 5MB)' : 'MP4, WebM (최대 100MB)'}</p>
      </div>
    </div>
  );
};

/* ─── Search Input ─── */
const SearchInput = ({ placeholder = '검색...', value, onChange }) => (
  <div style={{ position: 'relative', minWidth: 200 }}>
    <span style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: 'rgba(255,255,255,0.3)' }}><AdminIcon name="search" size={15} /></span>
    <input placeholder={placeholder} value={value} onChange={onChange}
      style={{ ...inputBase, height: 36, padding: '0 12px 0 34px', fontSize: 12, borderRadius: 8 }}
      onFocus={e => e.target.style.borderColor = 'rgba(255,255,255,0.2)'}
      onBlur={e => e.target.style.borderColor = 'rgba(255,255,255,0.08)'} />
  </div>
);

/* ─── Data Table ─── */
const AdminTable = ({ columns, data, onRowClick }) => {
  const [hoveredRow, setHoveredRow] = React.useState(null);
  return (
    <div style={{ overflowX: 'auto', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 10 }}>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
        <thead>
          <tr style={{ borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
            {columns.map(col => (
              <th key={col.key} style={{ padding: '12px 16px', textAlign: 'left', fontSize: 11, fontWeight: 500, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.5px', whiteSpace: 'nowrap' }}>{col.label}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((row, i) => (
            <tr key={i} onClick={() => onRowClick?.(row, i)}
              onMouseEnter={() => setHoveredRow(i)} onMouseLeave={() => setHoveredRow(null)}
              style={{ borderBottom: i < data.length - 1 ? '1px solid rgba(255,255,255,0.04)' : 'none', background: hoveredRow === i ? 'rgba(255,255,255,0.02)' : 'transparent', cursor: onRowClick ? 'pointer' : 'default', transition: 'background 0.1s' }}>
              {columns.map(col => (
                <td key={col.key} style={{ padding: '12px 16px', color: '#e0e0e5', whiteSpace: 'nowrap' }}>
                  {col.render ? col.render(row[col.key], row) : row[col.key]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

/* ─── Page Shell (Sidebar + Content) ─── */
const AdminShell = ({ currentPage, onNavigate, variant, children }) => {
  const theme = useTheme();
  return (
    <div style={{ display: 'flex', minHeight: '100vh', background: theme.bg }}>
      <Sidebar currentPage={currentPage} onNavigate={onNavigate} variant={variant} />
      <main style={{ flex: 1, marginLeft: theme.sidebarW, padding: '28px 32px 48px', minHeight: '100vh', transition: 'margin-left 0.25s ease' }}>
        {children}
      </main>
    </div>
  );
};

/* ─── Export ─── */
Object.assign(window, {
  AdminIcon, ThemeCtx, useTheme, getThemeColors,
  Sidebar, TopBar, StatsCard, StatusBadge,
  AdminBtn, AdminInput, AdminTextarea, AdminSelect,
  LanguageTabs, MediaUploader, SearchInput, AdminTable, AdminShell,
});