import React, { useState } from 'react';
import { useAuth } from '../auth/AuthProvider';
import ApiTestingPanel from './ApiTestingPanel';
import DocumentsPanel from './DocumentsPanel';
import HealthDashboard from './HealthDashboard';
import ActivityPanel from './ActivityPanel';
import HelpContentPanel from './HelpContentPanel';

const NAV_SECTIONS = [
  { type: 'label', text: 'MONITORING' },
  { id: 'health',    label: 'Service Health', icon: '⚡' },

  { type: 'label', text: 'RESOURCES' },
  { id: 'documents', label: 'Documents',      icon: '📁' },

  { type: 'label', text: 'DEVELOPMENT' },
  { id: 'api-testing', label: 'API Testing',  icon: '🔧' },

  { type: 'label', text: 'ADMINISTRATION' },
  { id: 'activity',     label: 'Activity Log',   icon: '📋' },
  { id: 'help-content', label: 'Help Content',   icon: '💬' },
];

export default function Shell() {
  const { sessionUser, signOut } = useAuth();
  const [activeNav,        setActiveNav]        = useState('health');
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

  const renderContent = () => {
    switch (activeNav) {
      case 'health':       return <HealthDashboard />;
      case 'documents':    return <DocumentsPanel />;
      case 'api-testing':  return <ApiTestingPanel />;
      case 'activity':     return <ActivityPanel />;
      case 'help-content': return <HelpContentPanel />;
      default:             return <HealthDashboard />;
    }
  };

  const getPageTitle = () => {
    const item = NAV_SECTIONS.find(n => n.id === activeNav);
    return item?.label || 'Service Health';
  };

  return (
    <div className={`app-shell ${sidebarCollapsed ? 'sidebar-collapsed' : ''}`}>

      {/* Sidebar */}
      <aside className="sidebar">
        <div className="sidebar-header">
          <div className="sidebar-brand">
            {!sidebarCollapsed && <span className="brand-text">AdPlatform</span>}
            <span className="brand-badge">DEV</span>
          </div>
          <button
            className="sidebar-toggle"
            onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
            title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
          >
            {sidebarCollapsed ? '▸' : '◂'}
          </button>
        </div>

        <nav className="sidebar-nav">
          {NAV_SECTIONS.map((item, i) => {
            if (item.type === 'label') {
              return !sidebarCollapsed
                ? <div key={i} className="nav-section-label">{item.text}</div>
                : <div key={i} className="nav-section-divider" />;
            }

            const isActive = activeNav === item.id;
            return (
              <button
                key={item.id}
                className={`nav-item ${isActive ? 'nav-active' : ''}`}
                onClick={() => setActiveNav(item.id)}
                title={sidebarCollapsed ? item.label : undefined}
              >
                <span className="nav-icon">{item.icon}</span>
                {!sidebarCollapsed && <span className="nav-label">{item.label}</span>}
              </button>
            );
          })}
        </nav>

        <div className="sidebar-footer">
          <div className="sidebar-user">
            <span className="user-avatar">
              {(sessionUser?.name || sessionUser?.email || 'U')[0].toUpperCase()}
            </span>
            {!sidebarCollapsed && (
              <div className="user-details">
                <span className="user-name-text">
                  {sessionUser?.name || sessionUser?.email || 'User'}
                </span>
                {sessionUser?.clientId && (
                  <span className="user-client">Client: {sessionUser.clientId}</span>
                )}
              </div>
            )}
          </div>
          {!sidebarCollapsed && (
            <button className="signout-btn" onClick={signOut}>
              Sign Out
            </button>
          )}
        </div>
      </aside>

      {/* Main Content */}
      <main className="main-content">
        <header className="content-header">
          <h2 className="page-title">{getPageTitle()}</h2>
          <div className="session-info">
            <span className="session-badge">
              <span className="session-dot" />
              Session Active
            </span>
          </div>
        </header>
        <div className="content-body">
          {renderContent()}
        </div>
      </main>
    </div>
  );
}
