// qr.jsx — deterministic QR-style matrix renderer (mock) + identity-QR card for a contract.
// Không phải bộ mã QR chuẩn — chỉ tạo ma trận ổn định, "trông quét được", seed từ token hợp đồng.
// Phụ thuộc: qrInfoOf / contractParty (cdata.jsx), useLang / useToast (ui.jsx).

function qrMatrix(seedStr, n){
  // xorshift PRNG seeded từ chuỗi
  let h = 2166136261 >>> 0;
  for (let i = 0; i < seedStr.length; i++){ h ^= seedStr.charCodeAt(i); h = Math.imul(h, 16777619); }
  let s = h || 123456789;
  const rnd = () => { s ^= s << 13; s ^= s >>> 17; s ^= s << 5; s >>>= 0; return s / 4294967296; };
  const m = Array.from({ length:n }, () => Array(n).fill(0));
  const finder = (r, c) => { for (let i = -1; i <= 7; i++) for (let j = -1; j <= 7; j++){ const rr = r + i, cc = c + j; if (rr < 0 || cc < 0 || rr >= n || cc >= n) continue;
    const border = i >= 0 && i <= 6 && j >= 0 && j <= 6 && (i === 0 || i === 6 || j === 0 || j === 6);
    const core = i >= 2 && i <= 4 && j >= 2 && j <= 4; m[rr][cc] = border || core ? 1 : (i === -1 || j === -1 || i === 7 || j === 7) ? 0 : -1; } };
  finder(0, 0); finder(0, n - 7); finder(n - 7, 0);              // 3 finder patterns
  // timing patterns
  for (let i = 8; i < n - 8; i++){ m[6][i] = i % 2 === 0 ? 1 : 0; m[i][6] = i % 2 === 0 ? 1 : 0; }
  // alignment block (bottom-right-ish)
  const a = n - 9; for (let i = 0; i <= 4; i++) for (let j = 0; j <= 4; j++){ const border = i === 0 || i === 4 || j === 0 || j === 4; const core = i === 2 && j === 2; if (m[a + i] && m[a + i][a + j] !== 1) m[a + i][a + j] = (border || core) ? 1 : 0; }
  // fill phần còn lại bằng noise có seed, chừa các ô đã đặt (-1) để trống
  for (let r = 0; r < n; r++) for (let c = 0; c < n; c++){ if (m[r][c] === -1) { m[r][c] = 0; continue; } if (m[r][c] === 0 && !isReserved(r, c, n)) m[r][c] = rnd() > 0.5 ? 1 : 0; }
  return m;
}
function isReserved(r, c, n){
  const inFinder = (fr, fc) => r >= fr - 1 && r <= fr + 7 && c >= fc - 1 && c <= fc + 7;
  if (inFinder(0, 0) || inFinder(0, n - 7) || inFinder(n - 7, 0)) return true;
  if (r === 6 || c === 6) return true;
  return false;
}

function QRCode({ value, size = 160, fg = '#0E1116', bg = '#ffffff', quiet = 4 }){
  const n = 29;
  const m = React.useMemo(() => qrMatrix(value, n), [value]);
  const cell = size / (n + quiet * 2);
  const rects = [];
  for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (m[r][c]) rects.push(
    <rect key={r + '-' + c} x={(c + quiet) * cell} y={(r + quiet) * cell} width={cell + 0.4} height={cell + 0.4} fill={fg} />
  );
  return (
    <svg width={size} height={size} viewBox={'0 0 ' + size + ' ' + size} style={{ display:'block', borderRadius:6 }} shapeRendering="crispEdges">
      <rect width={size} height={size} fill={bg} />
      {rects}
    </svg>
  );
}

/* Thẻ QR định danh cho 1 hợp đồng — dùng ở chi tiết hợp đồng & tab QR của Hỗ trợ. */
function ContractQRCard({ c, compact }){
  const { t } = useLang();
  const toast = useToast();
  const info = qrInfoOf(c);
  const expired = info.expired;
  const muted = expired || !info.active;
  return (
    <div className="card" style={{ overflow:'hidden' }}>
      <div className="card-head"><h3 style={{ fontSize:'var(--fs-md)' }}><i className="bi bi-qr-code" style={{ marginRight:6, color:'var(--accent)' }}></i>{t('qr.title')}</h3>
        {info.active ? <span className="badge badge-success"><i className="dot"></i>{t('qr.active')}</span> : <span className="badge badge-error"><i className="dot"></i>{t('qr.expired')}</span>}</div>
      <div className="card-body">
        <div className="flex g16 items-start wrap">
          <div style={{ position:'relative', padding:8, background:'#fff', borderRadius:10, border:'1px solid var(--border)', filter:muted ? 'grayscale(1) opacity(.45)' : 'none' }}>
            <QRCode value={info.url} size={compact ? 120 : 148} />
            {muted && <div style={{ position:'absolute', inset:0, display:'grid', placeItems:'center' }}><span className="badge badge-error" style={{ transform:'rotate(-8deg)', fontSize:'var(--fs-base)' }}>{t('qr.expired')}</span></div>}
          </div>
          <div className="col g8" style={{ flex:'1 1 200px', minWidth:180 }}>
            <div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{t('qr.scanHint')}</div>
            <div className="det-row" style={{ padding:'3px 0' }}><span className="dk">{t('sp.contract')}</span><span className="dv mono" style={{ color:'var(--primary)', fontWeight:600 }}>{c.code}</span></div>
            <div className="det-row" style={{ padding:'3px 0' }}><span className="dk">{t('qr.token')}</span><span className="dv mono" style={{ fontWeight:600 }}>{info.token}</span></div>
            <div className="det-row" style={{ padding:'3px 0' }}><span className="dk">{t('qr.expiry')}</span><span className="dv mono">{info.expiry} {info.active && <span className="subtle">· {info.daysLeft} {t('qr.daysLeft')}</span>}</span></div>
            <div className="flex g6 wrap" style={{ marginTop:4 }}>
              <button className="btn btn-sm" onClick={() => { navigator.clipboard && navigator.clipboard.writeText(info.url); toast(t('qr.copied'), 'success'); }}><i className="bi bi-link-45deg"></i>{t('qr.copy')}</button>
              <button className="btn btn-sm" onClick={() => window.print && window.print()}><i className="bi bi-printer"></i>{t('qr.print')}</button>
            </div>
            <div className="subtle flex g6 items-start" style={{ fontSize:'var(--fs-sm)', marginTop:2 }}><i className="bi bi-info-circle" style={{ marginTop:2 }}></i><span>{t('qr.renewNote')}</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { QRCode, ContractQRCard, qrMatrix });
