// Solution Sessions V2 — landing screen for impossible-market-architect skill
// Hero + 4-phase visual flow + history list

const SOLUTION_PHASE_META = {
  c1:  { phase: 2, status: 'devam', label: 'Keşif tamamlandı · ICP analizi devam ediyor' },
  c5:  { phase: 3, status: 'devam', label: 'ICP tamamlandı · Strateji yolları geliştiriliyor' },
  c8:  { phase: 4, status: 'tamam', label: 'Karar verildi · Çeşme pilot programı seçildi' },
  c12: { phase: 4, status: 'tamam', label: 'Karar verildi · Hibrit model onaylandı' },
};

const PHASE_BADGE = {
  1: { dot: '🔴', label: 'Aşama 1', cls: 'phase-1' },
  2: { dot: '🟡', label: 'Aşama 2', cls: 'phase-2' },
  3: { dot: '🟡', label: 'Aşama 3', cls: 'phase-3' },
  4: { dot: '🟢', label: 'Aşama 4', cls: 'phase-4' },
};

const PHASE_CARDS = [
  {
    n: 1,
    title: 'Keşif',
    tagline: 'Yapılandırılmış soru havuzu.',
    description: '8 kategoride 30+ soru. Bir sonraki faza geçmeden önce minimum 6 kategoride netleşmiş cevap zorunlu — eksik veriyi varsayım üzerinden ilerletmiyoruz.',
    example: 'Müteahhit profili, son 5 yıl proje teslim performansı, bölgesel 12 aylık satış hacmi, talep elastikiyeti.',
  },
  {
    n: 2,
    title: 'ICP Analizi',
    tagline: 'Hedef alıcı profilini doğrularız.',
    description: 'Beş referans profil arasından (İstanbullu, İzmirli, Ankaralı, Gurbetçi, Yabancı) senaryoya en uygun üç tanesini önceliklendirir, müteahhit varsayımıyla karşılaştırırız.',
    example: 'Çeşme 50 villa örneği: birincil hedef İstanbullu üst-orta gelir grubu; ikincil hedef Avrupa\'daki Türk diasporası; üçüncül hedef yabancı emekli segmenti.',
  },
  {
    n: 3,
    title: 'Üç Strateji Yolu',
    tagline: 'Tek bir öneri değil — karşılaştırmalı üç rota.',
    description: 'İki pragmatik + bir alternatif (provokatif). Her yol için Türkiye pazarından doğrulanmış vaka referansı, ön-postmortem, ilk somut aksiyon adımı dahil.',
    example: 'Yol 1: Sınırlı koleksiyon konumlandırma (Mahall Bomonti modeli). Yol 2: Diaspora odaklı satış (Yalıkavak Tasarı modeli). Yol 3 (alternatif): Müteahhitle yapılandırılmış ortaklık.',
    hasWarning: true,
  },
  {
    n: 4,
    title: 'Sezgi Testi',
    tagline: 'Karar öncesi son denetim.',
    description: 'Çıkan üç yolu sizin sektör tecrübenizle çapraz sorgular; hangi yola "olmaz" deniyor ve sebebini netleştiririz. Cevap, sistemin gelecekteki önerilerini kalibre eder.',
    example: 'İtiraz noktası: bölgesel pazar gerçeği mi, geçmiş bir başarısızlık refleksi mi, yoksa ilkesel bir sınır mı?',
  },
];

const formatRelativeTime = (mins) => {
  if (mins == null) return '';
  if (mins < 60) return `${mins} dakika önce`;
  if (mins < 1440) return `${Math.floor(mins/60)} saat önce`;
  const days = Math.floor(mins/1440);
  if (days === 1) return 'dün';
  if (days < 7) return `${days} gün önce`;
  return `${Math.floor(days/7)} hafta önce`;
};

const PhaseCard = ({ data, idx }) => {
  const [expanded, setExpanded] = React.useState(false);
  return (
    <div
      className={`ss-phase-card ${expanded ? 'expanded' : ''}`}
      style={{ animationDelay: `${idx * 80}ms` }}
    >
      <div className="ss-phase-step">{data.n}</div>
      <div className="ss-phase-line"></div>
      <div className="ss-phase-title">
        {data.title}
        {data.hasWarning && <span className="ss-phase-warning" title="Provokatif yol">⚠️</span>}
      </div>
      <div className="ss-phase-tagline">{data.tagline}</div>
      <div className="ss-phase-desc">{data.description}</div>
      <button
        className="ss-phase-toggle"
        onClick={() => setExpanded(e => !e)}
      >
        <span className={`ss-phase-toggle-caret ${expanded ? 'open' : ''}`}>▾</span>
        <span>{expanded ? 'kapat' : 'örnek'}</span>
      </button>
      <div className={`ss-phase-example ${expanded ? 'open' : ''}`}>
        <div className="ss-phase-example-inner">
          <div className="ss-phase-example-label">Örnek</div>
          <div className="ss-phase-example-text">{data.example}</div>
        </div>
      </div>
    </div>
  );
};

const SolutionSessionItem = ({ conv, meta, onClick, idx }) => {
  const badge = PHASE_BADGE[meta.phase];
  return (
    <button
      className={`ss-history-item ${badge.cls}`}
      onClick={onClick}
      style={{ animationDelay: `${idx * 60}ms` }}
    >
      <div className="ss-history-icon">🏗️</div>
      <div className="ss-history-body">
        <div className="ss-history-title">{conv.title.replace(/^Çözüm:\s*/, '')}</div>
        <div className="ss-history-meta">
          {formatRelativeTime(conv.updated_minutes_ago)} · MP+CSO · {meta.label}
        </div>
      </div>
      <div className={`ss-phase-badge ${badge.cls}`}>
        <span className="ss-phase-badge-dot">{badge.dot}</span>
        <span>{badge.label}</span>
      </div>
    </button>
  );
};

const SolutionSessionsScreen = ({ conversations, onPickSession, onStartNew }) => {
  const [ctaLoading, setCtaLoading] = React.useState(false);

  const sessions = React.useMemo(() => (
    (conversations || []).filter(c => c.chat_type === 'solution_session')
  ), [conversations]);

  const handleStartNew = async () => {
    if (ctaLoading) return;
    setCtaLoading(true);
    try {
      // Backend integration — gerçek conversation yarat
      if (window.KW && KW.startSolutionSession) {
        const session = await KW.startSolutionSession();
        if (session && session.id) {
          onStartNew?.(session.id);
        } else {
          // Fallback: mock id (offline / demo mode)
          onStartNew?.('ss-' + Date.now());
        }
      } else {
        // Offline / demo
        onStartNew?.('ss-' + Date.now());
      }
    } catch (err) {
      console.error('startSolutionSession failed:', err);
      alert('Çözüm sohbeti açılamadı: ' + err.message);
    } finally {
      setCtaLoading(false);
    }
  };

  return (
    <div className="ss-screen fade-in">
      {/* Hero */}
      <section className="ss-hero">
        <div className="ss-hero-aurora"></div>
        <div className="ss-hero-emoji">🏗️</div>
        <h1 className="ss-hero-title">Çözüm Sohbetleri</h1>
        <p className="ss-hero-subtitle">
          Zor görünen pazar senaryoları için yapılandırılmış çözüm üretici.
          Yönetim ekibi (MP + CSO) <strong>dört aşamalı bir analiz süreci</strong> işletir;
          sektör tecrübenize saygılı, varsayımlarınızı sınayan, alternatif yol haritaları sunan bir çalışma protokolüdür.
        </p>
        <button
          className={`ss-hero-cta ${ctaLoading ? 'loading' : ''}`}
          onClick={handleStartNew}
          disabled={ctaLoading}
        >
          {ctaLoading ? (
            <>
              <span className="ss-cta-pulse"></span>
              <span>Açılıyor…</span>
            </>
          ) : (
            <>
              <span className="ss-cta-plus">+</span>
              <span>Yeni Çözüm Oturumu</span>
            </>
          )}
        </button>
      </section>

      {/* 4-Faz görsel akış */}
      <section className="ss-phases">
        <div className="ss-section-header">
          <span className="ss-section-rule"></span>
          <span className="ss-section-title">Dört Aşamalı Süreç</span>
          <span className="ss-section-rule"></span>
        </div>
        <div className="ss-phase-grid">
          {PHASE_CARDS.map((p, i) => (
            <PhaseCard key={p.n} data={p} idx={i} />
          ))}
        </div>
      </section>

      {/* Geçmiş */}
      <section className="ss-history">
        <div className="ss-history-header">
          <h3 className="ss-history-heading">
            Geçmiş Oturumlar <span className="ss-history-count">({sessions.length})</span>
          </h3>
          {sessions.length > 0 && (
            <button className="ss-history-all">Tümünü Görüntüle →</button>
          )}
        </div>

        {sessions.length === 0 ? (
          <div className="ss-history-empty">
            <div className="ss-empty-glyph">🏗️</div>
            <div className="ss-empty-title">Henüz çözüm oturumu açılmadı.</div>
            <div className="ss-empty-tip">
              Bir senaryo tanımlayarak başlayın. Örneğin:
              <em>"Çeşme'de 50 villalık bir portföy teklifi geldi; mevcut talep koşullarında değerlendirilmesini istiyorum."</em>
            </div>
            <button className="ss-hero-cta small" onClick={handleStartNew}>
              <span className="ss-cta-plus">+</span>
              <span>Yeni Çözüm Oturumu</span>
            </button>
          </div>
        ) : (
          <div className="ss-history-list">
            {sessions.map((c, i) => {
              const meta = SOLUTION_PHASE_META[c.id] || {
                phase: 1, status: 'devam', label: 'Discovery açık'
              };
              return (
                <SolutionSessionItem
                  key={c.id}
                  conv={c}
                  meta={meta}
                  idx={i}
                  onClick={() => onPickSession?.(c.id)}
                />
              );
            })}
          </div>
        )}
      </section>
    </div>
  );
};

window.SolutionSessionsScreen = SolutionSessionsScreen;