// 03 — Grip Pay approval card (THE moment of truth)
// Agent exceeds cap → push notif → Face ID approval inline

function ScreenApprovalCard() {
  const [phase, setPhase] = React.useState('request'); // request → approving → paid → reset
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    const seq = [
      { d: 4500, p: 'approving' },
      { d: 1800, p: 'paid' },
      { d: 5500, p: 'request' },
    ];
    let i = 0; let cancelled = false;
    const tick = () => {
      if (cancelled) return;
      const cur = seq[i % seq.length];
      setTimeout(() => {
        if (cancelled) return;
        setPhase(cur.p);
        i++; tick();
      }, cur.d);
    };
    tick();
    return () => { cancelled = true; };
  }, []);

  React.useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [phase]);

  return (
    <div className="tg">
      <StatusBar tint="light" />
      <TelegramHeader name="Bia" sub="online · agent" />
      <div className="tg-body" ref={scrollRef}>
        <TgDay>Today</TgDay>

        <TgMsg side="me" time="14:08" check>
          renová mi sub de Anthropic Pro y compra créditos OpenAI por 500
        </TgMsg>

        <TgMsg side="them" time="14:08">
          Anthropic Pro: $20 — listo, dentro del cap. OpenAI $500 excede tu cap diario ($300). Pidiendo aprobación.
        </TgMsg>

        {/* THE CARD */}
        <div className="gp-card" style={{
          margin:'8px 4px',
          borderColor: phase === 'paid' ? 'var(--green-line)' :
                       phase === 'approving' ? 'rgba(167,139,218,0.4)' :
                       'rgba(224,165,97,0.36)',
          boxShadow: phase === 'paid'
            ? '0 16px 48px -10px rgba(63,202,140,0.2), 0 0 0 1px rgba(63,202,140,0.04) inset'
            : '0 16px 48px -10px rgba(224,165,97,0.18), 0 0 0 1px rgba(255,255,255,0.02) inset',
          transition:'all .4s',
        }}>
          <ApprovalHead phase={phase} />
          <div className="gp-card-body" style={{padding:'18px 18px 14px'}}>
            <ApprovalAmount phase={phase} />
            <ApprovalRows phase={phase} />
            <ApprovalPolicy phase={phase} />
            <ApprovalCTA phase={phase} setPhase={setPhase} />
          </div>
        </div>

        {phase === 'paid' && (
          <div style={{animation:'fadeUp .35s'}}>
            <TgMsg side="them" time="14:09">
              Pagado. Créditos en cuenta. Sigo con la sub de Anthropic.
            </TgMsg>
          </div>
        )}

        <div style={{height: 8}}/>
      </div>
      <TgInput placeholder="Message" />
    </div>
  );
}

function ApprovalHead({ phase }) {
  const tag = phase === 'paid' ? 'paid' : phase === 'approving' ? 'verifying' : 'approval';
  const color = phase === 'paid' ? 'var(--green)' : phase === 'approving' ? 'var(--violet)' : 'var(--ochre)';
  return (
    <div className="gp-card-head" style={{
      background: phase === 'paid' ? 'rgba(63,202,140,0.06)' :
                  phase === 'approving' ? 'rgba(167,139,218,0.06)' :
                  'rgba(224,165,97,0.06)',
      transition:'background .3s',
    }}>
      <div className="gp-card-brand">
        <span className="mk">grip</span>
        <span className="pay">pay</span>
      </div>
      <div className="gp-card-tag" style={{color}}>
        <span className="pulse" style={{background:color, boxShadow:`0 0 6px ${color}`}}/>
        {tag}
      </div>
    </div>
  );
}

function ApprovalAmount({ phase }) {
  return (
    <div style={{textAlign:'center', padding:'8px 0 18px', position:'relative'}}>
      <div style={{
        fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-mute)',
        letterSpacing:'0.18em', textTransform:'uppercase', marginBottom:8,
      }}>requested · usdc</div>
      <div style={{
        fontFamily:'var(--display)', fontWeight:500,
        fontSize:54, letterSpacing:'-0.04em', lineHeight:1,
        color:'var(--ink)', fontVariantNumeric:'tabular-nums',
        display:'flex', justifyContent:'center', alignItems:'baseline', gap:4,
      }}>
        <span style={{color:'var(--ink-mute)', fontSize:24}}>$</span>
        <span>500.</span>
        <span style={{color:'var(--ink-mute)', fontSize:34}}>00</span>
      </div>
      {phase === 'paid' && (
        <div style={{
          marginTop:10, fontFamily:'var(--mono)', fontSize:10,
          color:'var(--green)', letterSpacing:'0.18em', textTransform:'uppercase',
          animation:'fadeUp .35s',
        }}>
          ↳ debited from principal · lea.base
        </div>
      )}
    </div>
  );
}

function ApprovalRows({ phase }) {
  const rows = [
    { k: 'to', v: 'OpenAI · platform.openai.com' },
    { k: 'via', v: 'Bia · agent · 0x7B…d2A1' },
    { k: 'ref', v: 'credits-purchase-2k4j' },
  ];
  if (phase === 'paid') {
    rows.push({ k: 'tx', v: <span style={{color:'var(--green)'}}>0x4f8c…d2a3 ↗</span> });
  }
  return (
    <div style={{
      borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)',
      padding:'10px 0',
    }}>
      {rows.map((r, i) => (
        <div key={i} style={{
          display:'flex', justifyContent:'space-between', padding:'4px 0',
          fontFamily:'var(--mono)', fontSize:11.5,
        }}>
          <span style={{color:'var(--ink-mute)', letterSpacing:'0.1em', textTransform:'uppercase', fontSize:10}}>{r.k}</span>
          <span style={{color:'var(--ink)'}}>{r.v}</span>
        </div>
      ))}
    </div>
  );
}

function ApprovalPolicy({ phase }) {
  const lines = [
    { ok: true, t: <span>recipient <code style={{color:'var(--ochre)'}}>openai.com</code> in allowlist</span> },
    { ok: false, t: <span>amount $500 exceeds daily cap of $300</span> },
    { ok: true, t: <span>scope <code style={{color:'var(--ochre)'}}>infra:ai-credits</code> matches</span> },
  ];
  return (
    <div style={{padding:'12px 0 4px'}}>
      <div style={{
        fontFamily:'var(--mono)', fontSize:9.5, color:'var(--ink-mute)',
        letterSpacing:'0.18em', textTransform:'uppercase', marginBottom:8,
      }}>policy check</div>
      {lines.map((l, i) => (
        <div key={i} style={{
          display:'flex', alignItems:'flex-start', gap:9,
          padding:'4px 0', fontSize:12, lineHeight:1.45,
          color: l.ok ? 'var(--ink-soft)' : 'var(--ochre)',
        }}>
          <span style={{
            color: l.ok ? 'var(--green)' : 'var(--ochre)',
            fontFamily:'var(--mono)', fontSize:11, marginTop:1,
          }}>{l.ok ? '✓' : '✗'}</span>
          <span>{l.t}</span>
        </div>
      ))}
    </div>
  );
}

function ApprovalCTA({ phase, setPhase }) {
  if (phase === 'paid') {
    return (
      <div style={{
        marginTop:14, padding:'14px',
        background:'var(--green-soft)',
        border:'1px solid var(--green-line)',
        borderRadius:10,
        display:'flex', alignItems:'center', gap:12,
        animation:'fadeUp .35s',
      }}>
        <div style={{
          width:36, height:36, borderRadius:'50%',
          background:'var(--green)', color:'var(--bg)',
          display:'flex', alignItems:'center', justifyContent:'center',
          fontSize:20, fontWeight:600, flexShrink:0,
        }}>✓</div>
        <div style={{flex:1, minWidth:0}}>
          <div style={{
            fontFamily:'var(--display)', fontWeight:500, fontSize:15,
            color:'var(--green)', letterSpacing:'-0.005em',
          }}>paid</div>
          <div style={{
            fontFamily:'var(--mono)', fontSize:10.5, color:'var(--ink-soft)',
            letterSpacing:'0.04em', marginTop:1,
          }}>2.1s · 1 conf · base</div>
        </div>
      </div>
    );
  }

  if (phase === 'approving') {
    return (
      <div style={{
        marginTop:14, padding:'14px',
        background:'rgba(167,139,218,0.08)',
        border:'1px solid rgba(167,139,218,0.36)',
        borderRadius:10,
        display:'flex', alignItems:'center', gap:14,
        animation:'fadeUp .25s',
      }}>
        <FaceIDIcon spinning />
        <div style={{flex:1}}>
          <div style={{
            fontFamily:'var(--display)', fontWeight:500, fontSize:15,
            color:'var(--violet)', letterSpacing:'-0.005em',
          }}>verifying face id…</div>
          <div style={{
            fontFamily:'var(--mono)', fontSize:10.5, color:'var(--ink-soft)',
            letterSpacing:'0.04em', marginTop:1,
          }}>signing approval onchain</div>
        </div>
      </div>
    );
  }

  return (
    <div style={{display:'flex', gap:8, marginTop:14}}>
      <button onClick={() => setPhase('approving')} style={{
        flex:1, padding:'14px',
        background:'var(--ink)', color:'var(--bg)',
        border:'none', borderRadius:10,
        fontFamily:'var(--body)', fontWeight:600, fontSize:14,
        letterSpacing:'-0.01em',
        cursor:'pointer',
        display:'flex', alignItems:'center', justifyContent:'center', gap:8,
        boxShadow:'0 8px 20px -6px rgba(234,228,210,0.18)',
      }}>
        <FaceIDIcon size={18} />
        approve with face id
      </button>
      <button style={{
        padding:'14px 18px',
        background:'transparent', color:'var(--ink-soft)',
        border:'1px solid var(--line-strong)', borderRadius:10,
        fontFamily:'var(--mono)', fontSize:12, letterSpacing:'0.04em',
        cursor:'pointer',
      }}>deny</button>
    </div>
  );
}

function FaceIDIcon({ size = 24, spinning }) {
  return (
    <div style={{
      width:size+12, height:size+12, borderRadius:8,
      display:'flex', alignItems:'center', justifyContent:'center',
      background:'rgba(255,255,255,0.04)',
      border:'1px solid var(--line)',
      flexShrink:0,
    }}>
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
        stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"
        style={spinning ? { animation: 'pulse 1.6s infinite' } : {}}
      >
        <path d="M3 7V5a2 2 0 0 1 2-2h2M21 7V5a2 2 0 0 0-2-2h-2M3 17v2a2 2 0 0 0 2 2h2M21 17v2a2 2 0 0 1-2 2h-2"/>
        <path d="M9 9v1M15 9v1M9 15c1 1 2 1.5 3 1.5s2-.5 3-1.5M12 9v3l-1 1"/>
      </svg>
    </div>
  );
}

window.ScreenApprovalCard = ScreenApprovalCard;