// portfolio/shell.jsx — Sidebar with avatar + icons, monochrome

const { useState } = React;

// ── SVG Nav Icons ─────────────────────────────────────────────────────────
function NavIcon({ name, size = 14 }) {
  const icons = {
    home: (
      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    ),
    about: (
      <>
        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
        <circle cx="12" cy="7" r="4" />
      </>
    ),
    projects: (
      <>
        <rect x="3" y="3" width="7" height="7" rx="1" />
        <rect x="14" y="3" width="7" height="7" rx="1" />
        <rect x="14" y="14" width="7" height="7" rx="1" />
        <rect x="3" y="14" width="7" height="7" rx="1" />
      </>
    ),
    blog: (
      <>
        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
      </>
    ),
    contact: (
      <>
        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
        <polyline points="22,6 12,13 2,6" />
      </>
    ),
    gallery: (
      <>
        <rect x="1" y="5" width="22" height="14" rx="2" />
        <circle cx="8.5" cy="12" r="2.5" />
        <polyline points="21,15 16,10 5,21" />
      </>
    ),
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.5"
      strokeLinecap="round" strokeLinejoin="round"
      style={{ flexShrink: 0, display: 'block' }}>
      {icons[name] || null}
    </svg>
  );
}

// ── Global Styles ─────────────────────────────────────────────────────────
function GlobalStyles() {
  return (
    <style>{`
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
      body { background: #0c0c0c; color: #ece9e4; font-family: 'DM Sans', system-ui, sans-serif; }
      a { color: inherit; text-decoration: none; }
      button { cursor: pointer; }

      @keyframes blink    { 0%,100%{opacity:1} 50%{opacity:0} }
      @keyframes fadeUp   { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
      @keyframes fadeIn   { from{opacity:0} to{opacity:1} }

      .page-enter { animation: fadeUp 0.28s ease both; }

      ::selection { background: #2c2c2c; color: #fff; }
      ::-webkit-scrollbar { width: 4px; height: 4px; }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb { background: #242424; border-radius: 2px; }

      /* Nav links — no border indicator, background only */
      .nav-link {
        display: flex; align-items: center; gap: 9px;
        padding: 7px 10px; border-radius: 6px; font-size: 13px;
        font-family: 'DM Sans', system-ui, sans-serif;
        color: #444; cursor: pointer;
        transition: color .15s, background .15s;
        border: none; background: transparent;
        width: 100%; text-align: left; margin: 1px 0;
      }
      .nav-link:hover { color: #ece9e4; background: #181818; }
      .nav-link.active { color: #ece9e4; background: #1c1c1c; }

      .nav-link-now {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px; color: #333; letter-spacing: 0.03em;
      }
      .nav-link-now:hover { color: #666; background: transparent; }
      .nav-link-now.active { color: #ece9e4; background: #1c1c1c; }

      /* Social */
      .social-link {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px; color: #333;
        text-decoration: none; transition: color .15s;
        letter-spacing: 0.04em;
      }
      .social-link:hover { color: #777; }

      /* Terminal button */
      .term-btn {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px; color: #333;
        border: 1px solid #1e1e1e; background: transparent;
        border-radius: 5px; padding: 5px 9px; cursor: pointer;
        transition: color .15s, border-color .15s;
        display: inline-flex; align-items: center; gap: 2px;
        letter-spacing: 0.04em; width: fit-content;
      }
      .term-btn:hover { color: #777; border-color: #333; }

      /* Tags */
      .tag-pill {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px; padding: 2px 7px; border-radius: 3px;
        background: #181818; color: #4a4a4a;
        border: 1px solid #202020; white-space: nowrap; display: inline-block;
      }

      /* Buttons */
      .btn-primary {
        font-family: 'DM Sans', system-ui, sans-serif;
        font-size: 13px; background: #ece9e4; color: #0c0c0c;
        border: none; border-radius: 6px; padding: 10px 20px;
        cursor: pointer; font-weight: 600; transition: opacity .15s;
      }
      .btn-primary:hover { opacity: 0.88; }
      .btn-ghost {
        font-family: 'DM Sans', system-ui, sans-serif;
        font-size: 13px; background: transparent; color: #555;
        border: 1px solid #222; border-radius: 6px; padding: 10px 20px;
        cursor: pointer; transition: color .15s, border-color .15s;
      }
      .btn-ghost:hover { color: #ece9e4; border-color: #333; }

      /* Hover rows */
      .proj-row { transition: background .15s; }
      .proj-row:hover { background: #141414 !important; }
      .card-hover { transition: transform .18s ease, box-shadow .18s ease; }
      .card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
      .blog-row { transition: background .12s; }
      .blog-row:hover { background: #131313 !important; }

      /* Form inputs */
      .form-input {
        width: 100%; background: #141414; border: 1px solid #222;
        border-radius: 6px; padding: 11px 14px;
        font-family: 'DM Sans', system-ui, sans-serif;
        font-size: 14px; color: #ece9e4; outline: none;
        transition: border-color .15s;
      }
      .form-input:focus { border-color: #444; }
      .form-input::placeholder { color: #333; }

      .divider { height: 1px; background: #1e1e1e; }

      @media (max-width: 640px) {
        .sidebar { display: none !important; }
        .main-content { margin-left: 0 !important; }
      }
    `}</style>
  );
}

// ── Sidebar ───────────────────────────────────────────────────────────────
function Sidebar({ route, navigate, onTerminal }) {
  const P = window.PORTFOLIO;

  const navItems = [
    { label: 'home',     path: '/',        icon: 'home'     },
    { label: 'about',    path: '/about',   icon: 'about'    },
    { label: 'projects', path: '/projects',icon: 'projects' },
    { label: 'blog',     path: '/blog',    icon: 'blog'     },
    { label: 'contact',  path: '/contact', icon: 'contact'  },
    { label: 'gallery',  path: '/gallery', icon: 'gallery'  },
  ];

  const isActive = (path) => {
    if (path === '/') return route === '/' || route === '';
    return route.startsWith(path);
  };

  return (
    <aside className="sidebar" style={{
      width: '200px', minHeight: '100vh', background: '#111',
      borderRight: '1px solid #1a1a1a',
      display: 'flex', flexDirection: 'column',
      position: 'fixed', left: 0, top: 0, bottom: 0, zIndex: 100,
    }}>
      {/* Avatar + Identity */}
      <div style={{
        padding: '24px 20px 20px',
        borderBottom: '1px solid #1a1a1a',
        display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer',
      }} onClick={() => navigate('/')}>
        {/* Avatar circle */}
        <div style={{
          width: '36px', height: '36px', borderRadius: '50%',
          background: '#1c1c1c', border: '1px solid #2a2a2a',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <span style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: '11px', color: '#666', fontWeight: 500,
            userSelect: 'none',
          }}>CA</span>
        </div>
        {/* Name + role */}
        <div>
          <div style={{
            fontFamily: "'DM Sans', system-ui, sans-serif",
            fontSize: '13px', color: '#ece9e4', fontWeight: 500, lineHeight: 1.3,
          }}>{P.name}</div>
          <div style={{
            fontFamily: "'DM Sans', system-ui, sans-serif",
            fontSize: '11px', color: '#444', lineHeight: 1.3, marginTop: '1px',
          }}>{P.role}</div>
        </div>
      </div>

      {/* Nav */}
      <nav style={{ flex: 1, padding: '12px', display: 'flex', flexDirection: 'column' }}>
        {navItems.map(item => (
          <button key={item.path}
            className={`nav-link${isActive(item.path) ? ' active' : ''}`}
            onClick={() => navigate(item.path)}>
            <NavIcon name={item.icon} size={14} />
            {item.label}
          </button>
        ))}

        <div className="divider" style={{ margin: '10px 0' }} />

        <button
          className={`nav-link nav-link-now${route === '/now' ? ' active' : ''}`}
          onClick={() => navigate('/now')}>
          /now
        </button>
      </nav>

      {/* Footer */}
      <div style={{
        padding: '14px 20px 20px',
        borderTop: '1px solid #181818',
      }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: '9px', color: '#2a2a2a',
          letterSpacing: '0.08em', textTransform: 'uppercase',
          marginBottom: '10px',
        }}>Social</div>
        <div style={{ display: 'flex', gap: '14px', alignItems: 'center', marginBottom: '14px' }}>
          <a href={P.social.github}   target="_blank" rel="noopener" className="social-link">gh</a>
          <a href={P.social.twitter}  target="_blank" rel="noopener" className="social-link">tw</a>
          <a href={P.social.linkedin} target="_blank" rel="noopener" className="social-link">li</a>
          <a href={`mailto:${P.email}`} className="social-link">@</a>
        </div>
        <button className="term-btn" onClick={onTerminal} title="Terminal (press `)">
          <span>&gt;_</span>
        </button>
      </div>
    </aside>
  );
}

// ── Layout ────────────────────────────────────────────────────────────────
function Layout({ children, route, navigate, onTerminal }) {
  return (
    <div style={{ display: 'flex', minHeight: '100vh' }}>
      <Sidebar route={route} navigate={navigate} onTerminal={onTerminal} />
      <main className="main-content" style={{ marginLeft: '200px', flex: 1, minHeight: '100vh' }}>
        {children}
      </main>
    </div>
  );
}

Object.assign(window, { GlobalStyles, Layout });