// page-create.jsx
const { useState: useStateC } = React;

function CreateToken({ lang, wallet, onSign, onToast, onConnect, onNavigate }) {
  const t = I18N[lang];
  const [icon, setIcon] = useStateC(null);
  const [name, setName] = useStateC('');
  const [sym, setSym] = useStateC('');
  const [desc, setDesc] = useStateC('');
  const [devBuy, setDevBuy] = useStateC('');
  const [tg, setTg] = useStateC('');
  const [tw, setTw] = useStateC('');
  const [web, setWeb] = useStateC('');
  const [confirmOpen, setConfirmOpen] = useStateC(false);

  const valid = !!icon && !!name && sym.length >= 3 && !!desc;
  const dev = parseFloat(devBuy) || 0;
  const fee = 0.02;
  const total = fee + dev;
  const estTok = Math.floor(dev * 0.012 * 1_000_000_000);
  const sharePct = (dev * 0.012 * 100).toFixed(2);

  const onUpload = (e) => {
    const f = e.target.files?.[0];
    if (!f) return;
    const url = URL.createObjectURL(f);
    setIcon(url);
  };

  const submit = () => {
    if (!wallet.connected) { onConnect(); return; }
    if (!valid) return;
    setConfirmOpen(true);
  };

  const finalLaunch = () => {
    setConfirmOpen(false);
    onSign(() => { onToast(`✦ $${sym.toUpperCase()} launched`); onNavigate('lobby'); });
  };

  return (
    <div className="page" data-screen-label="04 Create">
      <div className="page-head">
        <div>
          <h1 className="page-title">/ {t.nav_create.toLowerCase()}</h1>
          <div className="page-sub">&gt; {t.create_sub}</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 24 }}>
        <div className="card" style={{ padding: 24 }}>
          {/* icon */}
          <div className="field">
            <div className="field-label"><span>{t.field_icon}</span></div>
            <label className={'upload ' + (icon ? 'has' : '')}>
              <input type="file" accept="image/png,image/jpeg" style={{ display: 'none' }} onChange={onUpload} />
              {icon ? (
                <>
                  <div className="upload-prev"><img src={icon} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10 }} /></div>
                  <div>
                    <div style={{ fontWeight: 600 }}>icon.png</div>
                    <div className="dim" style={{ fontSize: 12, marginTop: 4 }}>{t.field_icon_hint}</div>
                  </div>
                  <button className="btn" onClick={(e) => { e.preventDefault(); setIcon(null); }}>✕</button>
                </>
              ) : (
                <>
                  <Icon.upload className="upload-icon" />
                  <div style={{ marginTop: 4, fontWeight: 600 }}>{t.field_icon}</div>
                  <div className="dim" style={{ fontSize: 12, marginTop: 4 }}>{t.field_icon_hint}</div>
                </>
              )}
            </label>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div className="field">
              <div className="field-label"><span>{t.field_name}</span></div>
              <input className="input" placeholder={t.field_name_ph} value={name} onChange={(e) => setName(e.target.value)} maxLength={32} />
            </div>
            <div className="field">
              <div className="field-label"><span>{t.field_symbol}</span><span className="opt">3–8</span></div>
              <div className="input-pre">
                <span className="prefix">$</span>
                <input placeholder={t.field_symbol_ph} value={sym} onChange={(e) => setSym(e.target.value.toUpperCase().slice(0, 8))} />
              </div>
            </div>
          </div>

          <div className="field">
            <div className="field-label"><span>{t.field_desc}</span><span className="opt">{desc.length}/280</span></div>
            <textarea className="input" placeholder={t.field_desc_ph} value={desc} onChange={(e) => setDesc(e.target.value.slice(0, 280))} />
          </div>

          <div style={{ borderTop: '1px solid var(--line)', margin: '8px 0 16px', paddingTop: 16 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-dim)', marginBottom: 12 }}>
              · OPTIONAL
            </div>
          </div>

          <div className="field">
            <div className="field-label"><span>{t.field_dev_buy}</span><span className="opt">{t.optional}</span></div>
            <div className="input-pre">
              <input type="number" placeholder="0.0" value={devBuy} onChange={(e) => setDevBuy(e.target.value)} />
              <span className="prefix" style={{ borderRight: 0, borderLeft: '1px solid var(--line-2)' }}>TON</span>
            </div>
            <div className="chips" style={{ marginTop: 8 }}>
              {['0.5', '1', '5', '10'].map((v) => (
                <button key={v} className={'chip ' + (devBuy === v ? 'on' : '')} onClick={() => setDevBuy(v)}>{v} TON</button>
              ))}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div className="field">
              <div className="field-label"><span>{t.field_telegram}</span><span className="opt">{t.optional}</span></div>
              <input className="input" placeholder="t.me/..." value={tg} onChange={(e) => setTg(e.target.value)} />
            </div>
            <div className="field">
              <div className="field-label"><span>{t.field_twitter}</span><span className="opt">{t.optional}</span></div>
              <input className="input" placeholder="x.com/..." value={tw} onChange={(e) => setTw(e.target.value)} />
            </div>
          </div>
          <div className="field">
            <div className="field-label"><span>{t.field_website}</span><span className="opt">{t.optional}</span></div>
            <input className="input" placeholder="https://..." value={web} onChange={(e) => setWeb(e.target.value)} />
          </div>
        </div>

        {/* preview / cost */}
        <div>
          <div className="card" style={{ padding: 18, marginBottom: 16 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--text-dim)', textTransform: 'uppercase', marginBottom: 14 }}>· {t.preview}</div>
            <div className="tok-card" style={{ cursor: 'default', padding: 16 }}>
              <div className="tok-card-head">
                <div className="tok-avatar" style={{ overflow: 'hidden' }}>
                  {icon ? <img src={icon} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : '⨀'}
                </div>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div className="tok-name" style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{name || (lang === 'zh' ? '你的代币' : 'Your Token')}</div>
                  <div className="tok-sym">${sym || 'XXX'}</div>
                </div>
                <span className="tag live" style={{ fontSize: 9 }}>NEW</span>
              </div>
              <div className="tok-card-stats">
                <div><label>MCap</label><b>0 <span style={{ color:'var(--text-faint)', fontSize:10 }}>TON</span></b></div>
                <div><label>Holders</label><b>{dev > 0 ? 1 : 0}</b></div>
              </div>
              <div className="tok-progress"><div className="tok-progress-fill" style={{ width: '0%' }}></div></div>
              <div className="tok-progress-row"><span>{t.progress}</span><span style={{ color: 'var(--accent)' }}>0%</span></div>
            </div>
          </div>

          <div className="card" style={{ padding: 18, marginBottom: 16 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--text-dim)', textTransform: 'uppercase', marginBottom: 14 }}>· {t.cost_breakdown}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>
              {[
                { l: t.create_fee, v: fee.toFixed(2) + ' TON' },
                { l: t.dev_buy, v: dev.toFixed(2) + ' TON' },
              ].map((r, i) => (
                <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'7px 0', color:'var(--text-dim)' }}>
                  <span>{r.l}</span><span style={{ color: 'var(--text)' }}>{r.v}</span>
                </div>
              ))}
              <div style={{ display:'flex', justifyContent:'space-between', padding:'10px 0 4px', borderTop: '1px solid var(--line)', marginTop: 6 }}>
                <span style={{ color:'var(--text)', fontWeight: 600 }}>{t.total_pay}</span>
                <span style={{ color:'var(--accent)', fontWeight: 700 }}>{total.toFixed(2)} TON</span>
              </div>
              {dev > 0 && (
                <div style={{ marginTop: 12, padding: 10, background: 'var(--surface-2)', border: '1px solid var(--line)', borderRadius: 6, fontSize: 11 }}>
                  <div style={{ color: 'var(--text-dim)' }}>{t.est_recv}</div>
                  <div style={{ marginTop: 4 }}>
                    <b style={{ color: 'var(--accent)' }}>{fmtAmt(estTok)}</b> ${sym || 'XXX'}
                    <span style={{ color: 'var(--text-faint)', marginLeft: 6 }}>({sharePct}% {t.supply_share})</span>
                  </div>
                </div>
              )}
            </div>
          </div>

          <div style={{ padding: 14, background: 'var(--surface-2)', border: '1px solid var(--line)', borderRadius: 10, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-dim)', lineHeight: 1.7, marginBottom: 16 }}>
            {[t.rule_immutable, t.rule_curve, t.rule_grad, t.rule_devbuy].map((r, i) => (
              <div key={i}>· {r}</div>
            ))}
          </div>

          <button className="btn btn-launch btn-block" onClick={submit} disabled={!valid}>
            {wallet.connected ? '✦ ' + t.pay_and_launch : '✦ ' + t.connect_wallet}
          </button>
        </div>
      </div>

      {confirmOpen && (
        <div className="modal-back" onClick={() => setConfirmOpen(false)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="modal-head">
              <h3 className="modal-title">{t.confirm_launch}</h3>
              <button className="modal-close" onClick={() => setConfirmOpen(false)}>✕</button>
            </div>
            <div className="modal-body">
              <div style={{ display: 'flex', gap: 14, padding: 14, background: 'var(--surface-2)', borderRadius: 10, marginBottom: 14 }}>
                <div className="tok-avatar" style={{ overflow: 'hidden' }}>
                  {icon ? <img src={icon} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : '⨀'}
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16 }}>{name}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', fontSize: 12 }}>${sym}</div>
                </div>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, marginBottom: 14 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', color: 'var(--text-dim)' }}><span>{t.create_fee}</span><span style={{ color: 'var(--text)' }}>{fee.toFixed(2)} TON</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', color: 'var(--text-dim)' }}><span>{t.dev_buy}</span><span style={{ color: 'var(--text)' }}>{dev.toFixed(2)} TON</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0 4px', borderTop: '1px solid var(--line)', marginTop: 6 }}><span style={{ fontWeight: 600 }}>{t.total_pay}</span><span style={{ color: 'var(--accent)', fontWeight: 700 }}>{total.toFixed(2)} TON</span></div>
              </div>
              <div style={{ padding: 12, background: 'color-mix(in oklab, var(--down) 12%, transparent)', border: '1px solid color-mix(in oklab, var(--down) 30%, transparent)', borderRadius: 6, fontSize: 11, color: 'var(--down)', fontFamily: 'var(--font-mono)', marginBottom: 16 }}>
                ⚠ {t.launch_warn}
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                <button className="btn" onClick={() => setConfirmOpen(false)}>{t.cancel}</button>
                <button className="btn btn-launch" onClick={finalLaunch}>{t.confirm_launch}</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
window.CreateToken = CreateToken;