// WelcomeScreen — KW Birlik Cockpit · "Önemini anlatan sayfa"
// Login → Welcome → Tutorial → Onboarding → Cockpit boot sequence (2. adım)
// Orbital visual (15 agent + Neşet center NB) · 3 pillar cards · Big CTA
// Tasarım dili: Liquid Glass · KW kırmızı %5 accent · SF Pro Display · Spring physics

const ArrowIconR = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
  </svg>
);

const ClockIcon = () => (
  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
  </svg>
);

const ChevronLeftIcon = () => (
  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="15 18 9 12 15 6"/>
  </svg>
);

const ChevronRightIcon = () => (
  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="9 18 15 12 9 6"/>
  </svg>
);

// ─── Orbital Visual: 15 agent + Neşet center ────────────────
const WelcomeOrbit = () => {
  const ref = React.useRef(null);
  const [size, setSize] = React.useState(480);
  const agents = (window.AGENTS || []).slice(0, 15);

  // Responsive radius
  React.useEffect(() => {
    const onResize = () => {
      const w = window.innerWidth;
      setSize(w < 540 ? 340 : 480);
    };
    onResize();
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const radius = size === 340 ? 130 : 180;

  return (
    <div className="welcome-orbit" ref={ref}>
      {/* Aurora glow ring (background, biggest) */}
      <div className="orbit-glow" aria-hidden="true"></div>

      {/* Dashed orbit ring (slow rotate) */}
      <div className="orbit-ring" aria-hidden="true"></div>

      {/* Agents in circular orbit */}
      {agents.map((a, i) => {
        // Start at top (-PI/2), distribute evenly clockwise
        const angle = (i / agents.length) * 2 * Math.PI - Math.PI / 2;
        const tx = Math.cos(angle) * radius;
        const ty = Math.sin(angle) * radius;
        return (
          <div
            key={a.id}
            className="orbit-agent"
            style={{
              background: a.color,
              ['--tx']: `${tx}px`,
              ['--ty']: `${ty}px`,
              animationDelay: `${320 + i * 80}ms`,
            }}
            title={a.name}
          >
            {a.avatar}
            <span className="orbit-agent-tooltip">{a.name}</span>
          </div>
        );
      })}

      {/* Center: Neşet monogram */}
      <div className="orbit-center" aria-label="Neşet Birlik">
        NB
      </div>
    </div>
  );
};

// ─── Pillar Card ────────────────────────────────────────────
const PillarCard = ({ icon, iconColor, title, headline, body }) => (
  <div className="pillar-card">
    <div className={`pillar-icon-wrap ${iconColor}`}>
      <span aria-hidden="true">{icon}</span>
    </div>
    <h3 className="pillar-h3">{title}</h3>
    <div className="pillar-headline">{headline}</div>
    <p className="pillar-body">{body}</p>
  </div>
);

// ─── Welcome Screen ─────────────────────────────────────────
const WelcomeScreen = ({ onContinue, onSkip, onLogout }) => {
  const displayName = (() => {
    try { return localStorage.getItem('kw_display_name') || 'Neşet'; }
    catch { return 'Neşet'; }
  })();

  // Mount'ta scroll'u başa al — hero'dan başlasın
  React.useLayoutEffect(() => {
    window.scrollTo(0, 0);
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
    // Welcome screen'in kendi scroll container'ı varsa onu da sıfırla
    const screen = document.querySelector('.welcome-screen');
    if (screen) screen.scrollTop = 0;
  }, []);

  // Scroll-driven reveal — IntersectionObserver ile ".scroll-reveal" elementleri view'a girince animate et
  React.useEffect(() => {
    const targets = document.querySelectorAll('.welcome-screen .scroll-reveal');
    if (!targets.length || typeof IntersectionObserver === 'undefined') {
      // Fallback: hepsini görünür yap
      targets.forEach(el => el.classList.add('in-view'));
      return;
    }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // Stagger delay — her elementin kendi data-delay'i veya index sırası
          const delay = Number(entry.target.dataset.revealDelay || 0);
          if (delay > 0) {
            setTimeout(() => entry.target.classList.add('in-view'), delay);
          } else {
            entry.target.classList.add('in-view');
          }
          obs.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.15,
      rootMargin: '0px 0px -10% 0px',
    });
    targets.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  // Klavye kısayolları
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Enter' || (e.key === 'ArrowRight' && !e.metaKey && !e.ctrlKey)) {
        e.preventDefault();
        onContinue?.();
      } else if (e.key === 'Escape') {
        // Atla onayı yerine: doğrudan skip (kullanıcı zaten "atla" link'i de var)
        onSkip?.();
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onContinue, onSkip]);

  return (
    <div className="welcome-screen">
      <div className="welcome-aurora" aria-hidden="true"></div>

      {/* Top bar */}
      <div className="welcome-topbar">
        <a onClick={onLogout} role="button" tabIndex={0}>
          <ChevronLeftIcon /> Çıkış yap
        </a>
        <a onClick={onSkip} role="button" tabIndex={0}>
          Şimdilik atla <ChevronRightIcon />
        </a>
      </div>

      {/* Floating ambient sparkles — dikkat çekici ama yormayan */}
      <div className="welcome-sparkles" aria-hidden="true">
        <span className="sparkle s1">✦</span>
        <span className="sparkle s2">·</span>
        <span className="sparkle s3">✦</span>
        <span className="sparkle s4">·</span>
        <span className="sparkle s5">·</span>
        <span className="sparkle s6">✦</span>
      </div>

      {/* Hero */}
      <section className="welcome-hero">
        <div className="welcome-greeting">
          <span aria-hidden="true">✦</span>
          <span>KW Birlik Executive Cockpit</span>
        </div>
        <h1 className="welcome-h1">
          <span className="line">{displayName} Birlik,</span>
          <span className="accent">15 uzmandan oluşan kurumsal yönetim katmanınız.</span>
        </h1>
        <p className="welcome-sub">
          Stratejik karar destek, finansal analiz, hukuki değerlendirme ve operasyonel koordinasyonu tek bir komuta merkezinde toplayan kurumsal yönetim platformu — 7/24 erişim, anlık sentez, kararlarınızı veri ve uzmanlık ile destekler.
        </p>
        <WelcomeOrbit />
      </section>

      {/* 3 Pillars */}
      <section className="welcome-pillars-wrap scroll-reveal">
        <h2 className="welcome-h2">Üç temel kullanım alanı:</h2>
        <div className="welcome-pillars">
          <PillarCard
            icon="⚖️"
            iconColor="purple"
            title="Stratejik Kararlar"
            headline="Tek bakış açısı yerine — disiplinler arası sentez."
            body="CFO, CSO, GC ve Managing Partner aynı anda görüş bildirir; çelişen pozisyonlar netleştirilir, 30 saniyede yapılandırılmış karar özeti sunulur."
          />
          <PillarCard
            icon="📊"
            iconColor="green"
            title="Veri Analizi"
            headline="Manuel raporlama yerine — otomatik karşılaştırma."
            body="KW Alesta, Viya ve Orsa ofis verilerini yükleyin; performans, kâr marjı ve büyüme metrikleri yan yana açılır, sapma ve fırsat noktaları otomatik işaretlenir."
          />
          <PillarCard
            icon="🌍"
            iconColor="sky"
            title="Uluslararası Genişleme"
            headline="Belirsizlik yerine — entegre danışmanlık."
            body="ABD ve Avrupa pazarlarında yapılandırma, vergi rejimi, EB-1A sonrası süreç ve cross-border operasyonel hukuk; GC, CSO ve CFO ortak değerlendirir."
          />
        </div>
      </section>

      {/* Adaptive intelligence — "kullandıkça akıllaşır" vurgusu */}
      <section className="welcome-adaptive scroll-reveal" data-reveal-delay="120">
        <div className="welcome-adaptive-card">
          <div className="welcome-adaptive-glyph" aria-hidden="true">
            <span className="ring-a"></span>
            <span className="ring-b"></span>
            <span className="ring-c"></span>
            <span className="core">✦</span>
          </div>
          <div className="welcome-adaptive-body">
            <div className="welcome-adaptive-eyebrow">Adaptif Zekâ</div>
            <h2 className="welcome-adaptive-h2">Kullandıkça derinleşen bir komuta merkezi.</h2>
            <p className="welcome-adaptive-text">
              Cockpit, sizinle geçirdiği her saat ile karar tarzınızı, önceliklerinizi ve risk eşiğinizi öğrenir. Sorduğunuz her soru, kabul ya da reddettiğiniz her öneri sistemin sentezini keskinleştirir; zamanla brief'ler kısalır, öneriler kişiselleşir, sezgileriniz veriyle örtüşür.
            </p>
            <p className="welcome-adaptive-text-muted">
              İlk hafta tanışma; ilk ay derinleşme; üçüncü ayda sistem sizinle aynı dili konuşur.
            </p>
          </div>
        </div>
      </section>

      {/* CTA — scroll-reveal yok; her zaman görünür kalmalı (kritik buton) */}
      <section className="welcome-cta-block">
        <p className="welcome-cta-pre">
          <span className="sparkle" aria-hidden="true">✦</span>
          Yönetim ekibiniz aktif ve hazır.
        </p>
        <p className="welcome-cta-explain">
          Sistemle tanışmanız için yaklaşık 8 dakikalık rehberli bir tur sunulacak; her ekran ve uzmanlık alanı tek tek tanıtılacak, ardından ekibin sizi daha iyi tanıması için kısa bir bağlam paylaşımı isteyeceğiz.
        </p>
        <button
          className="welcome-cta-btn"
          onClick={onContinue}
          autoFocus
        >
          <span className="welcome-cta-glow" aria-hidden="true"></span>
          <span className="welcome-cta-shine" aria-hidden="true"></span>
          <span className="welcome-cta-label">Tura Başla</span>
          <span className="welcome-cta-arrow"><ArrowIconR/></span>
          <span className="welcome-cta-duration">
            <ClockIcon /> 8 dakika
          </span>
        </button>
      </section>

      <footer className="welcome-footer">
        KW Birlik Group · Executive Cockpit · 2026
      </footer>
    </div>
  );
};

window.WelcomeScreen = WelcomeScreen;