/* Contact terminal + Footer + App composition */

const { useState: useS3, useEffect: useE3, useRef: useR3 } = React;

function Terminal({ t, lang }) {
  const [history, setHistory] = useS3([]);
  const [input, setInput] = useS3('');
  const [booted, setBooted] = useS3(false);
  const inputRef = useR3(null);
  const bodyRef = useR3(null);

  useE3(() => {
    if (booted) return;
    let i = 0;
    const id = setInterval(() => {
      setHistory((h) => [...h, { kind: 'boot', text: t.contact.welcome[i] }]);
      i++;
      if (i >= t.contact.welcome.length) {
        clearInterval(id);
        setBooted(true);
      }
    }, 380);
    return () => clearInterval(id);
  }, [booted, t]);

  useE3(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [history]);

  const run = (cmdRaw) => {
    const cmd = cmdRaw.trim().toLowerCase();
    if (!cmd) return;
    const newH = [...history, { kind: 'in', text: cmdRaw }];

    const append = (lines) => {
      setHistory([...newH, ...lines.map(l => typeof l === 'string' ? { kind: 'out', text: l } : l)]);
    };

    if (cmd === 'help') return append(t.contact.help);
    if (cmd === 'clear') return setHistory([]);
    if (cmd === 'whoami') return append([t.contact.whoami]);
    if (cmd === 'stack') return append([t.contact.stack]);
    if (cmd === 'hire') return append(t.contact.hire);
    if (cmd === 'email') return append([{ kind: 'link', label: 'fernando.herculano10@gmail.com', href: 'mailto:fernando.herculano10@gmail.com' }]);
    if (cmd === 'github') return append([{ kind: 'link', label: 'github.com/FeeCastilho', href: 'https://github.com/FeeCastilho' }]);
    if (cmd === 'linkedin') return append([{ kind: 'link', label: 'linkedin.com/in/fernando-castilho-4643a5232', href: 'https://www.linkedin.com/in/fernando-castilho-4643a5232/' }]);
    return setHistory([...newH, { kind: 'err', text: t.contact.notFound(cmd) }]);
  };

  const onSubmit = (e) => {
    e.preventDefault();
    run(input);
    setInput('');
  };

  const suggest = ['help', 'whoami', 'stack', 'hire', 'email', 'github', 'linkedin', 'clear'];

  return (
    <div className="terminal" onClick={() => inputRef.current && inputRef.current.focus()}>
      <div className="terminal-bar">
        <span className="dot r" /><span className="dot y" /><span className="dot g" />
        <span className="title">fernando-shell — {lang === 'pt' ? 'sessão' : 'session'} · zsh</span>
      </div>
      <div className="terminal-body" ref={bodyRef}>
        {history.map((h, i) => {
          if (h.kind === 'boot') return <div key={i} className="ln help">{h.text}</div>;
          if (h.kind === 'in') return <div key={i} className="ln"><span className="prompt">fernando@shell ~ $ </span><span className="user">{h.text}</span></div>;
          if (h.kind === 'err') return <div key={i} className="ln err">{h.text}</div>;
          if (h.kind === 'link') return <div key={i} className="ln resp"><a href={h.href} target="_blank" rel="noopener">{h.label}</a></div>;
          return <div key={i} className="ln resp">{h.text}</div>;
        })}
        {booted && (
          <form className="terminal-input-row" onSubmit={onSubmit}>
            <span className="prompt">fernando@shell ~ $</span>
            <input
              ref={inputRef}
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder={t.contact.placeholder}
              spellCheck={false}
              autoComplete="off"
            />
          </form>
        )}
      </div>
      <div style={{ padding: '0 32px 24px' }}>
        <div className="terminal-suggest">
          {suggest.map((s) => (
            <button key={s} onClick={() => run(s)}>{s}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

function Contact({ t, lang }) {
  const [secRef, secIn] = window.PortfolioPart1.useReveal();
  return (
    <section id="contact" ref={secRef}>
      <div className={`section-tag reveal ${secIn ? 'in' : ''}`}>{t.contact.tag}</div>
      <h2 className={`section-title reveal d1 ${secIn ? 'in' : ''}`}>
        {t.contact.title.map((seg, i) => typeof seg === 'string' ? <span key={i}>{seg}</span> : seg)}
      </h2>
      <p className={`reveal d2 ${secIn ? 'in' : ''}`} style={{ color: 'var(--fg-dim)', marginTop: '-40px', marginBottom: '40px', fontFamily: 'JetBrains Mono, monospace', fontSize: 12 }}>
        {t.contact.sub}
      </p>
      <div className={`reveal d3 ${secIn ? 'in' : ''}`}>
        <Terminal t={t} lang={lang} />
      </div>
    </section>
  );
}

/* ─── App root ─── */
function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "lang": "pt",
    "palette": "cyan",
    "scrollIntensity": 8,
    "showCursorGlow": true
  }/*EDITMODE-END*/;

  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [openCase, setOpenCase] = useS3(null);

  const t = I18N[tw.lang] || I18N.pt;

  // Apply palette
  useE3(() => {
    const root = document.documentElement;
    const palettes = {
      cyan:    { accent: '#00e5ff', a2: '#7c5cff', a3: '#00ffa3' },
      violet:  { accent: '#b06bff', a2: '#ff5cb8', a3: '#7c5cff' },
      mint:    { accent: '#00ffa3', a2: '#00e5ff', a3: '#fffd80' },
      sunset:  { accent: '#ff7a45', a2: '#ff3d8a', a3: '#ffb450' },
    };
    const p = palettes[tw.palette] || palettes.cyan;
    root.style.setProperty('--accent', p.accent);
    root.style.setProperty('--accent-2', p.a2);
    root.style.setProperty('--accent-3', p.a3);
  }, [tw.palette]);

  return (
    <>
      {tw.showCursorGlow && <window.PortfolioPart1.CursorGlow />}
      <window.PortfolioPart1.Nav lang={tw.lang} setLang={(l) => setTweak('lang', l)} t={t} />
      <window.PortfolioPart1.Hero t={t} intensity={tw.scrollIntensity} />
      <window.PortfolioPart1.About t={t} />
      <window.PortfolioPart2.Skills t={t} lang={tw.lang} />
      <window.PortfolioLearning.Learning t={t} />
      <window.PortfolioPart2.Projects t={t} lang={tw.lang} onOpen={setOpenCase} />
      <window.PortfolioPart2.CaseStudy id={openCase} lang={tw.lang} t={t} onClose={() => setOpenCase(null)} />
      <Contact t={t} lang={tw.lang} />

      <footer>
        <div>{t.footer.l}</div>
        <div>{t.footer.r}</div>
      </footer>

      <TweaksPanel>
        <TweakSection label={tw.lang === 'pt' ? 'Idioma' : 'Language'} />
        <TweakRadio label={tw.lang === 'pt' ? 'Idioma' : 'Language'} value={tw.lang}
          options={['pt', 'en']} onChange={(v) => setTweak('lang', v)} />
        <TweakSection label={tw.lang === 'pt' ? 'Aparência' : 'Appearance'} />
        <TweakRadio label={tw.lang === 'pt' ? 'Paleta' : 'Palette'} value={tw.palette}
          options={['cyan', 'violet', 'mint', 'sunset']} onChange={(v) => setTweak('palette', v)} />
        <TweakSlider label={tw.lang === 'pt' ? 'Intensidade hero' : 'Hero intensity'}
          value={tw.scrollIntensity} min={1} max={10} step={1}
          onChange={(v) => setTweak('scrollIntensity', v)} />
        <TweakToggle label={tw.lang === 'pt' ? 'Brilho do cursor' : 'Cursor glow'}
          value={tw.showCursorGlow} onChange={(v) => setTweak('showCursorGlow', v)} />
      </TweaksPanel>
    </>
  );
}

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