// Integrations.jsx — connect / manage each platform's API credentials.
/* global React, I, PlatGlyph, PLATFORMS, INTEGRATIONS */

const CONN_META = {
  connected:    { cls: 'done', tx: 'Terhubung' },
  expired:      { cls: 'run',  tx: 'Token kedaluwarsa' },
  disconnected: { cls: 'idle', tx: 'Belum terhubung' },
  connecting:   { cls: 'run',  tx: 'Menghubungkan…' },
};

function SecretField({ f, value, onChange }) {
  const [show, setShow] = React.useState(false);
  return (
    <div className={'cred' + (f.wide ? ' wide' : '')}>
      <label>{f.label}</label>
      <div className="cred-in">
        <input className="input" type={f.secret && !show ? 'password' : 'text'} value={value || ''}
               placeholder={f.ph} onChange={e => onChange(e.target.value)} spellCheck="false" autoComplete="off" />
        {f.secret && (
          <button type="button" className="cred-eye" onClick={() => setShow(s => !s)} aria-label="Tampilkan">
            {show ? <I.eyeoff /> : <I.eye />}
          </button>
        )}
      </div>
    </div>
  );
}

function Donut({ value, total }) {
  const sz = 68, sw = 7, r = (sz - sw) / 2, c = 2 * Math.PI * r;
  const pct = total ? value / total : 0;
  const mid = sz / 2;
  return (
    <svg className="donut" width={sz} height={sz} viewBox={`0 0 ${sz} ${sz}`}>
      <circle cx={mid} cy={mid} r={r} fill="none" stroke="var(--surface-3)" strokeWidth={sw} />
      <circle cx={mid} cy={mid} r={r} fill="none" stroke="var(--primary)" strokeWidth={sw}
              strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c * (1 - pct)}
              transform={`rotate(-90 ${mid} ${mid})`}
              style={{ transition: 'stroke-dashoffset .6s cubic-bezier(.3,.8,.3,1)' }} />
    </svg>
  );
}

function IntegrationCard({ pid, conn, onConnect, onDisconnect, onRefresh }) {
  const plat = PLATFORMS.find(p => p.id === pid);
  const meta = INTEGRATIONS[pid];
  const st = conn.status;
  const m = CONN_META[st];
  const open0 = st === 'disconnected' || st === 'expired';
  const [open, setOpen] = React.useState(open0);
  const [vals, setVals] = React.useState({});
  const [tested, setTested] = React.useState(false);

  const isConn = st === 'connected';
  const busy = st === 'connecting';

  return (
    <div className={'intg-card' + (isConn ? ' is-on' : '') + (st === 'expired' ? ' is-warn' : '')}>
      <div className="intg-head" onClick={() => setOpen(o => !o)}>
        <span className="plat-ic"><PlatGlyph id={pid} size={42} /></span>
        <div className="ih-main">
          <b>{plat.name}
            {meta.via && <span className="via">via {PLATFORMS.find(p => p.id === meta.via)?.name}</span>}
          </b>
          <small>{isConn ? conn.account : (st === 'expired' ? conn.account + ' · perlu diperbarui' : 'Belum disambungkan')}</small>
        </div>
        <span className={'conn-pill ' + m.cls}>
          <i className="cdot" />{m.tx}
        </span>
        <span className={'chev' + (open ? ' up' : '')}><I.chev /></span>
      </div>

      {open && (
        <div className="intg-body">
          {isConn ? (
            <div className="conn-summary">
              <span className="cs-ic"><I.shield /></span>
              <div>
                <b>Akun tersambung</b>
                <small>{conn.account} · {conn.since}</small>
              </div>
              <button className="btn-ghost" onClick={() => { onRefresh(pid, vals); setTested(false); }}>
                <I.retry /> Segarkan token
              </button>
            </div>
          ) : (
            <>
              <div className="cred-grid">
                {meta.fields.map(f => (
                  <SecretField key={f.k} f={f} value={vals[f.k]}
                               onChange={v => setVals(s => ({ ...s, [f.k]: v }))} />
                ))}
              </div>
              {st === 'expired' && (
                <div className="warn-note"><I.clock /> Token akses sudah kedaluwarsa. Perbarui untuk melanjutkan auto-posting.</div>
              )}
            </>
          )}

          <div className="scopes">
            <span className="sc-lbl">Izin (scope):</span>
            {meta.scopes.map(s => <code className="scope" key={s}>{s}</code>)}
          </div>

          <div className="intg-foot">
            <a className="docs" href="#" onClick={e => e.preventDefault()}>
              <I.ext /> {meta.docs}
            </a>
            <div className="intg-actions">
              {isConn && (
                <button className={'btn-ghost' + (tested ? ' ok' : '')} onClick={() => setTested(true)}>
                  {tested ? <><I.check /> Koneksi sehat</> : <><I.spark /> Uji koneksi</>}
                </button>
              )}
              {isConn ? (
                <button className="btn-soft danger" onClick={() => onDisconnect(pid)}>Putuskan</button>
              ) : st === 'expired' ? (
                <button className="btn-cta" disabled={busy} onClick={() => onRefresh(pid, vals)}>
                  {busy ? 'Memperbarui…' : <><I.retry /> Perbarui token</>}
                </button>
              ) : (
                <button className="btn-cta" disabled={busy} onClick={() => onConnect(pid, vals)}>
                  {busy ? 'Menghubungkan…' : <><I.link /> Hubungkan {plat.name}</>}
                </button>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function Integrations({ conn, onConnect, onDisconnect, onRefresh }) {
  const ids = PLATFORMS.map(p => p.id);
  const connected = ids.filter(id => conn[id].status === 'connected').length;
  const issues = ids.filter(id => ['disconnected', 'expired'].includes(conn[id].status)).length;

  return (
    <div className="wrap">
      <div className="page-head">
        <h1>Integrasi API</h1>
        <p>Sambungkan kredensial tiap platform agar Assuffah Studio bisa mengunggah otomatis atas nama akun resmi.</p>
      </div>

      <div className="intg-summary card">
        <div className="is-stat">
          <div className="is-ring">
            <Donut value={connected} total={ids.length} />
            <b>{connected}<span>/{ids.length}</span></b>
          </div>
          <div>
            <b>{connected} dari {ids.length} platform terhubung</b>
            <small>{issues > 0 ? `${issues} platform perlu disambungkan atau diperbarui` : 'Semua kanal siap menerima sebaran.'}</small>
          </div>
        </div>
        <div className="is-pforms">
          {ids.map(id => (
            <span key={id} className={'isp ' + conn[id].status} title={PLATFORMS.find(p => p.id === id).name + ': ' + CONN_META[conn[id].status].tx}>
              <PlatGlyph id={id} size={30} radius={9} />
              <i className="isp-dot" />
            </span>
          ))}
        </div>
      </div>

      <div className="intg-grid">
        {ids.map(id => (
          <IntegrationCard key={id} pid={id} conn={conn[id]}
                           onConnect={onConnect} onDisconnect={onDisconnect} onRefresh={onRefresh} />
        ))}
      </div>

      <div className="intg-hint">
        <I.shield /> Kredensial disimpan terenkripsi dan hanya dipakai untuk mengunggah dari akun internal Assuffah. Jangan bagikan token ke pihak luar.
      </div>
    </div>
  );
}

Object.assign(window, { Integrations });