// 自绘托盘菜单（248px、blur、hover accent 反白），规格见 doc/frontend-design.html 4.2
import { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import '@dudu/design/styles.css';
import { Badge } from '@dudu/design/components/core/Badge';
import { invoke, listen } from '../shared/tauri';
import { setThemePref } from '../shared/theme';

function Item({ children, right, onClick }) {
  const [hover, setHover] = 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)' : 'var(--text-1)',
        transition: 'background var(--dur-fast) var(--ease-out)',
      }}>
      <span style={{ 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 }}>{right}</span>}
    </div>
  );
}

const Sep = () => <div style={{ height: 1, background: 'var(--border-1)', margin: '4px 0' }}></div>;

function TrayApp() {
  const [me, setMe] = useState(null);
  const [paused, setPaused] = useState(false);
  useEffect(() => {
    // 启动应用主题：深色模式下托盘菜单不再停在浅色。
    invoke('get_settings').then((s) => s && setThemePref(s.theme));
    invoke('fetch_me').then((m) => m && setMe(m));
    invoke('is_paused').then((p) => setPaused(!!p));
    listen('account', ({ payload }) => setMe(payload));
  }, []);
  const minutes = me ? Math.floor(me.balance_seconds / 60) : 0;
  return (
    <div style={{
      fontFamily: 'var(--font-sans)', padding: '5px 0',
      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)',
      overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 14px 6px' }}>
        <span style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-medium)', color: 'var(--text-1)' }}>dudu 语音输入</span>
        <Badge tone={paused ? 'orange' : 'green'}>{paused ? '已暂停' : '已就绪'}</Badge>
      </div>
      <Sep />
      <Item right="⌘⇧Space">按住说话</Item>
      <Item onClick={() => invoke('toggle_pause').then((p) => setPaused(!!p))}>
        {paused ? '继续使用' : '暂停使用'}
      </Item>
      <Item onClick={() => invoke('open_settings')}>设置…</Item>
      <Item right={me ? `${minutes} 分钟` : '—'}>时长余额</Item>
      <Sep />
      <Item right={me ? '已登录' : '未登录'} onClick={() => invoke('open_login')}>
        {me ? `账号 ${me.nickname_masked}` : '微信登录'}
      </Item>
      <Item onClick={() => invoke('check_update')}>检查更新</Item>
      <Sep />
      <Item onClick={() => invoke('quit_app')}>退出 dudu</Item>
    </div>
  );
}

createRoot(document.getElementById('root')).render(<TrayApp />);