import { Dropdown } from 'antd';
import { BgColorsOutlined } from '@ant-design/icons';
import { useAppStore, THEME_OPTIONS } from '../stores/app';

export default function ThemeSwitcher() {
  const theme = useAppStore((s) => s.theme);
  const setTheme = useAppStore((s) => s.setTheme);

  const content = (
    <div style={{
      padding: 8,
      display: 'flex',
      flexDirection: 'column',
      gap: 6,
      minWidth: 220,
      background: 'var(--erp-bg-container)',
      borderRadius: 12,
      boxShadow: 'var(--erp-shadow-lg)',
    }}>
      {THEME_OPTIONS.map((opt) => {
        const active = theme === opt.key;
        return (
          <div
            key={opt.key}
            onClick={() => setTheme(opt.key)}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 12,
              padding: '10px 12px',
              borderRadius: 8,
              cursor: 'pointer',
              border: `2px solid ${active ? opt.preview.primary : 'transparent'}`,
              background: active ? `${opt.preview.primary}08` : 'transparent',
              transition: 'all 0.15s ease',
            }}
          >
            {/* 色块预览 */}
            <div style={{ display: 'flex', gap: 3, flexShrink: 0 }}>
              <div style={{ width: 20, height: 20, borderRadius: 4, background: opt.preview.primary }} />
              <div style={{ width: 20, height: 20, borderRadius: 4, background: opt.preview.bg, border: '1px solid #e0e0e0' }} />
              <div style={{ width: 20, height: 20, borderRadius: 4, background: opt.preview.surface, border: '1px solid #e0e0e0' }} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: active ? opt.preview.primary : '#333' }}>{opt.label}</div>
              <div style={{ fontSize: 11, color: '#999', marginTop: 1 }}>{opt.desc}</div>
            </div>
            {active && (
              <div style={{ width: 8, height: 8, borderRadius: 4, background: opt.preview.primary, flexShrink: 0 }} />
            )}
          </div>
        );
      })}
    </div>
  );

  return (
    <Dropdown popupRender={() => content} trigger={['click']} placement="bottomRight">
      <div className="erp-header-btn" title="切换主题">
        <BgColorsOutlined style={{ fontSize: 16 }} />
      </div>
    </Dropdown>
  );
}