import { ReactNode, useState } from 'react'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import './DashboardLayout.css'

interface DashboardLayoutProps {
  children: ReactNode
}

function DashboardLayout({ children }: DashboardLayoutProps) {
  const { user, logout } = useAuth()
  const location = useLocation()
  const navigate = useNavigate()
  const [sidebarOpen, setSidebarOpen] = useState(true)
  const [rmoMenuOpen, setRmoMenuOpen] = useState(false)
  const [responsibilityMenuOpen, setResponsibilityMenuOpen] = useState(false)
  const [systemMenuOpen, setSystemMenuOpen] = useState(false)

  const isActive = (path: string) => location.pathname === path
  const isActiveParent = (path: string) => location.pathname.startsWith(path)
  const isActiveParentMulti = (paths: string[]) => paths.some(path => location.pathname.startsWith(path))

  // 根据角色判断权限
  const isPolicyHolder = user?.role === '投保人'
  const isInsurer = user?.role === '保险人'
  
  // 投保人可见：项目列表、理赔进度、智能工具
  // 保险人可见：询价列表、理赔进度

  const handleLogout = () => {
    logout()
    navigate('/login')
  }

  return (
    <div className="dashboard-layout">
      {/* 侧边栏 */}
      <aside className={`dashboard-sidebar ${sidebarOpen ? 'open' : 'closed'}`}>
        <div className="sidebar-header">
          <Link to="/dashboard" className="sidebar-logo">
            <h2>RMO</h2>
            <span>工作台</span>
          </Link>
          <button 
            className="sidebar-toggle"
            onClick={() => setSidebarOpen(!sidebarOpen)}
            aria-label="切换侧边栏"
          >
            {sidebarOpen ? '◀' : '▶'}
          </button>
        </div>
        
        <nav className="sidebar-nav">
          <Link 
            to="/dashboard" 
            className={`nav-item ${isActive('/dashboard') && !isActiveParentMulti(['/dashboard/projects', '/dashboard/project-quotes', '/dashboard/inquiries', '/dashboard/claims', '/dashboard/tools']) ? 'active' : ''}`}
          >
            <span className="nav-icon">📊</span>
            {sidebarOpen && <span className="nav-text">工作台</span>}
          </Link>
          
          {/* 投保人可见：项目报价、项目列表 */}
          {isPolicyHolder && (
            <>
              <Link 
                to="/dashboard/project-quotes" 
                className={`nav-item ${isActiveParent('/dashboard/project-quotes') ? 'active' : ''}`}
              >
                <span className="nav-icon">💰</span>
                {sidebarOpen && <span className="nav-text">项目报价</span>}
              </Link>
              <Link 
                to="/dashboard/projects" 
                className={`nav-item ${isActiveParent('/dashboard/projects') ? 'active' : ''}`}
              >
                <span className="nav-icon">📋</span>
                {sidebarOpen && <span className="nav-text">项目列表</span>}
              </Link>
            </>
          )}
          
          {/* 保险人可见：询价列表 */}
          {isInsurer && (
            <Link 
              to="/dashboard/inquiries" 
              className={`nav-item ${isActiveParent('/dashboard/inquiries') ? 'active' : ''}`}
            >
              <span className="nav-icon">💼</span>
              {sidebarOpen && <span className="nav-text">询价列表</span>}
            </Link>
          )}
          
          {/* 投保人、保险人可见：理赔进度 */}
          {(isPolicyHolder || isInsurer) && (
            <Link 
              to="/dashboard/claims" 
              className={`nav-item ${isActiveParent('/dashboard/claims') ? 'active' : ''}`}
            >
              <span className="nav-icon">📝</span>
              {sidebarOpen && <span className="nav-text">理赔进度</span>}
            </Link>
          )}
          
          {/* 智能工具：所有登录用户可见 */}
          <div className="nav-group">
            <div className={`nav-item ${isActiveParentMulti(['/dashboard/tools']) ? 'active' : ''}`}>
              <span className="nav-icon">🛠️</span>
              {sidebarOpen && <span className="nav-text">智能工具</span>}
            </div>
            {isActiveParentMulti(['/dashboard/tools']) && (
              <div className="nav-submenu">
                {/* 保费测算工具：所有登录用户可见 */}
                <Link 
                  to="/dashboard/tools/premium-calculator" 
                  className={`nav-subitem ${isActive('/dashboard/tools/premium-calculator') ? 'active' : ''}`}
                >
                  保费测算工具
                </Link>
                {/* ICF智能修改：仅投保人可见 */}
                {isPolicyHolder && (
                  <Link 
                    to="/dashboard/tools/icf-editor" 
                    className={`nav-subitem ${isActive('/dashboard/tools/icf-editor') ? 'active' : ''}`}
                  >
                    ICF智能修改
                  </Link>
                )}
                {/* 方案风险评分：仅投保人可见 */}
                {isPolicyHolder && (
                  <Link 
                    to="/dashboard/tools/risk-scoring" 
                    className={`nav-subitem ${isActive('/dashboard/tools/risk-scoring') ? 'active' : ''}`}
                  >
                    方案风险评分
                  </Link>
                )}
                {/* 方案风险评估：所有登录用户可见 */}
                <Link 
                  to="/dashboard/tools/protocol-risk" 
                  className={`nav-subitem ${isActive('/dashboard/tools/protocol-risk') ? 'active' : ''}`}
                >
                  方案风险评估
                </Link>
                {/* 药安查：所有登录用户可见 */}
                <Link 
                  to="/dashboard/tools/drug-safety" 
                  className={`nav-subitem ${isActive('/dashboard/tools/drug-safety') ? 'active' : ''}`}
                >
                  药安查
                </Link>
              </div>
            )}
          </div>
        </nav>
      </aside>

      {/* 主内容区 */}
      <div className="dashboard-main">
        {/* 顶部栏 */}
        <header className="dashboard-header">
          <div className="header-left">
            <Link to="/" className="header-logo">
              <h2>RMO</h2>
              <span>生命科学风险管理</span>
            </Link>
            <nav className="header-nav">
              <Link to="/" className={isActive('/') ? 'active' : ''}>
                首页
              </Link>

              {/* 风险职责 */}
              <div 
                className="nav-dropdown"
                onMouseEnter={() => setResponsibilityMenuOpen(true)}
                onMouseLeave={() => setResponsibilityMenuOpen(false)}
              >
                <Link 
                  to="/RMO-About-Responsibility" 
                  className={isActiveParentMulti(['/RMO-About-Responsibility', '/sponsor', '/Holder', '/institution', '/service-provider', '/participant']) ? 'active' : ''}
                >
                  风险职责
                </Link>
                {responsibilityMenuOpen && (
                  <div className="dropdown-menu">
                    <Link to="/sponsor">申办者职责</Link>
                    <Link to="/Holder">持有人职责</Link>
                    <Link to="/participant">受试者专区</Link>
                    <Link to="/institution">研究中心</Link>
                    <Link to="/service-provider">CXO职责</Link>
                  </div>
                )}
              </div>

              {/* 临床试验 */}
              <div 
                className="nav-dropdown"
                onMouseEnter={() => setRmoMenuOpen(true)}
                onMouseLeave={() => setRmoMenuOpen(false)}
              >
                <Link 
                  to="/rmo-mode" 
                  className={isActiveParentMulti(['/rmo-mode', '/insurance', '/guarantee', '/insurance-guarantee']) ? 'active' : ''}
                >                
                </Link>
                {rmoMenuOpen && (
                  <div className="dropdown-menu">
                    <Link to="/rmo-mode/insurance">保险方案</Link>
                    <Link to="/rmo-mode/guarantee">保证方案</Link>
                    <Link to="/rmo-mode/insurance-guarantee">保险保证</Link>
                  </div>
                )}
              </div>

              {/* 上市应用 */}
              <Link to="/post-market" className={isActive('/post-market') ? 'active' : ''}>
                上市应用
              </Link>

              {/* 海外风险 */}
              <Link to="/overseas" className={isActive('/overseas') ? 'active' : ''}>
                海外风险
              </Link>

              {/* 资源中心 */}
              <div 
                className="nav-dropdown"
                onMouseEnter={() => setSystemMenuOpen(true)}
                onMouseLeave={() => setSystemMenuOpen(false)}
              >
                <Link 
                  to="/system-management" 
                  className={isActiveParentMulti(['/system-management', '/faq']) ? 'active' : ''}
                >
                  资源中心
                </Link>
                {systemMenuOpen && (
                  <div className="dropdown-menu">
                    <Link to="/system-management/laws">法律法规</Link>
                    <Link to="/system-management/practice-guide">实践指南</Link>
                    <Link to="/system-management/training">培训材料</Link>
                    <Link to="/system-management/faq">常见问题</Link>
                  </div>
                )}
              </div>
            </nav>
          </div>
          <div className="header-right">
            <div className="user-info">
              <span className="user-name">{user?.name}</span>
              <span className="user-role">{user?.role}</span>
            </div>
            <button onClick={handleLogout} className="logout-btn">
              退出登录
            </button>
          </div>
        </header>

        {/* 页面内容 */}
        <main className="dashboard-content">
          {children}
        </main>
      </div>
    </div>
  )
}

export default DashboardLayout