'use client';

import Link from 'next/link';
import { logout } from '@/lib/dashboardHelpers';
import { getAllowedDashboardSections } from '@/lib/authRedirect';
import type { UserAccount } from '@/types';

interface SidebarProps {
  activeSection: string;
  onSectionChange: (section: string) => void;
  isCollapsed: boolean;
  onToggle: () => void;
  /** Current user; sidebar items are filtered by role when provided */
  user?: UserAccount | null;
}

type SidebarSection = {
  id: string;
  icon: string;
  label: string;
  href?: string;
};

const ALL_SECTIONS: SidebarSection[] = [
  { id: 'overview', icon: '🏠', label: 'Overview' },
  { id: 'workstations', icon: '🖥️', label: 'Workstations', href: '/workstation' },
  { id: 'user-role-management', icon: '👤', label: 'User & Role Management', href: '/workstation/administrator' },
  { id: 'transaction', icon: '📄', label: 'Transaction' },
  { id: 'property', icon: '🏠', label: 'Property' },
  { id: 'property-index', icon: '📝', label: 'Index Property', href: '/property/index' },
  { id: 'party', icon: '👥', label: 'Party' },
  { id: 'applicant', icon: '👤', label: 'Applicant' },
  { id: 'document', icon: '📋', label: 'Document Search' },
  { id: 'survey', icon: '📐', label: 'Survey Plan' },
  { id: 'boundary', icon: '🗺️', label: 'Boundaries' },
  { id: 'dispute', icon: '⚖️', label: 'Disputes' },
  { id: 'boundary-documents', icon: '📤', label: 'Index Documents', href: '/boundary/documents/upload' },
  { id: 'users', icon: '🛡️', label: 'Users & Roles' },
  { id: 'landing', icon: '🌐', label: 'Landing' },
  { id: 'data-centric-center', icon: '📊', label: 'Data Centric Center', href: '/data-centric-center' },
];

export default function Sidebar({ activeSection, onSectionChange, isCollapsed, onToggle, user }: SidebarProps) {
  const allowedIds = user ? new Set(getAllowedDashboardSections(user)) : new Set(ALL_SECTIONS.map((s) => s.id));
  const sections = ALL_SECTIONS.filter((s) => allowedIds.has(s.id));

  if (typeof window !== 'undefined' && user) {
    console.log('[Sidebar] user admin flags:', {
      is_admin: user.is_admin,
      is_super_admin: user.is_super_admin,
      hasUserRoleManagement: allowedIds.has('user-role-management'),
      hasUsersSection: allowedIds.has('users'),
    });
  }

  const renderNavItem = (section: SidebarSection) => {
    const itemClass = `nav-item ${activeSection === section.id ? 'active' : ''}`;
    const content = (
      <>
        <span className="nav-item-icon">{section.icon}</span>
        <span className="nav-item-text">{section.label}</span>
      </>
    );

    if (section.href) {
      return (
        <Link key={section.id} href={section.href} className={itemClass}>
          {content}
        </Link>
      );
    }

    return (
      <div
        key={section.id}
        className={itemClass}
        data-section={section.id}
        onClick={() => onSectionChange(section.id)}
      >
        {content}
      </div>
    );
  };

  return (
    <aside className={`sidebar ${isCollapsed ? 'collapsed' : 'expanded'}`}>
      {/* Hamburger Toggle Button */}
      <button 
        className="hamburger-btn"
        onClick={onToggle}
        title={isCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
      >
        <span className={`hamburger-icon ${isCollapsed ? '' : 'open'}`}>
          <span></span>
          <span></span>
          <span></span>
        </span>
      </button>

      <div className="sidebar-logo">📁</div>
      
      <nav className="sidebar-nav">
        {sections.map((section) => renderNavItem(section))}
      </nav>

      <div className="sidebar-footer">
        <button className="logout-btn" onClick={logout} title="Logout">
          🚪
        </button>
      </div>
    </aside>
  );
}