import { useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { Search, Sun, Moon, Plus, Menu } from 'lucide-react';
import { Button, Input } from '@/components/ui';

const TITLES: Record<string, { title: string; sub?: string }> = {
  '/timeline': { title: '时间线', sub: '按学年与月份回顾全部足迹' },
  '/records': { title: '记录', sub: '全部足迹的检索与管理' },
  '/grades': { title: '成绩', sub: '学年学科成绩 · 梯度与总览' },
  '/dashboard': { title: '统计', sub: '量化个人成长收获' },
  '/types': { title: '记录类型', sub: '类型与字段模板管理' },
  '/taxonomy': { title: '字典与维度', sub: '级别、角色与成长维度' },
  '/profile': { title: '个人信息', sub: '学籍与联系方式维护' },
  '/resume': { title: '我的简历', sub: '模板配置 · Word 导出' },
  '/assessment': { title: '综合测评', sub: '学年素质测评与材料导出' },
  '/admin': { title: '管理', sub: '用户与邀请码 · 数据维护' },
};

export function Header({ onMenu }: { onMenu?: () => void }) {
  const { pathname } = useLocation();
  const navigate = useNavigate();
  const [q, setQ] = useState('');
  const [dark, setDark] = useState(document.documentElement.classList.contains('dark'));

  const meta = TITLES[pathname] ?? { title: '' };

  const toggleTheme = () => {
    const next = !dark;
    setDark(next);
    document.documentElement.classList.toggle('dark', next);
    localStorage.setItem('fp-theme', next ? 'dark' : 'light');
    window.dispatchEvent(new CustomEvent('fp-theme-change'));
  };

  return (
    <header className="no-print flex h-14 shrink-0 items-center gap-2 border-b border-line bg-surface px-3 sm:gap-4 sm:px-5">
      <Button variant="ghost" size="icon" className="lg:hidden" onClick={onMenu} aria-label="打开导航">
        <Menu size={17} />
      </Button>

      <div className="min-w-0">
        <h1 className="truncate text-[15px] font-semibold leading-tight text-ink-1">{meta.title}</h1>
        {meta.sub && <p className="truncate text-[11px] leading-tight text-ink-3">{meta.sub}</p>}
      </div>

      <div className="relative ml-auto hidden w-[240px] md:block lg:w-[280px]">
        <Search size={14} className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-ink-3" />
        <Input
          className="pl-8"
          placeholder="搜索标题、内容、结果、标签"
          value={q}
          onChange={e => setQ(e.target.value)}
          onKeyDown={e => {
            if (e.key === 'Enter' && q.trim()) {
              navigate('/records?q=' + encodeURIComponent(q.trim()));
            }
          }}
        />
      </div>

      <Button variant="ghost" size="icon" onClick={toggleTheme} aria-label="切换主题">
        {dark ? <Sun size={15} /> : <Moon size={15} />}
      </Button>

      <Button variant="primary" onClick={() => navigate('/records?new=1')} aria-label="新建记录">
        <Plus size={14} />
        <span className="hidden sm:inline">新建记录</span>
      </Button>
    </header>
  );
}