import React, { useMemo } from 'react';
import { Avatar, Dropdown, Space } from 'antd';
import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { useLocation, useNavigate } from 'react-router-dom';
import { useAuthStore } from '@/store/authStore';
import { useLogout } from '@/hooks/useAuth';
import type { MenuProps } from 'antd';

const extractProjectId = (pathname: string) => {
  const match = pathname.match(/^\/projects\/([^/]+)/);
  return match?.[1] || '';
};

const Header: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const user = useAuthStore((state) => state.user);
  const logoutMutation = useLogout();
  const projectId = extractProjectId(location.pathname);

  const navItems = useMemo(() => {
    const projectNav = projectId
      ? [
          { key: 'assets', label: '素材库', path: `/projects/${projectId}/assets` },
          { key: 'titles', label: '标题库', path: `/projects/${projectId}/titles` },
          { key: 'voices', label: '配音库', path: `/projects/${projectId}/voices` },
          { key: 'generation', label: '视频剪辑', path: `/projects/${projectId}/generation` },
          { key: 'results', label: '成片库', path: `/projects/${projectId}/results` },
        ]
      : [];

    return [
      { key: 'home', label: '首页', path: '/workspaces' },
      { key: 'subscription', label: '订阅', path: '/subscription' },
      ...projectNav,
    ];
  }, [projectId]);

  const menuItems: MenuProps['items'] = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: '个人设置',
      onClick: () => navigate('/profile'),
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: '账号设置',
      onClick: () => navigate('/profile/settings'),
    },
    { type: 'divider' },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
      onClick: () => logoutMutation.mutateAsync(),
    },
  ];

  return (
    <header className="xx-top-nav">
      <div className="xx-top-nav-inner">
        <button className="xx-brand" type="button" onClick={() => navigate('/workspaces')}>
          <span className="xx-logo">🦐</span>
          <span>小虾自动剪辑</span>
        </button>

        <nav className="xx-nav-links">
          {navItems.map((item) => {
            const active = item.path === '/workspaces'
              ? location.pathname === '/' || location.pathname.startsWith('/workspaces')
              : location.pathname.startsWith(item.path);
            return (
              <button
                key={item.key}
                className={active ? 'active' : ''}
                type="button"
                onClick={() => navigate(item.path)}
              >
                {item.label}
              </button>
            );
          })}
        </nav>

        <Dropdown menu={{ items: menuItems }} placement="bottomRight">
          <Space className="xx-user-menu">
            <Avatar className="xx-avatar" icon={<UserOutlined />} />
            <span>{user?.display_name || user?.username || '小虾用户'}</span>
          </Space>
        </Dropdown>
      </div>
    </header>
  );
};

export default Header;