/* Number Converter — redesigned tool */
const { useState: useStateConv } = React;

function Converter() {
  const [input, setInput] = useStateConv("42");
  const [from, setFrom] = useStateConv("decimal");
  const [to, setTo] = useStateConv("binary");
  const [result, setResult] = useStateConv(null);

  function convert(v, f, t) {
    if (!v) return { ok: false, msg: "Type a number to convert." };
    let base;
    if (f === "decimal") base = 10;else
    if (f === "binary") base = 2;else
    if (f === "hex") base = 16;else
    if (f === "octal") base = 8;
    const dec = parseInt(v, base);
    if (isNaN(dec)) return { ok: false, msg: `"${v}" isn't valid ${f}.` };
    let out;
    if (t === "decimal") out = dec.toString(10);else
    if (t === "binary") out = dec.toString(2);else
    if (t === "hex") out = dec.toString(16).toUpperCase();else
    if (t === "octal") out = dec.toString(8);
    return { ok: true, msg: out, dec };
  }

  function handleConvert() {setResult(convert(input, from, to));}
  function swap() {setFrom(to);setTo(from);setResult(null);}

  const formats = [
  { v: "decimal", l: "Decimal (10)" },
  { v: "binary", l: "Binary (2)" },
  { v: "hex", l: "Hex (16)" },
  { v: "octal", l: "Octal (8)" }];


  return (
    <section id="tools" className="section">
      <div className="section-head">
        <h2 className="section-title">Little <em style={{ color: "rgb(0, 200, 255)" }}>tools</em>.</h2>
        <div className="section-meta">
          <span className="num">02</span>
          <span>side experiments</span>
        </div>
      </div>
      <div className="converter-wrap">
        <div className="converter-blurb">
          <div className="badge">// project · school</div>
          <h3>A tiny number-base converter I built for class.</h3>
          <p>It speaks decimal, binary, hex, and octal. Type something in, pick what it is and what you want it to be, and watch the math happen. Built with a little JavaScript and a lot of opinions about font choices.</p>
        </div>
        <div className="converter">
          <div className="top-row">
            <div className="traffic"><span></span><span></span><span></span></div>
            <span>noora.tools / converter.v2</span>
          </div>
          <div className="field">
            <label>Input value</label>
            <input
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder="e.g. 42 or 1010"
              onKeyDown={(e) => e.key === "Enter" && handleConvert()} />
            
          </div>
          <div className="field-row">
            <div className="field" style={{ margin: 0 }}>
              <label>From</label>
              <select value={from} onChange={(e) => setFrom(e.target.value)}>
                {formats.map((f) => <option key={f.v} value={f.v}>{f.l}</option>)}
              </select>
            </div>
            <button className="swap-btn" onClick={swap} aria-label="Swap from/to" title="Swap">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>
            </button>
            <div className="field" style={{ margin: 0 }}>
              <label>To</label>
              <select value={to} onChange={(e) => setTo(e.target.value)}>
                {formats.map((f) => <option key={f.v} value={f.v}>{f.l}</option>)}
              </select>
            </div>
          </div>
          <button className="convert-btn" onClick={handleConvert}>
            Convert
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
          </button>
          {result &&
          <div className="result">
              <div className="label">{result.ok ? `Result · ${to}` : "Hmm"}</div>
              <div className={`value ${result.ok ? "" : "error"}`}>{result.msg}</div>
              {result.ok &&
            <div className="meta">{input} ({from}) = {result.dec} (decimal) → {result.msg} ({to})</div>
            }
            </div>
          }
        </div>
      </div>
    </section>);

}
window.Converter = Converter;