const { useState, useRef, useEffect } = React;

// tiny barcode-ish SVG (just stylized bars)
const Barcode = ({ seed = "2101708" }) => {
  // generate pseudo-random bar widths from seed
  const bars = [];
  let s = seed.toString().split("").reduce((a,c)=> a + c.charCodeAt(0), 0);
  const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
  let x = 0;
  while (x < 160) {
    const w = 1 + Math.floor(rand() * 4);
    const gap = 1 + Math.floor(rand() * 2);
    bars.push(<rect key={x} x={x} y={0} width={w} height={26} fill="#2a2320" />);
    x += w + gap;
  }
  return (
    <svg viewBox="0 0 160 36" preserveAspectRatio="none">
      {bars}
      <text x="80" y="34" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="#2a2320" letterSpacing="3">{seed}</text>
    </svg>
  );
};

const SimpCard = () => {
  const [photo, setPhoto] = useState(null);
  const [name, setName] = useState("Solana Simp");
  const [rank, setRank] = useState("Devoted Holder");
  const [since, setSince] = useState("The Bottom");
  const [id, setId] = useState(() => String(Math.floor(Math.random() * 9000000) + 1000000));
  const fileRef = useRef();

  const onPick = (e) => {
    const f = e.target.files?.[0];
    if (!f) return;
    const reader = new FileReader();
    reader.onload = () => setPhoto(reader.result);
    reader.readAsDataURL(f);
  };

  const randomizeId = () => setId(String(Math.floor(Math.random() * 9000000) + 1000000));

  const downloadCard = async () => {
    const el = document.getElementById("simpcard-render");
    if (!el || !window.html2canvas) return null;
    const canvas = await window.html2canvas(el, {
      backgroundColor: null,
      scale: 3,
      useCORS: true,
    });
    const dataUrl = canvas.toDataURL("image/png");
    const link = document.createElement("a");
    link.download = `simp-card-${name.toLowerCase().replace(/\s+/g,"-")}.png`;
    link.href = dataUrl;
    link.click();
    return canvas;
  };

  const [sharing, setSharing] = useState(false);
  const share = async () => {
    setSharing(true);
    try {
      await downloadCard();
      const text = `I am a ${name}. Rank: ${rank}. Since: ${since}.\n\nI didn't buy SOL for the returns. I bought it because I believed.\n\nI am a Solana Simp. And I'd do it all again. ◎\n\n$SIMP`;
      const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`;
      window.open(url, "_blank", "noopener,noreferrer");
    } finally {
      setSharing(false);
    }
  };

  return (
    <section id="card" className="section card-section">
      <div className="card-intro">
        <h2>EVERY HOLDER<br/>GETS ONE THING<br/>THE MARKET CAN'T<br/>TAKE AWAY.</h2>
        <p className="lede">Official Simp Status.</p>

        <div className="card-stats">
          <b>Name:</b>
          <input
            value={name} onChange={e=>setName(e.target.value)}
            style={{border:"none",background:"transparent",font:"inherit",color:"var(--accent)",width:"100%"}}
          />
          <b>Rank:</b>
          <input
            value={rank} onChange={e=>setRank(e.target.value)}
            style={{border:"none",background:"transparent",font:"inherit",color:"var(--accent)",width:"100%"}}
          />
          <b>Chain:</b> <span className="val">Solana (obviously)</span>
          <b>Status:</b> <span className="val">Fully Committed</span>
          <b>Since:</b>
          <input
            value={since} onChange={e=>setSince(e.target.value)}
            style={{border:"none",background:"transparent",font:"inherit",color:"var(--accent)",width:"100%"}}
          />
          <b>Exit plan:</b> <span className="val">None</span>
        </div>

        <p style={{marginTop:16, color:"var(--ink-soft)", fontSize:18}}>
          Upload your PFP, tweak the details, flex on timeline.
        </p>
      </div>

      <div className="simpcard-wrap">
        <div className="simpcard" id="simpcard-render">
          <label className={`simpcard-photo ${photo ? "has-photo" : ""}`}
                 style={photo ? {backgroundImage:`url(${photo})`} : {}}>
            <input ref={fileRef} type="file" accept="image/*" onChange={onPick}/>
            <span className="hint">YOUR<br/>PHOTO<br/>HERE<br/><br/>(click)</span>
          </label>

          <div className="simpcard-right">
            <div className="simpcard-title">SOLANA<br/>SIMP</div>
            <div className="simpcard-row"><span>NAME</span><span>{name.toUpperCase()}</span></div>
            <div className="simpcard-row"><span>RANK</span><span>{rank.toUpperCase()}</span></div>
            <div className="simpcard-row"><span>CHAIN</span><span>SOLANA</span></div>
            <div className="simpcard-row"><span>SINCE</span><span>{since.toUpperCase()}</span></div>
            <div className="simpcard-barcode"><Barcode seed={id} /></div>
            <div className="simpcard-footer">MEMBER · WALLET · USER · WHYS</div>
          </div>
        </div>

        <div className="card-actions">
          <button className="btn btn-tiny" onClick={() => fileRef.current?.click()}>UPLOAD PHOTO</button>
          <button className="btn btn-tiny btn-ghost" onClick={randomizeId}>NEW ID #</button>
          <button className="btn btn-tiny btn-sol" onClick={downloadCard}>↓ DOWNLOAD</button>
        </div>
      </div>
    </section>
  );
};

window.SimpCard = SimpCard;