// dudu 桌面端 · 系统托盘菜单 + 设置窗口

function TrayMenu() {
  const { Badge } = window.DuduDesignSystem_2e0172;
  const Item = ({ children, right, accent, onClick }) => {
    const [hover, setHover] = React.useState(false);
    return (
      <div
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onClick={onClick}
        style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 18,
          padding: '7px 14px', cursor: 'default', fontSize: 'var(--text-sm)',
          background: hover ? 'var(--accent)' : 'transparent',
          color: hover ? 'var(--text-on-accent)' : (accent ? 'var(--text-1)' : 'var(--text-1)'),
          transition: 'background var(--dur-fast) var(--ease-out)',
        }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap' }}>{children}</span>
        {right && <span style={{ fontSize: 'var(--text-xs)', color: hover ? 'var(--text-on-accent)' : 'var(--text-3)', opacity: hover ? 0.8 : 1, whiteSpace: 'nowrap' }}>{right}</span>}
      </div>
    );
  };
  const Sep = () => <div style={{ height: 1, background: 'var(--border-1)', margin: '4px 0' }}></div>;
  return (
    <div style={{
      width: 248, padding: '5px 0', fontFamily: 'var(--font-sans)',
      background: 'color-mix(in srgb, var(--surface-card) 96%, transparent)',
      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
      border: '1px solid var(--border-1)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-menu)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 14px 6px' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-medium)', color: 'var(--text-1)', whiteSpace: 'nowrap' }}>
          <DuduLogo size={17} /> dudu 语音输入
        </span>
        <Badge tone="green">已就绪</Badge>
      </div>
      <Sep />
      <Item right={<DuIcons.Check size={13} />}>启用快捷键</Item>
      <Item right="⌘⇧Space">按住说话</Item>
      <Item>设置…</Item>
      <Item right="472 分钟">时长余额</Item>
      <Sep />
      <Item right="已登录">账号 wang***</Item>
      <Item>检查更新</Item>
      <Sep />
      <Item>退出 dudu</Item>
    </div>
  );
}

// 设置屏（2026-07-11 改版）：分组从「灰字 + 通栏细线」改为卡片体块——
// 组标题在卡外、每组一张 radius-lg 卡片、卡内行以内嵌分隔线相隔；
// 载入时分组 4 段轻微上浮淡入（对齐浮层动效语言，120/40ms 级差）。
const ddSettingsCss = `
@keyframes dd-set-in { from { opacity: 0; transform: translateY(4px); } }
.dd-set-group { animation: dd-set-in var(--dur-base) var(--ease-out) both; }
`;
if (typeof document !== 'undefined' && !document.getElementById('dd-settings-css')) {
  const s = document.createElement('style');
  s.id = 'dd-settings-css';
  s.textContent = ddSettingsCss;
  document.head.appendChild(s);
}

function SettingsWindow({ theme, onThemeChange }) {
  const { Switch, SettingRow, HotkeyCombo, Button, Badge, ProgressBar, Select, Card } = window.DuduDesignSystem_2e0172;
  const [autostart, setAutostart] = React.useState(true);
  const [sound, setSound] = React.useState(false);
  const [mic, setMic] = React.useState('MacBook Pro 麦克风');

  const Group = ({ title, order = 0, children }) => (
    <div className="dd-set-group" style={{ animationDelay: `${order * 40}ms` }}>
      <div style={{
        fontSize: 'var(--text-xs)', color: 'var(--text-3)', fontWeight: 'var(--weight-medium)',
        letterSpacing: 'var(--tracking-wide)', margin: '0 0 6px 4px',
      }}>{title}</div>
      <Card padding="0 16px" style={{ borderRadius: 'var(--radius-lg)' }}>{children}</Card>
    </div>
  );

  const themeOptions = [['system', '跟随系统'], ['light', '浅色'], ['dark', '深色']];

  return (
    <MacWindow title="dudu 设置" width={440}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '10px 16px 16px', background: 'var(--bg-app)' }}>
        <Group title="输入" order={0}>
          <SettingRow label="说话快捷键" description="按住说话，松开上屏">
            <HotkeyCombo keys={['⌘', '⇧', 'Space']} />
            <Button variant="ghost" size="sm">修改</Button>
          </SettingRow>
          <SettingRow label="麦克风">
            <Select
              value={mic}
              onChange={setMic}
              options={['MacBook Pro 麦克风', 'AirPods Pro', '外接 USB 麦克风']}
            />
          </SettingRow>
          <SettingRow label="提示音" description="开始 / 完成时播放轻提示音">
            <Switch checked={sound} onChange={setSound} />
          </SettingRow>
        </Group>

        <Group title="通用" order={1}>
          <SettingRow label="开机自启">
            <Switch checked={autostart} onChange={setAutostart} />
          </SettingRow>
          <SettingRow label="外观">
            <span style={{ display: 'inline-flex', background: 'var(--surface-2)', borderRadius: 'var(--radius-sm)', padding: 2, gap: 2 }}>
              {themeOptions.map(([val, lab]) => (
                <button key={val} type="button" onClick={() => onThemeChange(val)} style={{
                  height: 24, padding: '0 10px', borderRadius: 4, border: 'none', cursor: 'pointer',
                  fontSize: 'var(--text-xs)', fontFamily: 'var(--font-sans)',
                  background: theme === val ? 'var(--surface-card)' : 'transparent',
                  color: theme === val ? 'var(--text-1)' : 'var(--text-2)',
                  boxShadow: theme === val ? 'var(--shadow-card)' : 'none',
                  transition: 'background var(--dur-fast) var(--ease-out)',
                }}>{lab}</button>
              ))}
            </span>
          </SettingRow>
        </Group>

        <Group title="账号与时长" order={2}>
          <SettingRow label="登录状态" description="微信已登录">
            <span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-1)' }}>wang***</span>
            <Badge tone="green">余额充足</Badge>
          </SettingRow>
          <SettingRow label="时长余额" description="时长不过期 · 每天另有 3 分钟免费试用">
            <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4 }}>
              <span style={{ fontSize: 'var(--text-xl)', fontWeight: 'var(--weight-bold)', color: 'var(--text-1)' }}>472</span>
              <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-2)' }}>分钟</span>
            </span>
            <Button variant="secondary" size="sm">购买时长</Button>
          </SettingRow>
          <div style={{ padding: '12px 0 14px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--text-xs)', color: 'var(--text-2)', marginBottom: 7 }}>
              <span>今日免费试用</span><span style={{ fontFamily: 'var(--font-mono)' }}>1 / 3 分钟</span>
            </div>
            <ProgressBar value={1} max={3} />
          </div>
        </Group>

        <Group title="帮助" order={3}>
          <SettingRow label="反馈问题" description="遇到问题或建议，告诉我们">
            <Button variant="ghost" size="sm">去反馈</Button>
          </SettingRow>
        </Group>
      </div>
    </MacWindow>
  );
}

Object.assign(window, { TrayMenu, SettingsWindow });