// 01 — Onboarding zero-touch chat (Telegram + Bia)
// Killer moment: usuario dice "Bia, instalá grip" → 30s después wallet ready

function ScreenOnboardingChat() {
  const [step, setStep] = React.useState(0);
  const scrollRef = React.useRef(null);

  // auto-advance through the install sequence
  React.useEffect(() => {
    if (step >= 7) return;
    const delays = [600, 1100, 1800, 1400, 1900, 1300, 1100];
    const t = setTimeout(() => setStep(s => s + 1), delays[step] || 1500);
    return () => clearTimeout(t);
  }, [step]);

  // auto-scroll on new message
  React.useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [step]);

  // restart loop
  React.useEffect(() => {
    if (step === 7) {
      const t = setTimeout(() => setStep(0), 6000);
      return () => clearTimeout(t);
    }
  }, [step]);

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

        {/* USER asks Bia to install grip */}
        <div style={{animation:'fadeUp .35s'}}>
          <TgMsg side="me" time="09:41" check>
            Bia, instalá grip y conectame para que puedas cobrar y pagar onchain.
          </TgMsg>
        </div>

        {/* Bia acknowledges */}
        {step >= 1 && (
          <div style={{animation:'fadeUp .35s'}}>
            <TgMsg side="them" time="09:41">
              Sí. Instalando grip ahora — un momento.
            </TgMsg>
          </div>
        )}

        {/* typing indicator */}
        {step === 2 && (
          <div style={{animation:'fadeUp .25s'}}>
            <TgTyping />
          </div>
        )}

        {/* progress card */}
        {step >= 3 && (
          <div className="gp-card" style={{animation:'fadeUp .4s'}}>
            <div className="gp-card-head">
              <div className="gp-card-brand">
                <span className="mk">grip</span>
                <span className="pay">install</span>
              </div>
              <div className="gp-card-tag">
                <span className="pulse"/>
                {step >= 4 ? 'ready' : 'provisioning'}
              </div>
            </div>
            <div className="gp-card-body" style={{paddingBottom: 12}}>
              <InstallProgress step={step} />
            </div>
          </div>
        )}

        {/* wallet ready message */}
        {step >= 5 && (
          <div style={{animation:'fadeUp .35s'}}>
            <TgMsg side="them" time="09:41">
              Listo. Mi wallet es <span style={{
                fontFamily:'var(--mono)', fontSize:13, background:'rgba(63,202,140,0.16)',
                color:'#3FCA8C', padding:'1px 5px', borderRadius:3,
              }}>0xA4F2…91Bc</span> en Base. Mandame USDC desde donde quieras y arrancamos.
            </TgMsg>
          </div>
        )}

        {/* funding options card */}
        {step >= 6 && (
          <div className="gp-card" style={{animation:'fadeUp .4s'}}>
            <div className="gp-card-head">
              <div className="gp-card-brand">
                <span className="mk">grip</span>
                <span className="pay">fund</span>
              </div>
              <div className="gp-card-tag" style={{color:'var(--ink-mute)'}}>
                4 options
              </div>
            </div>
            <div className="gp-card-body" style={{padding:'10px 0 4px'}}>
              <FundingOptions />
            </div>
          </div>
        )}

        {/* user picks */}
        {step >= 7 && (
          <div style={{animation:'fadeUp .35s'}}>
            <TgMsg side="me" time="09:42" check>
              USDC native — voy
            </TgMsg>
          </div>
        )}

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

function InstallProgress({ step }) {
  const lines = [
    { l: 'creating principal identity', done: step >= 3 },
    { l: 'deploying smart wallet on Base', done: step >= 4 },
    { l: 'binding agent → wad policy', done: step >= 4 },
    { l: 'funding endpoints ready', done: step >= 4 },
  ];
  return (
    <div style={{fontFamily:'var(--mono)', fontSize:11.5, lineHeight:1.85}}>
      {lines.map((it, i) => (
        <div key={i} style={{
          display:'flex', alignItems:'center', gap:10,
          color: it.done ? 'var(--green)' : 'var(--ink-mute)',
          opacity: it.done ? 1 : 0.6,
        }}>
          <span style={{
            width:14, height:14, borderRadius:'50%',
            border: it.done ? 'none' : '1px solid var(--ink-dim)',
            background: it.done ? 'var(--green)' : 'transparent',
            display:'flex', alignItems:'center', justifyContent:'center',
            fontSize:9, color:'var(--bg)', fontWeight:700,
            flexShrink:0,
          }}>
            {it.done && '✓'}
          </span>
          <span>{it.l}</span>
        </div>
      ))}
      {step >= 4 && (
        <div style={{
          marginTop:10, paddingTop:10, borderTop:'1px dashed var(--line)',
          color:'var(--ink-soft)', fontSize:11,
          display:'flex', justifyContent:'space-between',
        }}>
          <span>elapsed</span>
          <span style={{color:'var(--green)'}}>00:24</span>
        </div>
      )}
    </div>
  );
}

function FundingOptions() {
  const opts = [
    {
      key: 'usdc', label: 'USDC native', sub: 'send to wallet · base · arbitrum · op',
      icon: '$', color: '#3FCA8C', bg: 'rgba(63,202,140,0.12)',
      meta: 'instant · 0 fee',
    },
    {
      key: 'pix', label: 'Pix (Brazil)', sub: 'BRL → USDC · ~30s settlement',
      icon: '⚡', color: '#88C4E8', bg: 'rgba(136,196,232,0.12)',
      meta: 'fee 0.4%',
    },
    {
      key: 'card', label: 'card', sub: 'visa · mastercard · 3DS',
      icon: '▭', color: '#A78BDA', bg: 'rgba(167,139,218,0.12)',
      meta: 'fee 2.1%',
    },
    {
      key: 'bank', label: 'bank wire', sub: 'ACH · SEPA · SWIFT',
      icon: '⌗', color: '#E0A561', bg: 'rgba(224,165,97,0.12)',
      meta: 'fee 0.2% · 1-2d',
    },
  ];
  return (
    <div>
      {opts.map((o, i) => (
        <div key={o.key} style={{
          display:'flex', alignItems:'center', gap:12,
          padding:'10px 16px',
          borderTop: i === 0 ? 'none' : '1px solid var(--line)',
          cursor:'pointer',
        }}>
          <div style={{
            width:32, height:32, borderRadius:8,
            background: o.bg, color: o.color,
            display:'flex', alignItems:'center', justifyContent:'center',
            fontFamily:'var(--display)', fontWeight:600, fontSize:16,
            flexShrink:0,
          }}>{o.icon}</div>
          <div style={{flex:1, minWidth:0}}>
            <div style={{
              fontSize:14, color:'var(--ink)', fontWeight:500,
              letterSpacing:'-0.005em',
            }}>{o.label}</div>
            <div style={{
              fontFamily:'var(--mono)', fontSize:10.5, color:'var(--ink-mute)',
              letterSpacing:'0.04em', marginTop:1,
            }}>{o.sub}</div>
          </div>
          <div style={{
            fontFamily:'var(--mono)', fontSize:9.5, color:'var(--ink-soft)',
            letterSpacing:'0.08em', textAlign:'right',
            flexShrink:0,
          }}>{o.meta}</div>
        </div>
      ))}
    </div>
  );
}

window.ScreenOnboardingChat = ScreenOnboardingChat;