import { useState, useEffect } from 'react'
import { Link, useLocation } from 'react-router-dom'
import api from '@/services/api'
import type { User } from '@/types'

interface Props {
  user: User | null
  onLogout: () => void
}

export default function Sidebar({ user, onLogout }: Props) {
  const { pathname } = useLocation()
  const [unreadCount, setUnreadCount] = useState(0)

  useEffect(() => {
    if (!user) {
      setUnreadCount(0)
      return
    }
    api.get<{ count: number }>('/notifications/count')
      .then(({ data }) => setUnreadCount(data.count))
      .catch(() => {})
    const timer = setInterval(() => {
      api.get<{ count: number }>('/notifications/count')
        .then(({ data }) => setUnreadCount(data.count))
        .catch(() => {})
    }, 30000)
    return () => clearInterval(timer)
  }, [user])

  const links = user ? [
    { to: '/', icon: '📊', label: '仪表盘' },
    { to: '/issues', icon: '📋', label: 'Issues' },
    { to: '/projects', icon: '📁', label: '项目' },
    { to: '/milestones', icon: '🏁', label: '里程碑' },
    { to: '/notifications', icon: '🔔', label: '通知' + (unreadCount > 0 ? ' (' + unreadCount + ')' : '') },
    { to: '/monitor', icon: '📡', label: 'Monitor' },
  ] : [
    { to: '/monitor', icon: '📡', label: 'Monitor' },
  ]

  return (
    <nav className="sidebar">
      <div className="sidebar-header">
        <h1>⚓ HarborForge</h1>
      </div>
      <ul className="nav-links">
        {links.map((l) => (
          <li key={l.to} className={pathname === l.to || (l.to !== '/' && pathname.startsWith(l.to)) ? 'active' : ''}>
            <Link to={l.to}>{l.icon} {l.label}</Link>
          </li>
        ))}
      </ul>
      {user && (
        <div className="sidebar-footer">
          <span>👤 {user.username}</span>
          <button onClick={onLogout}>退出</button>
        </div>
      )}
    </nav>
  )
}