// T2 Falcon — Flow Map: shows how all screens connect

const FlowMap = ({ onJump }) => {
  const nodes = [
    { id: 'login',    title: 'Login',            sub: 'Username + Password',           x: 40,  y: 200, w: 180 },
    { id: 'login-err',title: 'Login States',     sub: '9 error / status messages',     x: 40,  y: 40,  w: 180, kind: 'err' },
    { id: 'forgot',   title: 'Forgot Password',  sub: 'Username + +966 mobile',        x: 300, y: 200, w: 180 },
    { id: 'otp',      title: 'Enter OTP',        sub: '6 digits · 60s countdown',      x: 560, y: 200, w: 180 },
    { id: 'otp-err',  title: 'Invalid OTP',      sub: 'Retry / Resend',                x: 560, y: 40,  w: 180, kind: 'err' },
    { id: 'success',  title: 'OTP Verified',     sub: 'Success transition',            x: 820, y: 200, w: 180, kind: 'ok' },
    { id: 'reset',    title: 'Reset Password',   sub: 'Match / mismatch check',        x: 820, y: 360, w: 180 },
    { id: 'done',     title: 'Password Updated', sub: 'Return to login',               x: 560, y: 360, w: 180, kind: 'ok' },
    { id: 'portal',   title: 'Portal (dashboard)', sub: 'Authenticated session',       x: 300, y: 360, w: 180, kind: 'ok' },
  ];

  const links = [
    ['login', 'login-err', 'fail'],
    ['login', 'forgot', 'click Forgot'],
    ['login', 'portal', 'success'],
    ['forgot', 'otp', 'Next'],
    ['otp', 'otp-err', 'wrong code'],
    ['otp', 'success', 'Verify'],
    ['success', 'reset', 'Continue'],
    ['reset', 'done', 'submit'],
    ['done', 'login', 'Back'],
  ];

  const getPt = (n, side) => {
    const cx = n.x + n.w / 2;
    const cy = n.y + 40;
    if (side === 'r') return [n.x + n.w, cy];
    if (side === 'l') return [n.x, cy];
    if (side === 't') return [cx, n.y];
    if (side === 'b') return [cx, n.y + 80];
    return [cx, cy];
  };

  const byId = Object.fromEntries(nodes.map(n => [n.id, n]));

  const path = (a, b) => {
    // determine sides by position
    const A = byId[a]; const B = byId[b];
    let aSide = 'r', bSide = 'l';
    if (B.x + B.w < A.x) { aSide = 'l'; bSide = 'r'; }
    if (B.y < A.y - 20 && Math.abs(B.x - A.x) < 30) { aSide = 't'; bSide = 'b'; }
    if (B.y > A.y + 20 && Math.abs(B.x - A.x) < 30) { aSide = 'b'; bSide = 't'; }
    const [x1, y1] = getPt(A, aSide);
    const [x2, y2] = getPt(B, bSide);
    const dx = (x2 - x1) / 2;
    return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`;
  };

  return (
    <div className="flow-map">
      <div className="flow-header">
        <div>
          <div className="form-eyebrow" style={{ color: 'var(--cyan-400)' }}>System Map</div>
          <h2 style={{ margin: '6px 0 0', fontSize: 22, letterSpacing: '-0.01em' }}>Authentication flow</h2>
        </div>
        <div className="flow-legend">
          <span><span className="dot" style={{ background: 'var(--teal-700)' }}></span>Step</span>
          <span><span className="dot" style={{ background: 'var(--danger-500)' }}></span>Error / Status</span>
          <span><span className="dot" style={{ background: 'var(--success-500)' }}></span>Success</span>
        </div>
      </div>

      <div className="flow-canvas">
        <svg className="flow-svg" viewBox="0 0 1060 480" preserveAspectRatio="xMinYMin meet">
          <defs>
            <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
              <path d="M0,0 L10,5 L0,10 z" fill="#94a3b8" />
            </marker>
          </defs>
          {links.map(([from, to, label], i) => (
            <g key={i}>
              <path d={path(from, to)} fill="none" stroke="#cbd5e1" strokeWidth="1.5" strokeDasharray="4 4" markerEnd="url(#arrow)" />
            </g>
          ))}
          {nodes.map(n => (
            <g key={n.id} style={{ cursor: 'pointer' }} onClick={() => onJump(n.id)}>
              <rect
                x={n.x} y={n.y} width={n.w} height={80} rx={12}
                fill="white"
                stroke={n.kind === 'err' ? '#fecaca' : n.kind === 'ok' ? '#a7f3d0' : '#e2e8f0'}
                strokeWidth="1.5"
                style={{ filter: 'drop-shadow(0 2px 6px rgba(15,23,42,0.06))' }}
              />
              <circle cx={n.x + 18} cy={n.y + 22} r={5}
                fill={n.kind === 'err' ? '#ef4444' : n.kind === 'ok' ? '#10b981' : '#0d3f44'} />
              <text x={n.x + 32} y={n.y + 27} fontSize="14" fontWeight="700" fill="#0f172a">{n.title}</text>
              <text x={n.x + 18} y={n.y + 50} fontSize="11" fill="#64748b">{n.sub}</text>
              <text x={n.x + 18} y={n.y + 68} fontSize="10" fill="#2dd4d9" fontWeight="600">Click to open →</text>
            </g>
          ))}
        </svg>
      </div>
    </div>
  );
};

window.FlowMap = FlowMap;