// portfolio/pages-home.jsx — Home (Dev/A only) + Now

const { useState, useEffect } = React;

// ── Shared micro-components ───────────────────────────────────────────────
function Mono({ children, color = '#555', size = '10px', spacing = '0.06em' }) {
  return (
    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: size, color, letterSpacing: spacing }}>
      {children}
    </span>
  );
}

function SectionLabel({ children }) {
  return (
    <div style={{
      fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a',
      letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: '18px',
    }}>{children}</div>
  );
}

// ── Home — terminal animation ─────────────────────────────────────────────
function Home({ navigate }) {
  const P = window.PORTFOLIO;
  const [phase,  setPhase]  = useState(0);
  const [typed1, setTyped1] = useState('');
  const [typed2, setTyped2] = useState('');
  const [out1,   setOut1]   = useState([]);
  const [out2,   setOut2]   = useState([]);

  const whoamiLines = [
    `Name:     Chibuzor Adigwe`,
    `Handle:   iamphantasm0`,
    `Role:     ${P.role}`,
    `Location: ${P.location}`,
    `Stack:    Python · FastAPI · PostgreSQL · Docker · Redis`,
    `Status:   ${P.available ? 'Available for backend engineering roles' : 'Currently unavailable'}`,
  ];
  const lsLines = P.projects.map(p => `${p.id.padEnd(26)} [${p.status}]`);

  useEffect(() => {
    const cmd1 = 'whoami';
    const t = setTimeout(() => {
      let i = 0;
      const timer = setInterval(() => {
        i++; setTyped1(cmd1.slice(0, i));
        if (i >= cmd1.length) { clearInterval(timer); setPhase(2); }
      }, 80);
    }, 500);
    return () => clearTimeout(t);
  }, []);

  useEffect(() => {
    if (phase !== 2) return;
    let i = 0;
    const timer = setInterval(() => {
      setOut1(prev => [...prev, whoamiLines[i]]); i++;
      if (i >= whoamiLines.length) { clearInterval(timer); setPhase(3); }
    }, 90);
    return () => clearInterval(timer);
  }, [phase]);

  useEffect(() => {
    if (phase !== 3) return;
    const cmd2 = 'ls projects';
    const delay = setTimeout(() => {
      let i = 0;
      const timer = setInterval(() => {
        i++; setTyped2(cmd2.slice(0, i));
        if (i >= cmd2.length) { clearInterval(timer); setPhase(4); }
      }, 70);
    }, 300);
    return () => clearTimeout(delay);
  }, [phase]);

  useEffect(() => {
    if (phase !== 4) return;
    let i = 0;
    const timer = setInterval(() => {
      setOut2(prev => [...prev, lsLines[i]]); i++;
      if (i >= lsLines.length) { clearInterval(timer); setPhase(5); }
    }, 80);
    return () => clearInterval(timer);
  }, [phase]);

  return (
    <div className="page-enter" style={{ padding: '56px 48px', maxWidth: '860px' }}>
      {/* Terminal window */}
      <div style={{
        background: '#0e0e0e', border: '1px solid #222', borderRadius: '10px',
        overflow: 'hidden', marginBottom: '56px',
        boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
      }}>
        {/* Chrome */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: '7px',
          padding: '10px 14px', background: '#131313', borderBottom: '1px solid #1e1e1e',
        }}>
          <div style={{ width: '10px', height: '10px', borderRadius: '50%', background: '#ff5f57' }} />
          <div style={{ width: '10px', height: '10px', borderRadius: '50%', background: '#febc2e' }} />
          <div style={{ width: '10px', height: '10px', borderRadius: '50%', background: '#28c840' }} />
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', color: '#3a3a3a', marginLeft: '8px' }}>
            iamphantasm0@portfolio — ~
          </span>
        </div>
        {/* Output */}
        <div style={{ padding: '20px 24px 24px', fontFamily: "'JetBrains Mono', monospace", fontSize: '12.5px', lineHeight: 1.75 }}>
          <div style={{ color: '#666' }}>
            iamphantasm0@portfolio:~$ <span style={{ color: '#ece9e4' }}>{typed1}</span>
            {phase < 2 && <span style={{ animation: 'blink 1s infinite' }}>▋</span>}
          </div>
          {out1.map((ln, i) => <div key={i} style={{ color: '#ece9e4' }}>{ln}</div>)}
          {phase >= 3 && (
            <div style={{ color: '#666', marginTop: '8px' }}>
              iamphantasm0@portfolio:~$ <span style={{ color: '#ece9e4' }}>{typed2}</span>
              {phase === 3 && <span style={{ animation: 'blink 1s infinite' }}>▋</span>}
            </div>
          )}
          {out2.map((ln, i) => <div key={i} style={{ color: '#ece9e4' }}>{ln}</div>)}
          {phase === 5 && (
            <div style={{ color: '#666', marginTop: '8px' }}>
              iamphantasm0@portfolio:~$ <span style={{ animation: 'blink 1s infinite', color: '#ece9e4' }}>▋</span>
            </div>
          )}
        </div>
      </div>

      {/* Two-column: projects + blog */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '48px' }}>
        <div>
          <SectionLabel>Projects →</SectionLabel>
          {P.projects.map(p => (
            <button key={p.id} className="proj-row" onClick={() => navigate(`/projects/${p.id}`)} style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              padding: '10px 8px', background: 'transparent',
              border: 'none', borderBottom: '1px solid #1a1a1a',
              width: '100%', textAlign: 'left', cursor: 'pointer',
            }}>
              <span style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '13px', color: '#888' }}>{p.name}</span>
              <span className="tag-pill">{p.year}</span>
            </button>
          ))}
          <button onClick={() => navigate('/projects')} style={{
            marginTop: '14px', background: 'none', border: 'none',
            fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', color: '#444', cursor: 'pointer', padding: '4px 8px',
          }}>all projects →</button>
        </div>

        <div>
          <SectionLabel>Writing →</SectionLabel>
          {P.posts.map(p => (
            <button key={p.id} className="blog-row" onClick={() => navigate(`/blog/${p.id}`)} style={{
              display: 'block', padding: '10px 8px', background: 'transparent',
              border: 'none', borderBottom: '1px solid #1a1a1a',
              width: '100%', textAlign: 'left', cursor: 'pointer',
            }}>
              <Mono color="#333" size="9px">{p.date} · {p.tag}</Mono>
              <div style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '13px', color: '#888', marginTop: '3px' }}>{p.title}</div>
            </button>
          ))}
          <button onClick={() => navigate('/blog')} style={{
            marginTop: '14px', background: 'none', border: 'none',
            fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', color: '#444', cursor: 'pointer', padding: '4px 8px',
          }}>all posts →</button>
        </div>
      </div>
    </div>
  );
}

// ── Now page ───────────────────────────────────────────────────────────────
function Now({ navigate }) {
  const P = window.PORTFOLIO;
  const n = P.now;
  return (
    <div className="page-enter" style={{ padding: '56px 48px', maxWidth: '680px' }}>
      <div style={{ marginBottom: '8px' }}>
        <span style={{ fontFamily: "'Lora', Georgia, serif", fontSize: '2rem', fontWeight: 700, color: '#ece9e4' }}>/now</span>
      </div>
      <p style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '14px', color: '#555', marginBottom: '4px' }}>what I'm focused on right now</p>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#333', marginBottom: '48px', letterSpacing: '0.04em' }}>
        last updated: {n.updated}
      </div>

      {[{ label: 'Current focus', content: n.focus }, { label: 'Reading', content: n.reading }].map(({ label, content }) => (
        <div key={label} style={{ marginBottom: '36px' }}>
          <div style={{ fontFamily: "'Lora', Georgia, serif", fontSize: '1.1rem', fontWeight: 600, color: '#ece9e4', marginBottom: '10px' }}>{label}</div>
          <p style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '15px', color: '#888', lineHeight: 1.7 }}>{content}</p>
        </div>
      ))}

      <div style={{ marginBottom: '36px' }}>
        <div style={{ fontFamily: "'Lora', Georgia, serif", fontSize: '1.1rem', fontWeight: 600, color: '#ece9e4', marginBottom: '12px' }}>Building</div>
        {n.building.map(item => (
          <div key={item} style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', marginBottom: '8px' }}>
            <div style={{ width: '4px', height: '4px', borderRadius: '50%', background: '#555', marginTop: '10px', flexShrink: 0 }} />
            <span style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '15px', color: '#888', lineHeight: 1.6 }}>{item}</span>
          </div>
        ))}
      </div>

      {n.available && (
        <div style={{ background: '#141414', border: '1px solid #222', borderRadius: '8px', padding: '16px 20px', display: 'flex', alignItems: 'center', gap: '10px' }}>
          <div style={{ width: '5px', height: '5px', borderRadius: '50%', background: '#555', flexShrink: 0 }} />
          <span style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '14px', color: '#777', lineHeight: 1.5 }}>
            I'm currently available for backend engineering opportunities.{' '}
            <button onClick={() => navigate('/contact')} style={{ background: 'none', border: 'none', color: '#ece9e4', cursor: 'pointer', fontFamily: 'inherit', fontSize: 'inherit', textDecoration: 'underline', textUnderlineOffset: '2px' }}>
              Get in touch →
            </button>
          </span>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Home, Now });