// Terminal direction — main component
// Uses: window.tStyles, window.tKeyframes, window.PROJECTS,
//       window.STATS, window.STACK, window.EXPERIENCE, window.ABOUT, window.CONTACT

function TPrompt({ cmd }) {
  const S = window.tStyles;
  return (
    <div style={S.promptBlock}>
      <span style={S.promptUser}>yeison@dev</span>
      <span style={S.prompt}>:~$ </span>
      <span style={S.promptCmd}>{cmd}</span>
    </div>
  );
}

function TSectionHead({ cmd, n, meta }) {
  const S = window.tStyles;
  return (
    <div className="t-section-h" style={S.sectionH}>
      <span>$</span><span style={S.sectionN}>{cmd}</span>
      {meta && <span style={{ color: '#666', fontSize: 12 }}>// {meta}</span>}
      <span style={S.sectionMeta}>// {n}</span>
    </div>
  );
}

const PROJ_CATEGORIES = [
  { id: 'blockchain', label: 'blockchain', accent: '#FF6B35' },
  { id: 'ai',         label: 'ai · llms',  accent: '#7C3AED' },
  { id: 'netsuite',   label: 'netsuite',   accent: '#2563EB' },
];

function ProjectsView({ projects, S }) {
  const [active, setActive] = React.useState('blockchain');
  const counts = React.useMemo(() => {
    const c = {};
    for (const p of projects) c[p.category] = (c[p.category] || 0) + 1;
    return c;
  }, [projects]);
  const filtered = projects.filter((p) => p.category === active);
  const accent = PROJ_CATEGORIES.find((c) => c.id === active)?.accent || '#0a0a0a';

  return (
    <div>
      <div className="t-projtabs" style={S.projTabs}>
        {PROJ_CATEGORIES.map((c, i) => (
          <button
            key={c.id}
            type="button"
            className="t-projtab"
            onClick={() => setActive(c.id)}
            style={{ ...S.projTab(active === c.id), borderRight: i === PROJ_CATEGORIES.length - 1 ? 'none' : '1px solid #0a0a0a' }}
          >
            <span style={S.projTabDot(c.accent)} />
            <span style={S.projTabLabel}>{c.label}</span>
            <span className="t-projtab-count" style={S.projTabCount}>[{counts[c.id] || 0}]</span>
          </button>
        ))}
      </div>
      <div style={S.projList}>
        {filtered.map((p) => (
          <article key={p.id} className="t-projcard" style={S.projCard}>
            <div style={S.projAccent(accent)} />
            <div style={S.projHead}>
              <div style={S.projName}>{p.name}</div>
              <div style={S.projRole}>{p.role}</div>
            </div>
            <div style={S.projSummary}>{p.summary}</div>
            <div style={S.projDetail}>{p.detail}</div>
            <div style={S.projStack}>
              {p.stack.map((s) => (
                <span key={s} className="t-chip" style={S.stackChip}>{s}</span>
              ))}
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

function TerminalDirection() {
  const S = window.tStyles;
  const projects   = window.PROJECTS;
  const stats      = window.STATS;
  const stack      = window.STACK;
  const experience = window.EXPERIENCE;
  const about      = window.ABOUT;
  const contact    = window.CONTACT;

  return (
    <div style={S.page}>
      <style>{window.tKeyframes}</style>
      <div style={S.gridBg} />
      <div className="t-inner" style={S.inner}>

        {/* topbar */}
        <div className="t-topbar" style={S.topbar}>
          <div style={S.topbarL}>
            <div style={S.dot('#FF6B5C')} />
            <div style={S.dot('#FFC542')} />
            <div style={S.dot('#3CCB7F')} />
            <span className="t-topbar-path" style={S.topbarPath}>~ / yeison.cruz / portfolio.sh</span>
          </div>
          <div className="t-topbar-r" style={S.topbarR}>
            <a className="t-nav" style={S.navLink} href="#about">./about</a>
            <a className="t-nav" style={S.navLink} href="#stack">./stack</a>
            <a className="t-nav" style={S.navLink} href="#experience">./experience</a>
            <a className="t-nav" style={S.navLink} href="#projects">./projects</a>
            <a className="t-nav" style={S.navLink} href="https://x0p99.blogspot.com/" target="_blank" rel="noopener noreferrer">./blog</a>
            <a className="t-nav" style={S.navLink} href="#contact">./contact</a>
          </div>
        </div>

        {/* hero */}
        <TPrompt cmd="whoami" />
        <div className="t-hero-name" style={S.heroName}>Yeison Cruz<span style={S.cursor} /></div>
        <p className="t-hero-tagline" style={S.heroTagline}>{about.tagline}</p>

        {/* stats */}
        <div className="t-stats-grid" style={S.statsGrid}>
          {stats.map((s, i) => (
            <div key={s.label} className="t-stat-box" style={S.statBox}>
              <span style={S.statTick}>0{i+1}</span>
              <div className="t-stat-value" style={S.statValue}>{s.value}</div>
              <div style={S.statLabel}>{s.label}</div>
            </div>
          ))}
        </div>

        {/* about */}
        <div id="about" className="t-section" style={S.section}>
          <TSectionHead cmd="cat about.md" n="01" />
          <p style={S.aboutText}>{about.long}</p>
          <div style={{ marginTop: 16, fontSize: 12, color: '#666' }}>[loc] {about.location}</div>
        </div>

        {/* stack */}
        <div id="stack" className="t-section" style={S.section}>
          <TSectionHead cmd="cat stack.toml" n="02" meta={`${stack.length} layers`} />
          <div className="t-stack-grid" style={S.stackGrid}>
            {stack.map((s) => (
              <div key={s.label} className="t-stack" style={S.stackBlock}>
                <div style={S.stackHead}>
                  <span><span style={{ color: '#999' }}>[</span><span style={S.stackHeadName}>{s.label}</span><span style={{ color: '#999' }}>]</span></span>
                  <span style={{ color: '#999' }}>{s.items.length}</span>
                </div>
                <div style={S.stackList}>
                  {s.items.map((it) => (
                    <span key={it} className="t-chip" style={S.stackChip}>{it}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* experience */}
        <div id="experience" className="t-section" style={S.section}>
          <TSectionHead cmd="git log --author=yeison" n="03" meta={`${experience.length} positions`} />
          <div style={S.expWrap}>
            <div style={S.expRail} />
            {experience.map((e, i) => (
              <div key={i} style={S.expItem}>
                <div style={S.expDot} />
                <div style={S.expHead}>
                  <div>
                    <span className="t-exp-company" style={S.expCompany}>{e.company}</span>
                    <span style={{ color: '#999' }}>  ·  </span>
                    <span style={S.expRole}>{e.role}</span>
                  </div>
                  <span style={S.expPeriod}>{e.period}</span>
                </div>
                <ul style={S.expBullets}>
                  {e.bullets.map((b, j) => (
                    <li key={j} style={S.expBullet}>
                      <span style={S.expBulletMark}>→</span>{b}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        {/* projects */}
        <div id="projects" className="t-section" style={S.section}>
          <TSectionHead cmd="ls -la projects/" n="04" meta={`${projects.length} entries`} />
          <ProjectsView projects={projects} S={S} />
        </div>

        {/* contact */}
        <div id="contact" className="t-section" style={S.section}>
          <TSectionHead cmd="cat contact.json" n="05" />
          <div style={{ maxWidth: 520 }}>
            {Object.entries(contact).map(([k, v]) => {
              const hrefs = {
                email: `mailto:${v}`,
                telegram: `https://t.me/${String(v).replace(/^@/, '')}`,
                linkedin: 'https://www.linkedin.com/in/yeisoncl/',
              };
              const href = hrefs[k] || '#';
              const external = href.startsWith('http');
              return (
                <div key={k} style={S.contactRow}>
                  <span style={S.contactKey}>"{k}"</span>
                  <a
                    href={href}
                    style={S.contactVal}
                    {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
                  >{v}</a>
                </div>
              );
            })}
          </div>
          <div style={{ marginTop: 24 }}>
            <span style={S.promptUser}>yeison@dev</span>
            <span style={S.prompt}>:~$ </span>
            <span style={S.promptCmd}>echo "hi" | telegram --to @evmsal</span>
            <span style={S.cursor} />
          </div>
        </div>

        <div className="t-footer" style={S.footer}>
          <span>// © 2026 yeison cruz · hand-built</span>
          <span>costa rica · gmt-6</span>
        </div>
      </div>
    </div>
  );
}

window.TerminalDirection = TerminalDirection;