/* Wa by Elivate — Connection / QR scan screen */

// Deterministic QR-like pattern (decorative placeholder, not a real code)
function FakeQR({ size = 232, cells = 29 }) {
  const cell = size / cells;
  let seed = 0x9e3779b9;
  const rnd = () => { seed ^= seed << 13; seed ^= seed >>> 17; seed ^= seed << 5; return ((seed >>> 0) % 1000) / 1000; };
  const isFinder = (r, c) => {
    const inBox = (br, bc) => r >= br && r < br + 7 && c >= bc && c < bc + 7;
    return inBox(0, 0) || inBox(0, cells - 7) || inBox(cells - 7, 0);
  };
  const rects = [];
  for (let r = 0; r < cells; r++) for (let c = 0; c < cells; c++) {
    if (isFinder(r, c)) continue;
    if (rnd() > 0.52) rects.push(<rect key={r + "-" + c} x={c * cell} y={r * cell} width={cell} height={cell} rx={cell * 0.18} fill="#0B0B0D" />);
  }
  const Finder = ({ x, y }) => (
    <g transform={`translate(${x * cell} ${y * cell})`}>
      <rect width={cell * 7} height={cell * 7} rx={cell * 1.4} fill="#0B0B0D" />
      <rect x={cell} y={cell} width={cell * 5} height={cell * 5} rx={cell} fill="#fff" />
      <rect x={cell * 2} y={cell * 2} width={cell * 3} height={cell * 3} rx={cell * 0.7} fill="#0B0B0D" />
    </g>
  );
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: "block" }}>
      <rect width={size} height={size} fill="#fff" />
      {rects}
      <Finder x={0} y={0} /><Finder x={cells - 7} y={0} /><Finder x={0} y={cells - 7} />
      <g transform={`translate(${size / 2 - cell * 2.6} ${size / 2 - cell * 2.6})`}>
        <rect width={cell * 5.2} height={cell * 5.2} rx={cell * 1.3} fill="#fff" />
        <rect x={cell * 0.7} y={cell * 0.7} width={cell * 3.8} height={cell * 3.8} rx={cell} fill="#FF7F50" />
      </g>
    </svg>
  );
}

function ConnectionScreen({ status, setStatus }) {
  const { account } = window.WaData;
  const connected = status.status === "connected";
  const [busy, setBusy] = React.useState(false);

  React.useEffect(() => {
    let alive = true;
    const load = async () => {
      const next = await window.WaApi.status().catch(() => null);
      if (alive && next) setStatus(next);
    };
    load();
    const timer = setInterval(load, 3000);
    return () => { alive = false; clearInterval(timer); };
  }, []);

  const disconnect = async () => {
    if (!confirm("Disconnect this WhatsApp session and clear the saved auth files?")) return;
    setBusy(true);
    try {
      await window.WaApi.logout();
      setStatus(await window.WaApi.status());
    } finally {
      setBusy(false);
    }
  };

  if (connected) {
    return (
      <div className="page route-anim">
        <div className="conn-grid">
          <div className="card conn-status-card">
            <div className="conn-ok-ring"><Icons.check size={30} /></div>
            <div className="tag green" style={{ marginBottom: 14 }}><span className="dot green"></span> Connected</div>
            <h2>Account linked</h2>
            <p className="muted">Your session is persisted to the Railway Volume and survives restarts — no re-scan needed.</p>
            <div className="conn-meta">
              <div className="conn-meta-row"><span>Number</span><b className="mono">{status.number || account.number}</b></div>
              <div className="conn-meta-row"><span>Device</span><b>Linked device · Baileys</b></div>
              <div className="conn-meta-row"><span>Linked since</span><b>{status.connectedAt ? new Date(status.connectedAt).toLocaleString() : account.since}</b></div>
              <div className="conn-meta-row"><span>Session</span><b className="mono">{status.authDir || "/data/auth"}</b></div>
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
              <button className="btn danger" onClick={disconnect} disabled={busy}><Icons.power size={16} /> Disconnect</button>
              <button className="btn ghost" onClick={async () => setStatus(await window.WaApi.status())}><Icons.refresh size={16} /> Refresh status</button>
            </div>
          </div>

          <div className="conn-side">
            <div className="card card-pad">
              <div className="sec-head" style={{ marginBottom: 12 }}><h2 style={{ fontSize: 14 }}>Endpoint</h2></div>
              <div className="endpoint-row"><span className="tag blue">GET</span><code className="mono">/api/status</code></div>
              <div className="status-json mono">{JSON.stringify({ status: status.status, number: status.number }, null, 2)}</div>
            </div>
            <div className="card card-pad safety-mini">
              <div style={{ display: "flex", gap: 9, alignItems: "center", marginBottom: 9 }}>
                <span style={{ color: "var(--amber)" }}><Icons.shield size={17} /></span>
                <b style={{ fontSize: 13.5 }}>Use a dedicated number</b>
              </div>
              <p className="muted" style={{ fontSize: 12.5, lineHeight: 1.55 }}>Never link a primary personal line. WhatsApp can ban the connected number for spammy patterns — keep sends opt-in and throttled.</p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // disconnected → QR flow
  return (
    <div className="page route-anim">
      <div className="conn-grid">
        <div className="card conn-qr-card">
          <div className="qr-frame">
            <img src={`/qr.png?ts=${Date.now()}`} alt="WhatsApp pairing QR code" style={{ width: "100%", height: "100%", objectFit: "contain" }} />
          </div>
          <div className="qr-status">
            <span className="dot amber"></span>
            <span>{status.status === "reconnecting" ? "Starting WhatsApp session..." : "Waiting for scan"}</span>
          </div>
          <button className="btn primary" style={{ width: "100%", marginTop: 4 }} onClick={async () => setStatus(await window.WaApi.status())}>
            Refresh status
          </button>
          <p className="muted" style={{ fontSize: 11.5, marginTop: 10, textAlign: "center" }}>Auto-refreshes until connected · code rotates every 20s</p>
        </div>

        <div className="conn-side">
          <div className="card card-pad">
            <h2 style={{ fontSize: 15, marginBottom: 4 }}>Link your WhatsApp</h2>
            <p className="muted" style={{ fontSize: 13, marginBottom: 16, lineHeight: 1.5 }}>Open WhatsApp on your phone and scan this code.</p>
            {[
              ["Open WhatsApp", "On the dedicated phone you'll automate from."],
              ["Tap Settings → Linked Devices", "Then “Link a Device”."],
              ["Point the camera here", "Scan the code on the left."],
              ["Stay connected", "Session persists to the Volume — scan once."],
            ].map((s, i) => (
              <div className="step-row" key={i}>
                <div className="step-num">{i + 1}</div>
                <div><b>{s[0]}</b><span className="muted">{s[1]}</span></div>
              </div>
            ))}
          </div>
          <div className="card card-pad endpoint-card">
            <div className="endpoint-row"><span className="tag blue">GET</span><code className="mono">/api/qr</code><span className="muted" style={{ fontSize: 12, marginLeft: "auto" }}>raw QR string</span></div>
            <div className="status-json mono">{JSON.stringify({ status: status.status, number: status.number, lastDisconnect: status.lastDisconnect }, null, 2)}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ConnectionScreen = ConnectionScreen;