/* 04 Muro de matches + 05 Perfil de match */

const MATCHES = [
  { id:'lucia', name:'Lucía', age:27, city:'Madrid', score:93, badges:['Verificada','Cruce Club'], job:'Estratega en agencia', tags:['Cine indie','Vermut','Cerámica','Berlín-fan'], bio:'Escribo copies de día y guiones malos de noche. Me encanta la gente que se ríe fuerte y planifica poco.' },
  { id:'mateo', name:'Mateo', age:29, city:'Madrid', score:91, badges:['Verificado','Cruce Club'], job:'Arquitecto', tags:['Correr','Vinilos','Puentes al norte','Cocinar'], bio:'Diseño espacios. Colecciono discos que ya nadie escucha. Busco alguien con quien construir cosas — pequeñas o grandes.' },
  { id:'carmen', name:'Carmen', age:32, city:'Sevilla', score:89, badges:['Verificada','Cruce Signature'], job:'Fotógrafa freelance', tags:['Analógica','Viajar','Perros','Flamenco'], bio:'Sevilla es mi puerto. Salgo a fotografiar y vuelvo con historias. Me pierde una buena tortilla y una conversación que no tenga fin.' },
  { id:'nerea', name:'Nerea', age:25, city:'Bilbao', score:87, badges:['Verificada'], job:'Product designer', tags:['Skate','Ambient','Sushi','Correr playa'], bio:'Bilbao. Diseño apps que no dan asco. Directa. Si me escribes con "hola guapa" te bloqueo.' },
  { id:'diego', name:'Diego', age:28, city:'Barcelona', score:85, badges:['Verificado','Cruce Club'], job:'Chef de partida', tags:['Cocina asiática','Correr','Techno','Pádel'], bio:'Cocino para vivir y vivo para cocinar. Vengo de Bogotá, resido en Poblenou. Me río mucho — casi demasiado.' },
  { id:'javier', name:'Javier', age:31, city:'Barcelona', score:84, badges:['Verificado','Cruce Signature'], job:'Founder SaaS', tags:['Vela','Vinos','Trekking','Lectura'], bio:'Empecé una empresa a los 26. Ahora quiero acordarme de mí. Busco alguien con criterio propio y risa fácil.' },
  { id:'pablo', name:'Pablo', age:34, city:'Madrid', score:82, badges:['Verificado'], job:'Profesor de filosofía', tags:['Libros','Café de puchero','Tenis','Debate'], bio:'Enseño a adolescentes a pensar. Fuera del aula, café, tenis y demasiadas ganas de discutir sobre casi todo.' },
  { id:'alba', name:'Alba', age:30, city:'Valencia', score:81, badges:['Verificada','Cruce Club'], job:'Bióloga marina', tags:['Buceo','Yoga','Cine coreano','Té matcha'], bio:'Vivo entre Valencia y el mar. Silencios cómodos, planes lentos y noches de películas subtituladas.' },
];

const CURRENT_USER = {
  id: 'you', name: 'Tú', premium: false,
};

function Wall({ go }) {
  const [filter, setFilter] = useState('all');
  const [selected, setSelected] = useState(null);
  // Fase 1c: matches reales de la API (null = sin sesión o aún cargando -> demo)
  const [real, setReal] = useState(null);

  useEffect(() => {
    const s = window.CruceAPI && window.CruceAPI.Session.get();
    if (!s) return;
    fetch('api/bridge.php/matches', { headers: { Authorization: 'Bearer ' + s.token } })
      .then(r => r.ok ? r.json() : Promise.reject())
      .then(d => {
        if (!d.ok) return;
        setReal(d.matches.map(m => ({
          id: 'u' + m.id,
          name: m.name, age: m.age || '—', city: m.city || '',
          score: m.affinity, real: true,
          badges: [
            m.verified ? 'Verificado' : null,
            m.plan === 'signature' ? 'Cruce Signature' : m.plan === 'club' ? 'Cruce Club' : null,
            m.intent_match ? 'Busca lo mismo' : null,
          ].filter(Boolean),
          job: m.job || '',
          tags: m.tags && m.tags.length ? m.tags : ['Recién llegado/a'],
          bio: m.bio || 'Este perfil aún no ha escrito su presentación.',
          venue: m.venue_prefs || '',
        })));
      })
      .catch(() => {}); // sin conexión: se queda el muro demo
  }, []);

  const list = real || MATCHES;
  const filtered = filter === 'all' ? list : list.filter(m => m.city === filter);

  if (selected) {
    return <ProfileView match={selected} onBack={()=>setSelected(null)} go={go}/>;
  }

  return (
    <div className="wall-page">
      <AppTopBar current="wall" go={go}/>

      <div className="wall-header">
        <div>
          <div className="eyebrow"><span className="dot"></span>Tu muro · actualizado ahora</div>
          <h1 className="serif" style={{fontSize:'clamp(38px, 5vw, 60px)', lineHeight:1.02, letterSpacing:'-0.02em', marginTop:14}}>
            {list.length} {list.length === 1 ? 'persona que' : 'personas que'} <em style={{color:'var(--red)'}}>encajan</em> contigo.
          </h1>
          <p style={{color:'var(--ink-3)', marginTop:12, fontSize:16, maxWidth:560}}>
            Ordenadas por afinidad. Toca cualquier perfil para leer más. Para hablar, activa <strong>Cruce Club</strong>.
          </p>
          {!real && (
            <p style={{fontSize:12, color:'var(--ink-4)', marginTop:8, fontFamily:'var(--mono)'}}>
              MURO DEMO — entra con tu cuenta para ver personas reales.
            </p>
          )}
        </div>
        <div className="wall-cta-card">
          <div className="chip red">
            <I.Lock size={12}/> Chat bloqueado
          </div>
          <div className="serif" style={{fontSize:20, marginTop:10, lineHeight:1.2}}>Desbloquea el chat y videollamada.</div>
          <div style={{fontSize:12, color:'var(--ink-3)', marginTop:6}}>Desde 29€ / mes. Cancela cuando quieras.</div>
          <button className="btn btn-red btn-sm" style={{marginTop:14, width:'100%'}} onClick={()=>go('checkout')}>
            Activar Cruce Club
          </button>
        </div>
      </div>

      <div className="wall-filters">
        <div className="wall-filter-group">
          {['all','Madrid','Barcelona','Valencia','Sevilla','Bilbao'].map(c => (
            <button key={c}
              className={"chip-btn " + (filter === c ? 'active' : '')}
              onClick={()=>setFilter(c)}>
              {c === 'all' ? 'Todas' : c}
            </button>
          ))}
        </div>
        <div style={{display:'flex', gap:10, alignItems:'center', color:'var(--ink-3)', fontSize:13}}>
          <I.Sparkles size={14}/> Ordenados por CRUCE-Q
        </div>
      </div>

      <div className="wall-grid">
        {filtered.map(m => (
          <MatchCard key={m.id} match={m} onOpen={()=>setSelected(m)}/>
        ))}
      </div>

      <div className="wall-note">
        <I.Info size={14}/>
        <span>Las sugerencias son orientativas. Puedes pedir <a style={{color:'var(--red)', textDecoration:'underline'}}>revisión humana</a> o ver <a style={{color:'var(--red)', textDecoration:'underline'}}>por qué te sugerimos a alguien</a>.</span>
      </div>
    </div>
  );
}

function MatchCard({ match, onOpen }) {
  return (
    <article className="match-card" onClick={onOpen}>
      <div className="match-portrait">
        <Portrait id={match.id} label={match.name} size="lg" showTag={false} style={{height:'100%'}}/>
        <div className="match-score">
          <div className="match-score-num serif">{match.score == null ? '—' : match.score}{match.score != null && <span style={{fontSize:16}}>%</span>}</div>
          <div className="match-score-lbl mono">AFINIDAD</div>
        </div>
        <div className="match-badges">
          {match.badges.includes('Verificada') || match.badges.includes('Verificado') ? (
            <div className="match-chip verified-chip"><I.Check size={10}/> Verificado</div>
          ) : null}
          {match.badges.includes('Cruce Signature') && (
            <div className="match-chip signature-chip">Signature</div>
          )}
        </div>
      </div>
      <div className="match-body">
        <div className="match-name">
          <span className="serif" style={{fontSize:22}}>{match.name}, {match.age}</span>
        </div>
        <div className="match-meta">
          <span><I.MapPin size={11}/> {match.city}</span>
          <span>·</span>
          <span>{match.job}</span>
        </div>
        <div className="match-tags">
          {match.tags.slice(0,3).map(t => <span key={t} className="match-tag">{t}</span>)}
        </div>
      </div>
    </article>
  );
}

function ProfileView({ match, onBack, go }) {
  const [tab, setTab] = useState('bio');
  return (
    <div className="profile-page">
      <div className="profile-top">
        <button className="btn btn-ghost btn-sm" onClick={onBack}><I.ArrowLeft size={14}/> Al muro</button>
        <div className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>PERFIL · {match.id.toUpperCase()}</div>
        <div/>
      </div>

      <div className="profile-body">
        <div className="profile-left">
          <div className="profile-hero">
            <Portrait id={match.id} label={match.name} size="xl" showTag={false} style={{height:520}}/>
            <div className="profile-hero-badge">
              {(!match.real || match.verified) && <div className="verified"><I.Check size={12}/> Perfil verificado</div>}
              <div className="mono" style={{fontSize:10, color:'var(--ink-4)', marginTop:4}}>ID: CR-{match.id.toUpperCase()}-{new Date().getFullYear()}</div>
            </div>
          </div>
          <div className="profile-thumbs">
            {[match.id, match.id, match.id, match.id].map((k,i) => (
              <div key={i} className={"profile-thumb " + (i === 0 ? 'active' : '')}>
                <Portrait id={k} size="xs" showTag={false} style={{height:'100%'}}/>
              </div>
            ))}
          </div>
        </div>

        <div className="profile-right">
          <div className="profile-head">
            <h1 className="serif" style={{fontSize:52, lineHeight:1, letterSpacing:'-0.02em'}}>
              {match.name}, <span style={{color:'var(--ink-3)'}}>{match.age}</span>
            </h1>
            <div className="profile-meta">
              <span><I.MapPin size={13}/> {match.city}</span>
              <span>·</span>
              <span>{match.job}</span>
            </div>
            <div className="profile-badges">
              {match.badges.map(b => (
                <div key={b} className={"chip " + (b.includes('Signature') ? 'gold' : b.includes('Verific') ? 'sage' : '')}>
                  {b.includes('Verific') && <I.Check size={11}/>}
                  {b}
                </div>
              ))}
            </div>
          </div>

          <div className="profile-score-card">
            <div>
              <div className="mono" style={{fontSize:11, color:'var(--ink-3)', letterSpacing:'.1em'}}>AFINIDAD CRUCE-Q</div>
              <div className="serif" style={{fontSize:64, lineHeight:1, marginTop:6, color:'var(--red)'}}>{match.score == null ? '—' : match.score}{match.score != null && <span style={{fontSize:24}}>%</span>}</div>
            </div>
            <div className="profile-score-bars">
              {[
                {t:'Valores', v:92}, {t:'Estilo de vida', v:88}, {t:'Comunicación', v:95}, {t:'Química', v:90},
              ].map(b => (
                <div key={b.t} className="pscore-row">
                  <span>{b.t}</span>
                  <div className="pscore-bar"><div style={{width:`${b.v}%`}}/></div>
                  <span className="mono" style={{fontSize:12}}>{b.v}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="profile-tabs">
            {['bio','intereses','test'].map(t => (
              <button key={t} className={"profile-tab " + (tab === t ? 'active' : '')} onClick={()=>setTab(t)}>
                {t === 'bio' ? 'Presentación' : t === 'intereses' ? 'Intereses' : 'Respuestas'}
              </button>
            ))}
          </div>

          <div className="profile-tab-body">
            {tab === 'bio' && (
              <div>
                <p style={{fontSize:18, lineHeight:1.55, color:'var(--ink-2)', fontFamily:'var(--serif)', maxWidth:600}}>
                  "{match.bio}"
                </p>
                <div style={{marginTop:24, display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, maxWidth:500}}>
                  {!match.real && (
                    <>
                      <div>
                        <div className="mono" style={{fontSize:10, letterSpacing:'.1em', color:'var(--ink-4)'}}>BUSCANDO</div>
                        <div style={{fontSize:14, marginTop:4}}>Relación seria</div>
                      </div>
                      <div>
                        <div className="mono" style={{fontSize:10, letterSpacing:'.1em', color:'var(--ink-4)'}}>MASCOTAS</div>
                        <div style={{fontSize:14, marginTop:4}}>Sí, un gato</div>
                      </div>
                      <div>
                        <div className="mono" style={{fontSize:10, letterSpacing:'.1em', color:'var(--ink-4)'}}>IDIOMAS</div>
                        <div style={{fontSize:14, marginTop:4}}>ES · EN · IT</div>
                      </div>
                    </>
                  )}
                  <div>
                    <div className="mono" style={{fontSize:10, letterSpacing:'.1em', color:'var(--ink-4)'}}>PLAN IDEAL</div>
                    <div style={{fontSize:14, marginTop:4}}>{match.real ? (match.venue || 'Por definir') : 'Vermut y museo'}</div>
                  </div>
                </div>
              </div>
            )}
            {tab === 'intereses' && (
              <div className="profile-tags">
                {[...match.tags, 'Podcast','Vino natural','Arte moderno','Correr sin app','Berlín'].map(t => (
                  <span key={t} className="chip">{t}</span>
                ))}
              </div>
            )}
            {tab === 'test' && (
              match.real ? (
                <div className="profile-answers">
                  <p style={{fontSize:14, color:'var(--ink-3)'}}>Las respuestas del test son privadas. La afinidad que ves se calcula sobre ellas sin revelarlas.</p>
                </div>
              ) : (
              <div className="profile-answers">
                <p style={{fontSize:13, color:'var(--ink-3)', marginBottom:14}}>Respuestas del test — solo las que compartió públicamente:</p>
                {[
                  {q:'Noche perfecta', a:'Sesión de vinilos en casa'},
                  {q:'Frase que la define', a:'"Nunca podría estar con alguien que no lea".'},
                  {q:'Fines de semana', a:'Cultura y museos'},
                ].map((x,i) => (
                  <div key={i} className="profile-ans">
                    <div className="mono" style={{fontSize:10, letterSpacing:'.1em', color:'var(--ink-4)'}}>P{i+1} · {x.q.toUpperCase()}</div>
                    <div className="serif" style={{fontSize:20, marginTop:4}}>{x.a}</div>
                  </div>
                ))}
              </div>
            ))}
          </div>

          <div className="profile-actions">
            <div className="profile-locked-cta">
              <div style={{display:'flex', gap:12, alignItems:'center'}}>
                <I.Lock size={20}/>
                <div>
                  <div className="serif" style={{fontSize:20}}>Chat y videollamada bloqueados</div>
                  <div style={{fontSize:13, color:'var(--ink-3)', marginTop:2}}>Activa Cruce Club para escribir a {match.name}.</div>
                </div>
              </div>
              <button className="btn btn-red" onClick={()=>go('checkout')}>
                Desbloquear (29€/mes) <I.Arrow size={14}/>
              </button>
            </div>
            <div style={{display:'flex', gap:10, marginTop:16}}>
              <button className="btn btn-outline"><I.Heart size={14}/> Guardar</button>
              <button className="btn btn-ghost">Reportar</button>
              <button className="btn btn-ghost">Ver por qué me sugerís</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function AppTopBar({ current, go }) {
  const me = (window.CruceAPI && window.CruceAPI.Session.get()) || null;
  const nav = [
    { id: 'wall', label: 'Muro', icon: <I.Home size={14}/> },
    { id: 'chat', label: 'Mensajes', icon: <I.Message size={14}/>, badge: 2 },
    { id: 'events', label: 'Eventos', icon: <I.Calendar size={14}/> },
    { id: 'me', label: 'Mi perfil', icon: <I.User size={14}/> },
  ];
  return (
    <div className="app-top">
      <div className="sello" style={{fontSize:22}}>Cruce</div>
      <nav className="app-top-nav">
        {nav.map(n => (
          <button key={n.id} className={"app-top-item " + (current === n.id ? 'active' : '')} onClick={()=>go(n.id)}>
            {n.icon} <span>{n.label}</span>
            {n.badge && <span className="app-top-badge">{n.badge}</span>}
          </button>
        ))}
      </nav>
      <div className="app-top-right">
        <button className="app-top-icon"><I.Bell size={16}/></button>
        <div className="app-top-avatar">
          <Portrait id={me ? 'u' + me.user.id : 'alba'} label={me ? me.user.name : ''} size="xs" showTag={false}/>
        </div>
      </div>
    </div>
  );
}

window.Wall = Wall;
window.AppTopBar = AppTopBar;
window.MATCHES = MATCHES;