// ============================================================
// WASIED · Auth + Public profiles
// ============================================================

// ---------- Login ----------
function LoginPage() {
  const [loading, setLoading] = React.useState(false);
  const handleLogin = () => {
    setLoading(true);
    setTimeout(() => navigate('/app'), 1200);
  };
  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
        <div className="breath" style={{ position: 'absolute', top: '-20%', left: '20%', width: 600, height: 600, background: 'radial-gradient(circle, var(--accent-glow) 0%, transparent 60%)', opacity: 0.4 }}/>
        <div className="breath" style={{ position: 'absolute', bottom: '-20%', right: '20%', width: 500, height: 500, background: 'radial-gradient(circle, rgba(103,232,249,0.12) 0%, transparent 60%)', opacity: 0.4, animationDelay: '-3s' }}/>
      </div>

      <Link to="/" style={{ position: 'absolute', top: 24, left: 24, display: 'inline-flex', alignItems: 'center', gap: 9 }}>
        <WLogo size={22} withWord/>
      </Link>

      <div style={{ position: 'relative', width: '100%', maxWidth: 440, padding: 40, background: 'var(--surface-1)', border: '1px solid var(--border-2)', borderRadius: 16, boxShadow: 'var(--shadow-lg)' }}>
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <h1 className="h-display" style={{ fontSize: 26, margin: 0, marginBottom: 8 }}>Connexion à Wasied</h1>
          <p style={{ fontSize: 13, color: 'var(--fg-3)', margin: 0 }}>Un seul compte pour Hosting, Orders, Formations et Addons.</p>
        </div>

        <Button variant="discord" size="lg" fullWidth icon="discord" onClick={handleLogin} disabled={loading} style={{ height: 52, fontSize: 14 }}>
          {loading ? 'Redirection vers Discord…' : 'Continuer avec Discord'}
        </Button>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '24px 0' }}>
          <span style={{ flex: 1, height: 1, background: 'var(--border-1)' }}/>
          <span style={{ fontSize: 11, color: 'var(--fg-3)' }}>EXCLUSIVEMENT DISCORD</span>
          <span style={{ flex: 1, height: 1, background: 'var(--border-1)' }}/>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <PerkRow icon="zap" text="Création de compte automatique à la 1re connexion"/>
          <PerkRow icon="users" text="Vos rôles Discord deviennent des badges Wasied"/>
          <PerkRow icon="shield" text="Aucun mot de passe à mémoriser, aucune fuite possible"/>
        </div>

        <div style={{ marginTop: 32, paddingTop: 20, borderTop: '1px solid var(--border-1)', fontSize: 11, color: 'var(--fg-3)', textAlign: 'center', lineHeight: 1.6 }}>
          En vous connectant, vous acceptez les <Link to="/legal/cgu" style={{ color: 'var(--fg-2)', textDecoration: 'underline' }}>CGU</Link> et la <Link to="/legal/rgpd" style={{ color: 'var(--fg-2)', textDecoration: 'underline' }}>politique RGPD</Link>.<br/>
          Pas de Discord ? <a href="mailto:contact@wasied.com" style={{ color: 'var(--fg-2)', textDecoration: 'underline' }}>Contactez-moi.</a>
        </div>
      </div>
    </div>
  );
}

function PerkRow({ icon, text }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'var(--surface-2)', borderRadius: 8 }}>
      <Icon name={icon} size={14} color="var(--accent)"/>
      <span style={{ fontSize: 12, color: 'var(--fg-2)' }}>{text}</span>
    </div>
  );
}

// ---------- Public profile ----------
function PublicProfilePage({ handle }) {
  // Find some matching user from reviews + portfolio
  const review = [...DATA.reviews.formations, ...DATA.reviews.orders].find(r => r.name.toLowerCase().replace(/[^a-z0-9_]/g, '') === handle.toLowerCase().replace(/[^a-z0-9_]/g, ''));
  const portfolio = DATA.orders.portfolio.find(p => p.id === handle.toLowerCase() || p.client.toLowerCase() === handle.toLowerCase());

  const name = review?.name || portfolio?.client || handle;
  const badges = [];
  if (review && DATA.reviews.formations.includes(review)) badges.push({ label: `Élève · ${review.role}`, tone: 'formations', icon: 'graduation' });
  if (review && DATA.reviews.orders.includes(review)) badges.push({ label: 'Client Commandes', tone: 'orders', icon: 'briefcase' });
  if (portfolio) badges.push({ label: 'Case study', tone: 'brand', icon: 'star' });
  if (!badges.length) badges.push({ label: 'Membre de la communauté', tone: 'subtle', icon: 'users' });

  return (
    <MarketingShell hireStatus={window.__hireStatus}>
      <section style={{ padding: '56px 0 24px', position: 'relative', overflow: 'hidden' }}>
        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
          <div style={{ position: 'absolute', top: -120, left: '40%', width: 500, height: 500, background: 'radial-gradient(circle, var(--accent-glow) 0%, transparent 65%)', opacity: 0.3 }}/>
        </div>
        <div className="wcontainer" style={{ position: 'relative' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 24, marginBottom: 40, flexWrap: 'wrap' }}>
            <Avatar name={name} size={104} tone={review?.tone || 'indigo'} ring="var(--accent-glow)"/>
            <div style={{ flex: 1, minWidth: 280 }}>
              <div style={{ fontSize: 12, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', marginBottom: 6 }}>wasied.com/u/{handle}</div>
              <h1 className="h-display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', margin: 0, marginBottom: 10 }}>{name}</h1>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 16 }}>
                {badges.map((b, i) => <Badge key={i} tone={b.tone} icon={b.icon}>{b.label}</Badge>)}
              </div>
              <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.6, margin: 0, maxWidth: 580 }}>
                Membre de l'écosystème Wasied depuis 2024. {review ? "Étudiant de la formation GLua et client récurrent." : "Profil public synchronisé via Discord OAuth."}
              </p>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <Button variant="ghost" icon="message">Message</Button>
              <Button variant="ghost" icon="discord">Discord</Button>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 48 }} className="trust-grid">
            <ProfileStat label="Joined" value="Sept. 2024" icon="calendar"/>
            <ProfileStat label="Formation" value={review ? review.role : '-'} icon="graduation"/>
            <ProfileStat label="Commandes" value={portfolio ? '3' : '0'} icon="briefcase"/>
            <ProfileStat label="Addons publiés" value="0" icon="package"/>
          </div>
        </div>
      </section>

      {review && (
        <Section eyebrow="Témoignage" title="Ce que dit cette personne de Wasied.">
          <div style={{ padding: 32, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14, maxWidth: 720 }}>
            <Icon name="message" size={28} color="var(--accent)" style={{ marginBottom: 14 }}/>
            <p style={{ fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.65, margin: 0, fontStyle: 'italic' }}>"{review.text}"</p>
            <div style={{ marginTop: 18, fontSize: 12, color: 'var(--fg-3)' }}>Posté publiquement sur {DATA.reviews.formations.includes(review) ? 'formations.wasied.com' : 'le portail commande'}{review.date ? ` · ${review.date}` : ''}</div>
          </div>
        </Section>
      )}

      <Section eyebrow="Badges Discord syncés" title="Rôles obtenus dans la communauté Wasied.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }} className="trust-grid">
          {[
            { name: 'Membre Wasied', icon: 'users', color: 'var(--fg-2)', date: 'Sept. 2024' },
            review && DATA.reviews.formations.includes(review) ? { name: `Élève ${review.role}`, icon: 'graduation', color: 'var(--service-formations)', date: 'Janv. 2025' } : null,
            review && DATA.reviews.orders.includes(review) ? { name: 'Client Orders', icon: 'briefcase', color: 'var(--service-orders)', date: review.date } : null,
            { name: 'Communauté active', icon: 'flame', color: 'var(--xp)', date: 'Avr. 2025' },
          ].filter(Boolean).map((b, i) => (
            <div key={i} style={{ padding: 20, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, textAlign: 'center' }}>
              <div style={{ width: 48, height: 48, borderRadius: 12, margin: '0 auto 12px', background: `color-mix(in srgb, ${b.color} 12%, var(--surface-2))`, color: b.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={b.icon} size={22}/>
              </div>
              <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-1)', marginBottom: 4 }}>{b.name}</div>
              <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>{b.date}</div>
            </div>
          ))}
        </div>
      </Section>

      <Section eyebrow="Sur la plateforme" title="Activité publique récente.">
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, overflow: 'hidden' }}>
          {[
            { icon: 'graduation', text: `${name} a publié un avis sur la formation`, when: 'Il y a 2 mois' },
            { icon: 'star', text: `${name} a noté 5 étoiles · Wasied`, when: 'Il y a 3 mois' },
            { icon: 'users', text: `${name} a rejoint l'écosystème Wasied`, when: 'Il y a 14 mois' },
          ].map((a, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 22px', borderTop: i > 0 ? '1px solid var(--border-1)' : 'none' }}>
              <Icon name={a.icon} size={16} color="var(--fg-3)"/>
              <div style={{ flex: 1, fontSize: 13, color: 'var(--fg-2)' }}>{a.text}</div>
              <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>{a.when}</div>
            </div>
          ))}
        </div>
      </Section>
    </MarketingShell>
  );
}

function ProfileStat({ label, value, icon }) {
  return (
    <div style={{ padding: 20, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--fg-3)', marginBottom: 8 }}>
        <Icon name={icon} size={12}/>{label}
      </div>
      <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: 'var(--tracking-snug)' }}>{value}</div>
    </div>
  );
}

Object.assign(window, { LoginPage, PublicProfilePage });