import { useState } from 'react';
import { Bell, Globe2, Link, LogOut, Menu, ShieldCheck, UserRound, X } from 'lucide-react';

const navItems = [
  { view: 'sites', label: 'サイト一覧', icon: Globe2 },
  { view: 'alerts', label: 'アラート履歴', icon: Bell },
  { view: 'notifications', label: '通知方法', icon: Link },
  { view: 'account', label: 'アカウント', icon: UserRound },
];

export function Sidebar({ activeView, user, onNavigate, onLogout }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const MenuIcon = menuOpen ? X : Menu;

  function handleNavigate(view) {
    onNavigate(view);
    setMenuOpen(false);
  }

  function handleLogout() {
    setMenuOpen(false);
    onLogout();
  }

  return (
    <aside className={`sidebar ${menuOpen ? 'menu-open' : ''}`} aria-label="メインメニュー">
      <div className="sidebar-brand">
        <ShieldCheck aria-hidden="true" size={24} />
        <span>CertRemind</span>
      </div>

      <div className="sidebar-mobile-user">
        <UserRound aria-hidden="true" size={18} />
        <span>{user.displayName}</span>
      </div>

      <button
        className="sidebar-menu-button"
        type="button"
        onClick={() => setMenuOpen((open) => !open)}
        aria-expanded={menuOpen}
        aria-controls="sidebar-menu"
        aria-label={menuOpen ? 'メニューを閉じる' : 'メニューを開く'}
        title={menuOpen ? 'メニューを閉じる' : 'メニューを開く'}
      >
        <MenuIcon aria-hidden="true" size={22} />
      </button>

      <nav className="sidebar-nav" id="sidebar-menu">
        {navItems.map((item) => {
          const Icon = item.icon;
          const active = activeView === item.view;
          return (
            <button
              className={`sidebar-link ${active ? 'active' : ''}`}
              key={item.view}
              onClick={() => handleNavigate(item.view)}
              aria-current={active ? 'page' : undefined}
              title={item.label}
            >
              <Icon aria-hidden="true" size={20} />
              <span>{item.label}</span>
            </button>
          );
        })}
      </nav>

      <div className="sidebar-footer">
        <div className="sidebar-user">
          <UserRound aria-hidden="true" size={18} />
          <span>{user.displayName}</span>
        </div>
        <button className="sidebar-link" onClick={handleLogout} title="ログアウト">
          <LogOut aria-hidden="true" size={20} />
          <span>ログアウト</span>
        </button>
      </div>
    </aside>
  );
}