/* global React, ReactDOM, Icons,
   AboutPage, ExperiencePage, ProjectsPage,
   RAGProjectPage, VoiceProjectPage, AEOProjectPage,
   SkillsPage, EducationPage, ContactPage, ResumePage */

const { useState, useEffect, useRef } = React;

// ─────────────── Page registry ───────────────
const PAGES = {
  about:      { icon: "👋", title: "About me",       crumbs: ["About me"],            render: (nav) => <AboutPage go={nav.go} /> },
  experience: { icon: "💼", title: "Experience",     crumbs: ["Experience"],          render: ()    => <ExperiencePage /> },
  projects:   { icon: "🚀", title: "Projects",       crumbs: ["Projects"],            render: (nav) => <ProjectsPage go={nav.go} /> },
  "proj-codepup": { icon: "🐶", title: "CodePup.ai", crumbs: ["Projects", "CodePup.ai"], parent: "projects", render: () => <CodePupProjectPage /> },
  "proj-aeo":   { icon: "⚙️", title: "AEO Automation Engine", crumbs: ["Projects", "AEO Automation Engine"], parent: "projects", render: () => <AEOProjectPage /> },
  "proj-rag":   { icon: "📚", title: "Multimodal RAG System", crumbs: ["Projects", "Multimodal RAG System"], parent: "projects", render: () => <RAGProjectPage /> },
  "proj-voice": { icon: "🎙️", title: "Voice AI Agent Platform", crumbs: ["Projects", "Voice AI Agent Platform"], parent: "projects", render: () => <VoiceProjectPage /> },
  skills:     { icon: "🧠", title: "Skills",         crumbs: ["Skills"],              render: () => <SkillsPage /> },
  education:  { icon: "🎓", title: "Education",      crumbs: ["Education"],           render: () => <EducationPage /> },
  contact:    { icon: "📬", title: "Get in touch",   crumbs: ["Get in touch"],        render: () => <ContactPage /> },
  resume:     { icon: "📄", title: "Résumé",         crumbs: ["Résumé"],              render: () => <ResumePage /> },
};

// ─────────────── Sidebar ───────────────
const Sidebar = ({ current, go }) => {
  const [expanded, setExpanded] = useState({ projects: true, experience: false });

  const toggle = (k, e) => { e.stopPropagation(); setExpanded((s) => ({ ...s, [k]: !s[k] })); };

  const Row = ({ id, icon, label, expandable, children, badge }) => {
    const isOpen = expanded[id];
    const isActive = current === id;
    return (
      <>
        <div className={`page-row ${expandable ? 'expandable' : ''} ${isOpen ? 'expanded' : ''} ${isActive ? 'active' : ''}`}
             onClick={() => go(id)}>
          <span className="twist" onClick={(e) => expandable && toggle(id, e)}>
            <Icons.Chevron />
          </span>
          <span className="page-icon">{icon}</span>
          <span className="page-label">{label}</span>
          {badge && <span className="badge">{badge}</span>}
          <span className="actions">
            <button title="Delete, duplicate, and more…"><Icons.Dots /></button>
            <button title="Add a page inside"><Icons.Plus /></button>
          </span>
        </div>
        {expandable && isOpen && <div className="sb-children">{children}</div>}
      </>
    );
  };

  return (
    <aside className="sidebar">
      <div className="workspace">
        <span className="avatar">S</span>
        <span className="ws-name">Suryansh's workspace</span>
        <span className="ws-arrow"><Icons.ChevronD /></span>
        <span className="ws-edit" title="New page"><Icons.Plus /></span>
      </div>

      <div className="sb-section">
        <div className="sb-row"><span className="icon"><Icons.Search /></span><span className="label">Search</span><span className="badge">⌘K</span></div>
        <div className="sb-row"><span className="icon"><Icons.Updates /></span><span className="label">Updates</span></div>
        <div className="sb-row"><span className="icon"><Icons.Settings /></span><span className="label">Settings &amp; members</span></div>
        <div className="sb-row"><span className="icon"><Icons.Plus /></span><span className="label">New page</span></div>
      </div>

      <div className="sb-section">
        <div className="sb-section-label">
          <span>Private</span>
          <span className="plus" title="Add a page"><Icons.Plus /></span>
        </div>
        <Row id="about"      icon="👋" label="About me" />
        <Row id="experience" icon="💼" label="Experience" expandable />
        <Row id="projects"   icon="🚀" label="Projects" expandable badge="4">
          <div className={`page-row ${current === 'proj-codepup' ? 'active' : ''}`} onClick={() => go('proj-codepup')}>
            <span className="twist"></span>
            <span className="page-icon">🐶</span>
            <span className="page-label">CodePup.ai</span>
          </div>
          <div className={`page-row ${current === 'proj-aeo' ? 'active' : ''}`}   onClick={() => go('proj-aeo')}>
            <span className="twist"></span>
            <span className="page-icon">⚙️</span>
            <span className="page-label">AEO Automation Engine</span>
          </div>
          <div className={`page-row ${current === 'proj-rag' ? 'active' : ''}`}   onClick={() => go('proj-rag')}>
            <span className="twist"></span>
            <span className="page-icon">📚</span>
            <span className="page-label">Multimodal RAG System</span>
          </div>
          <div className={`page-row ${current === 'proj-voice' ? 'active' : ''}`} onClick={() => go('proj-voice')}>
            <span className="twist"></span>
            <span className="page-icon">🎙️</span>
            <span className="page-label">Voice AI Agent Platform</span>
          </div>
        </Row>
        <Row id="skills"    icon="🧠" label="Skills" />
        <Row id="education" icon="🎓" label="Education" />
        <Row id="contact"   icon="📬" label="Get in touch" />
        <Row id="resume"    icon="📄" label="Résumé" />
      </div>

      <div className="sb-section">
        <div className="sb-section-label"><span>Shared</span></div>
        <div className="sb-row" style={{ color: 'var(--n-text-ter)', fontStyle: 'italic', cursor: 'default' }}>
          <span className="icon"><Icons.Templates /></span>
          <span className="label">No shared pages yet</span>
        </div>
      </div>

      <div className="sb-bottom">
        <div className="sb-row"><span className="icon"><Icons.Templates /></span><span className="label">Templates</span></div>
        <div className="sb-row"><span className="icon"><Icons.Trash /></span><span className="label">Trash</span></div>
      </div>
    </aside>
  );
};

// ─────────────── Topbar ───────────────
const Topbar = ({ page, current, go, onToggleSidebar }) => (
  <div className="topbar">
    <button className="menu-toggle" onClick={onToggleSidebar} title="Toggle sidebar">
      <Icons.Sidebar />
    </button>
    <div className="crumbs">
      {page.parent && (
        <>
          <span className="crumb" onClick={() => go(page.parent)}>
            <span>{PAGES[page.parent].icon}</span>
            <span>{PAGES[page.parent].title}</span>
          </span>
          <span className="sep">/</span>
        </>
      )}
      <span className="crumb current">
        <span>{page.icon}</span>
        <span>{page.title}</span>
      </span>
    </div>
    <div className="updated">Edited Apr 24, 2026</div>
    <div className="actions">
      <button className="share-btn">Share</button>
      <button className="icon-btn" title="Comments"><Icons.Comment /></button>
      <button className="icon-btn" title="Updates"><Icons.Updates /></button>
      <button className="icon-btn" title="Favorite"><Icons.Star /></button>
      <button className="icon-btn" title="More"><Icons.Dots /></button>
    </div>
  </div>
);

// ─────────────── App ───────────────
const App = () => {
  const [current, setCurrent] = useState(() => {
    const h = location.hash.replace('#', '');
    return PAGES[h] ? h : 'about';
  });
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const scrollRef = useRef(null);

  const go = (id) => {
    if (!PAGES[id]) return;
    setCurrent(id);
    location.hash = id;
  };

  useEffect(() => {
    const onHash = () => {
      const h = location.hash.replace('#', '');
      if (PAGES[h]) setCurrent(h);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
  }, [current]);

  const page = PAGES[current];

  return (
    <div className={`app ${sidebarOpen ? 'sidebar-open' : 'sidebar-collapsed'}`}>
      <Sidebar current={current} go={go} />
      <div className="main">
        <Topbar page={page} current={current} go={go} onToggleSidebar={() => setSidebarOpen(s => !s)} />
        <div className="page-scroll" ref={scrollRef}>
          {page.render({ go })}
        </div>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);