'use client';

import { FC, ReactNode } from 'react';
import Link from 'next/link';
import { cn } from '@/utils/helpers';
import { useAppSelector, useAppDispatch } from '@/store/redux/hooks';
import { logout } from '@/store/redux/slices/authSlice';
import { Avatar, Badge } from '@/components/common';
import styles from './Header.module.scss';

interface BreadcrumbItem {
  label: string;
  path?: string;
}

export interface HeaderProps {
  title?: string;
  breadcrumb?: BreadcrumbItem[];
  actions?: ReactNode;
}

export const Header: FC<HeaderProps> = ({ title, breadcrumb = [], actions }) => {
  const dispatch = useAppDispatch();
  const user = useAppSelector((state) => state.auth.user);
  const unreadCount = useAppSelector((state) => state.notification.unreadCount);

  const handleLogout = () => {
    dispatch(logout());
    window.location.href = '/login';
  };

  return (
    <header className={styles.header}>
      <div className={styles.header__left}>
        {breadcrumb.length > 0 && (
          <nav className={styles.header__breadcrumb}>
            {breadcrumb.map((item, index) => (
              <span key={index} className={styles.header__breadcrumbItem}>
                {item.path ? (
                  <Link href={item.path} className={styles.header__breadcrumbLink}>
                    {item.label}
                  </Link>
                ) : (
                  <span className={styles.header__breadcrumbCurrent}>{item.label}</span>
                )}
                {index < breadcrumb.length - 1 && (
                  <span className={styles.header__breadcrumbSeparator}>/</span>
                )}
              </span>
            ))}
          </nav>
        )}
        {title && <h1 className={styles.header__title}>{title}</h1>}
      </div>

      <div className={styles.header__right}>
        {actions && <div className={styles.header__actions}>{actions}</div>}

        <button className={styles.header__iconButton}>
          <Badge count={unreadCount} variant="error">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
              <path d="M13.73 21a2 2 0 0 1-3.46 0" />
            </svg>
          </Badge>
        </button>

        <div className={styles.header__user}>
          <Avatar
            src={user?.avatar}
            name={user?.nickname || user?.username}
            size="sm"
            online
          />
          <div className={styles.header__userInfo}>
            <span className={styles.header__userName}>{user?.nickname || '管理员'}</span>
            <span className={styles.header__userRole}>{user?.role || '超级管理员'}</span>
          </div>
          <div className={styles.header__dropdown}>
            <button className={styles.header__dropdownItem}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                <circle cx="12" cy="7" r="4" />
              </svg>
              个人信息
            </button>
            <button className={styles.header__dropdownItem}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <circle cx="12" cy="12" r="3" />
                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
              </svg>
              账号设置
            </button>
            <div className={styles.header__dropdownDivider} />
            <button className={cn(styles.header__dropdownItem, styles['header__dropdownItem--danger'])} onClick={handleLogout}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
                <polyline points="16 17 21 12 16 7" />
                <line x1="21" y1="12" x2="9" y2="12" />
              </svg>
              退出登录
            </button>
          </div>
        </div>
      </div>
    </header>
  );
};
