// Confirm.jsx — Premium confirm screen with hero card

function ConfirmScreen({ song, onConfirm, onReject, onBack }) {
  const [lyricsOpen, setLyricsOpen] = React.useState(false);
  if (!song) return null;
  return (
    <div style={{
      height: '100%', background: 'linear-gradient(180deg, #0E0726 0%, #08051A 100%)',
      display: 'flex', flexDirection: 'column',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: -80, left: '50%', transform: 'translateX(-50%)',
        width: 540, height: 540, borderRadius: '50%', filter: 'blur(110px)',
        opacity: 0.42, pointerEvents: 'none',
        background: 'radial-gradient(circle, #A855F7, transparent 60%)',
        animation: 'hlbreathe 4s ease-in-out infinite',
      }} />

      <div style={{ height: 'calc(var(--safe-top, 44px) + 14px)', flexShrink: 0 }} />

      <div style={{ padding: '14px 20px', position: 'relative', zIndex: 2 }}>
        <button onClick={onBack} style={{
          width: 38, height: 38, borderRadius: 12,
          background: 'rgba(255,255,255,0.06)',
          backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
          border: '1px solid rgba(255,255,255,0.08)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M9 2L3 7l6 5" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      </div>

      <div className="hl-stagger" style={{
        flex: 1, padding: '8px 24px 0',
        display: 'flex', flexDirection: 'column',
        position: 'relative', zIndex: 2,
      }}>
        <div style={{
          fontFamily: 'var(--hl-font-mono)', fontSize: 10,
          color: 'var(--hl-accent-light)', letterSpacing: 2,
          textTransform: 'uppercase', fontWeight: 500,
        }}>¿Es esta la canción?</div>

        <div style={{
          marginTop: 10,
          fontFamily: 'var(--hl-font-display)', fontSize: 34, fontWeight: 300,
          color: '#fff', letterSpacing: -1.2, lineHeight: 1.0,
        }}>Confirma antes<br/><span style={{ fontStyle: 'italic', fontWeight: 400 }}>de continuar</span></div>

        <div style={{
          marginTop: 22, padding: 22, borderRadius: 24,
          background: 'rgba(255,255,255,0.05)',
          border: '1px solid rgba(255,255,255,0.10)',
          backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
          boxShadow: '0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 84, height: 84, borderRadius: 16, flexShrink: 0,
              background: song.cover,
              boxShadow: '0 12px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.25)',
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: 0, left: 0, right: 0, height: '50%',
                background: 'linear-gradient(180deg, rgba(255,255,255,0.2), transparent)',
              }} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontSize: 20, fontWeight: 600, color: '#fff',
                fontFamily: 'var(--hl-font-ui)', letterSpacing: -0.5, lineHeight: 1.2,
              }}>{song.name || song.title}</div>
              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.65)', marginTop: 4 }}>{song.artist?.name || song.artist}</div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.4)', marginTop: 2 }}>{song.genre}{song.duration ? ` · ${song.duration}` : ''}</div>
            </div>
          </div>

          <div style={{ height: 1, background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent)', margin: '20px 0' }} />

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
            {[{ label: 'Tono', value: song.key }, { label: 'BPM', value: song.bpm }, { label: 'Duración', value: song.duration }].map((m, i) => (
              <div key={i}>
                <div style={{
                  fontSize: 9, color: 'rgba(255,255,255,0.45)',
                  textTransform: 'uppercase', letterSpacing: 1.5,
                  fontFamily: 'var(--hl-font-mono)', fontWeight: 500,
                }}>{m.label}</div>
                <div style={{
                  fontSize: 22, color: '#fff', fontWeight: 400, marginTop: 4,
                  fontFamily: 'var(--hl-font-display)', fontStyle: 'italic',
                  letterSpacing: -0.6,
                }}>{m.value}</div>
              </div>
            ))}
          </div>

          <div style={{ height: 1, background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent)', margin: '20px 0' }} />

          <div style={{
            fontSize: 9, color: 'rgba(255,255,255,0.45)',
            textTransform: 'uppercase', letterSpacing: 1.5,
            fontFamily: 'var(--hl-font-mono)', fontWeight: 500,
          }}>Fragmento de la letra</div>
          <div style={{
            fontSize: 15, color: 'rgba(255,255,255,0.88)',
            marginTop: 8, lineHeight: 1.5, fontStyle: 'italic',
            fontFamily: 'var(--hl-font-display)', letterSpacing: -0.2,
          }}>"{song.snippet}"</div>

          <button type="button" onClick={() => setLyricsOpen(true)} style={{
            marginTop: 18, width: '100%', height: 44, borderRadius: 12,
            background: 'rgba(168,85,247,0.12)',
            border: '1px solid rgba(192,132,252,0.3)',
            color: 'var(--hl-accent-light)',
            fontSize: 13, fontWeight: 600,
            fontFamily: 'var(--hl-font-ui)', letterSpacing: -0.1,
            cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            transition: 'background 0.18s ease',
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M2 7s2-4 5-4 5 4 5 4-2 4-5 4-5-4-5-4z" stroke="currentColor" strokeWidth="1.5"/>
              <circle cx="7" cy="7" r="2" stroke="currentColor" strokeWidth="1.5"/>
            </svg>
            Ver letra completa
          </button>

          <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 6 }}>
            <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
              <circle cx="6" cy="6" r="5" stroke="rgba(192,132,252,0.7)" strokeWidth="1.2"/>
              <path d="M6 3.5v3l2 1" stroke="rgba(192,132,252,0.7)" strokeWidth="1.2" strokeLinecap="round"/>
            </svg>
            <span style={{
              fontSize: 10, color: 'rgba(192,132,252,0.85)',
              fontFamily: 'var(--hl-font-mono)', letterSpacing: 0.5,
            }}>Fuente: {song.source}</span>
          </div>
        </div>

        <div style={{ flex: 1 }} />

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, paddingBottom: 'calc(36px + var(--safe-bottom, 16px))' }}>
          <button onClick={onConfirm} style={{
              height: 56, borderRadius: 18, border: 'none', position: 'relative', overflow: 'hidden',
              background: 'linear-gradient(135deg, #B45EFF 0%, #7C3AED 50%, #4F1FCB 100%)',
              color: '#fff', fontSize: 16, fontWeight: 600,
              fontFamily: 'var(--hl-font-ui)', letterSpacing: -0.2,
              cursor: 'pointer',
              boxShadow: '0 12px 40px rgba(168,85,247,0.45), inset 0 1px 0 rgba(255,255,255,0.25)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0, height: '50%',
              background: 'linear-gradient(180deg, rgba(255,255,255,0.18), transparent)',
              pointerEvents: 'none',
            }} />
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ position: 'relative' }}>
              <path d="M3 8l3 3 7-7" stroke="white" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            <span style={{ position: 'relative' }}>Sí, es esa — editar letra</span>
          </button>
          <button onClick={onReject} style={{
              height: 52, borderRadius: 18,
              background: 'rgba(255,255,255,0.05)',
              backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
              border: '1px solid rgba(255,255,255,0.10)',
              color: 'rgba(255,255,255,0.85)', fontSize: 15, fontWeight: 500,
              fontFamily: 'var(--hl-font-ui)', cursor: 'pointer', letterSpacing: -0.2,
            }}>
            No, volver a la búsqueda
          </button>
        </div>
      </div>

      <LyricsModal
        song={song}
        isOpen={lyricsOpen}
        onClose={() => setLyricsOpen(false)}
        onEdit={onConfirm}
      />
    </div>
  );
}

Object.assign(window, { ConfirmScreen });