/**
 * Header — 标题栏
 *
 * Logo + 会话标题 + 设置按钮。
 */

import { Box, IconButton, Tooltip, Stack, Typography } from '@mui/material';
import { Settings } from 'lucide-react';
import { useUIStore } from '@renderer/stores/ui-store';
import { useSessionStore } from '@renderer/stores/session-store';

type WebkitCSS = React.CSSProperties & { WebkitAppRegion?: string };

export function Header(): React.JSX.Element {
  const openSettings = useUIStore((s) => s.openSettings);
  const currentSessionId = useSessionStore((s) => s.currentSessionId);
  const sessions = useSessionStore((s) => s.sessions);
  const currentSession = sessions.find((s) => s.id === currentSessionId);

  return (
    <header
      style={{
        flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 16px', height: 40, userSelect: 'none',
        background: 'var(--bg-secondary)', borderBottom: '1px solid var(--border-color)',
        WebkitAppRegion: 'drag',
      } as WebkitCSS}
    >
      <Stack direction="row" spacing={1} alignItems="center" sx={{ minWidth: 0 }}>
        <Box component="img" src="./assets/logo.png" alt="Metona" sx={{ width: 20, height: 20, borderRadius: 0.5 }} />
        <Typography variant="body2" sx={{ fontWeight: 600, color: 'primary.main', fontSize: 13 }}>MetonaAI</Typography>
        {currentSession && (
          <>
            <Typography variant="body2" sx={{ color: 'divider' }}>·</Typography>
            <Typography variant="caption" sx={{ color: 'text.secondary', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{currentSession.title}</Typography>
          </>
        )}
      </Stack>
      <Stack direction="row" spacing={0.5} sx={{ WebkitAppRegion: 'no-drag' } as WebkitCSS}>
        <Tooltip title="设置 (Ctrl+,)"><IconButton size="small" onClick={openSettings} sx={{ color: 'text.secondary' }}><Settings size={14} /></IconButton></Tooltip>
      </Stack>
    </header>
  );
}
