// WealthShareSimulatorPage — page publique partageable du Wealth Simulator (Vague 5 PR 5.2)
// Route : #/simulator/:listingId
// Pas de login requis. Affiche le simulator en grand + meta OG + CTA compte.

const { useState: useStateWSP, useEffect: useEffectWSP } = React;

function WealthShareSimulatorPage({ listing, lang }) {
  const FR = lang !== 'en';

  // Injecter les meta tags OG dynamiquement pour les aperçus sociaux
  useEffectWSP(() => {
    if (!listing) return;

    const ogImageUrl = `/api/v1/og/wealth/${listing.id}.png`;
    const title = FR
      ? `Projection patrimoniale — ${listing.address || listing.city} · Vestora`
      : `Wealth Projection — ${listing.address || listing.city} · Vestora`;
    const description = FR
      ? `Analyse d'investissement immobilier 10 ans pour ce ${listing.type || 'bien'} à ${listing.city}. Équité et cashflow cumulé estimés.`
      : `10-year real estate investment analysis for this ${listing.type || 'property'} in ${listing.city}. Estimated equity and cumulative cash flow.`;

    const setMeta = (property, content, attr = 'property') => {
      let el = document.querySelector(`meta[${attr}="${property}"]`);
      if (!el) {
        el = document.createElement('meta');
        el.setAttribute(attr, property);
        document.head.appendChild(el);
      }
      el.setAttribute('content', content);
    };

    // OG tags
    setMeta('og:title',       title);
    setMeta('og:description', description);
    setMeta('og:image',       ogImageUrl);
    setMeta('og:image:width',  '1200');
    setMeta('og:image:height', '630');
    setMeta('og:type',        'website');
    setMeta('og:url',         window.location.href);

    // Twitter card
    setMeta('twitter:card',        'summary_large_image', 'name');
    setMeta('twitter:title',       title, 'name');
    setMeta('twitter:description', description, 'name');
    setMeta('twitter:image',       ogImageUrl, 'name');

    // Titre page
    const prevTitle = document.title;
    document.title = title;
    return () => { document.title = prevTitle; };
  }, [listing && listing.id, lang]);

  if (!listing) {
    return (
      <div style={{
        padding: 48, textAlign: 'center',
        fontFamily: 'system-ui, sans-serif',
        maxWidth: 560, margin: '80px auto',
      }}>
        <h1 style={{ fontSize: 22, marginBottom: 12 }}>
          {FR ? 'Bien introuvable' : 'Listing not found'}
        </h1>
        <p style={{ color: '#666', marginBottom: 24 }}>
          {FR
            ? "Cette annonce n'est plus disponible ou a été retirée du marché."
            : 'This listing is no longer available or has been removed.'}
        </p>
        <a href="#/" style={{
          display: 'inline-block',
          background: 'oklch(0.28 0.07 155)',
          color: 'white', padding: '10px 18px',
          borderRadius: 6, textDecoration: 'none', fontWeight: 500,
        }}>
          {FR ? "Retour à l'accueil" : 'Back to home'}
        </a>
      </div>
    );
  }

  return (
    <div style={{
      minHeight: '100vh',
      background: 'var(--bg, #f8f9f6)',
      fontFamily: 'var(--font-body, system-ui, sans-serif)',
    }}>
      {/* Header simplifié */}
      <header style={{
        padding: '12px 20px',
        background: '#fff',
        borderBottom: '1px solid #e5e7eb',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        position: 'sticky', top: 0, zIndex: 100,
      }}>
        <a href="#/" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 6,
            background: 'oklch(0.28 0.07 155)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="white" strokeWidth="1.5">
              <path d="M2 12L8 4l6 8"/>
              <path d="M5 12h6"/>
            </svg>
          </div>
          <span style={{ fontWeight: 700, fontSize: 16, color: 'oklch(0.28 0.07 155)', letterSpacing: '-0.02em' }}>
            Vestora
          </span>
        </a>
        <div style={{ display: 'flex', gap: 8 }}>
          <button
            onClick={() => window.navigateTo && window.navigateTo(`#/explorer`)}
            style={{
              fontSize: 12, padding: '7px 14px', borderRadius: 6,
              background: 'transparent', color: '#374151',
              border: '1px solid #d1d5db', cursor: 'pointer', fontFamily: 'inherit',
            }}
          >
            {FR ? 'Explorer les biens' : 'Explore listings'}
          </button>
          <button
            onClick={() => window.vestora?.auth?.openModal && window.vestora.auth.openModal()}
            style={{
              fontSize: 12, padding: '7px 14px', borderRadius: 6,
              background: 'oklch(0.28 0.07 155)', color: '#fff',
              border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontWeight: 600,
            }}
          >
            {FR ? 'Créer un compte' : 'Create account'}
          </button>
        </div>
      </header>

      {/* Corps */}
      <main style={{ padding: '32px 16px 64px', maxWidth: 720, margin: '0 auto' }}>
        {window.WealthSimulator ? (
          <window.WealthSimulator listing={listing} lang={lang} compact={false} />
        ) : (
          <div style={{ textAlign: 'center', padding: 40, color: '#6b7280' }}>
            Chargement…
          </div>
        )}
      </main>

      {/* Footer */}
      <footer style={{
        padding: '20px 20px',
        borderTop: '1px solid #e5e7eb',
        background: '#fff',
        textAlign: 'center',
        fontSize: 12, color: '#9ca3af', lineHeight: 1.8,
      }}>
        <div style={{ marginBottom: 8 }}>
          <a href="#/" style={{ color: '#6b7280', textDecoration: 'none', fontWeight: 700 }}>Vestora</a>
          {' · '}
          <a href="#/tarifs" style={{ color: '#6b7280', textDecoration: 'none' }}>
            {FR ? 'Tarifs' : 'Pricing'}
          </a>
          {' · '}
          <a href="#/confidentialite" style={{ color: '#6b7280', textDecoration: 'none' }}>
            {FR ? 'Confidentialité' : 'Privacy'}
          </a>
          {' · '}
          <a href="#/conditions" style={{ color: '#6b7280', textDecoration: 'none' }}>
            {FR ? 'Conditions' : 'Terms'}
          </a>
        </div>
        <div>
          {FR
            ? "Estimations à des fins informatives uniquement. Ne constitue pas un conseil financier ou d'investissement."
            : 'Estimates for informational purposes only. Does not constitute financial or investment advice.'}
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { WealthShareSimulatorPage });