// agilEspresso — Agile Olgunluk Anketi bileşeni
// 3 faz: intro → anket (boyut boyut) → sonuç (skorlama + AI analizi)

const { useState: useStateM, useMemo: useMemoM, useEffect: useEffectM } = React;

function MaturitySection() {
  const [phase, setPhase] = useStateM('intro'); // intro | survey | result
  const [dimIdx, setDimIdx] = useStateM(0);
  const [answers, setAnswers] = useStateM({}); // { "dim.qIdx": 1..5 }
  const [teamName, setTeamName] = useStateM('');
  const [aiSummary, setAiSummary] = useStateM(null);
  const [aiLoading, setAiLoading] = useStateM(false);

  const totalQ = MATURITY_DIMENSIONS.reduce((a, d) => a + d.questions.length, 0);
  const answeredCount = Object.keys(answers).length;
  const currentDim = MATURITY_DIMENSIONS[dimIdx];

  const setAnswer = (dimId, qIdx, val) => {
    setAnswers(prev => ({ ...prev, [`${dimId}.${qIdx}`]: val }));
  };

  const dimScore = (dim) => {
    const vals = dim.questions.map((_, i) => answers[`${dim.id}.${i}`] || 0);
    const sum = vals.reduce((a, b) => a + b, 0);
    const max = dim.questions.length * 5;
    return { pct: Math.round((sum / max) * 100), sum, max };
  };

  const bandFor = (pct) => pct >= 70 ? 'high' : pct >= 45 ? 'mid' : 'low';

  const allAnsweredInDim = (dim) => dim.questions.every((_, i) => answers[`${dim.id}.${i}`]);

  const goNext = () => {
    if (dimIdx < MATURITY_DIMENSIONS.length - 1) {
      setDimIdx(dimIdx + 1);
      document.getElementById('maturity')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    } else {
      finish();
    }
  };

  const finish = async () => {
    setPhase('result');
    setAiLoading(true);
    const scores = MATURITY_DIMENSIONS.map(d => ({ name: d.name, ...dimScore(d), band: bandFor(dimScore(d).pct) }));
    const avg = Math.round(scores.reduce((a, s) => a + s.pct, 0) / scores.length);
    try {
      const prompt = `Sen bir Agile koçusun. Bir takım için olgunluk anket sonuçlarını aldım. Takım: "${teamName || 'Takım'}", Genel skor: %${avg}.\nBoyut skorları:\n${scores.map(s => `- ${s.name}: %${s.pct} (${s.band === 'high' ? 'güçlü' : s.band === 'mid' ? 'orta' : 'zayıf'})`).join('\n')}\n\nBu takım için 2-3 cümlelik, doğrudan, motive edici bir GENEL DURUM değerlendirmesi yaz. Türkçe, samimi ama profesyonel ton. Kahve/espresso metaforu kullanabilirsin ama abartma. Sadece düz metin, madde işareti kullanma. 40-60 kelime.`;
      const res = await window.claude.complete(prompt);
      setAiSummary(res.trim());
    } catch (e) {
      setAiSummary('Takımın için özelleştirilmiş bir özet oluşturamadık — ama aşağıdaki boyut bazlı önerilerde tam olarak nereden başlayacağını bulacaksın.');
    } finally {
      setAiLoading(false);
    }
  };

  const reset = () => {
    setPhase('intro');
    setDimIdx(0);
    setAnswers({});
    setTeamName('');
    setAiSummary(null);
  };

  return (
    <section className="ae-section" id="maturity">
      <div className="ae-section-head">
        <div>
          <span className="ae-eyebrow">// olgunluk ölçümü</span>
          <h2 className="ae-section-title">Takımının<br/><em>agile olgunluğunu</em> ölç.</h2>
        </div>
        <p className="ae-section-desc">
          5 boyut, 15 soru, yaklaşık 3 dakika. Sonunda koruman, geliştirmen ve acilen ele alman
          gereken alanları özel tavsiyelerle gösteriyoruz.
        </p>
      </div>

      <div className="ae-mat-card">
        {phase === 'intro' && (
          <div className="ae-mat-intro">
            <div className="ae-mat-meter" aria-hidden="true">
              {[...Array(5)].map((_, i) => (
                <div key={i} className="ae-mat-meter-bar" style={{ animationDelay: `${i * 80}ms` }} />
              ))}
            </div>
            <h3 className="ae-mat-intro-title">
              Nerede güçlüsün,<br/>nerede bir shot daha gerek?
            </h3>
            <p className="ae-mat-intro-desc">
              Şeffaflıktan teslimata, WIP disiplininden AI kullanımına — takımının refleksleri
              her boyutta nasıl ayakta? Bir kahve molası kadar sürer.
            </p>
            <div className="ae-mat-form">
              <label className="ae-mono">takım / proje adı (opsiyonel)</label>
              <input
                type="text"
                placeholder="ör. Ödeme Platformu Squad'ı"
                value={teamName}
                onChange={(e) => setTeamName(e.target.value)}
              />
            </div>
            <div className="ae-mat-dims-preview">
              {MATURITY_DIMENSIONS.map((d) => (
                <div key={d.id} className="ae-mat-dim-preview" style={{ '--dim-hue': d.hue }}>
                  <div className="ae-mat-dim-orb" />
                  <div>
                    <div className="ae-mat-dim-name">{d.name}</div>
                    <div className="ae-mat-dim-desc">{d.desc}</div>
                  </div>
                </div>
              ))}
            </div>
            <button className="ae-btn-primary ae-mat-start" onClick={() => setPhase('survey')}>
              Ankete başla →
            </button>
          </div>
        )}

        {phase === 'survey' && currentDim && (
          <div className="ae-mat-survey">
            <div className="ae-mat-progress">
              <div className="ae-mat-progress-info ae-mono">
                <span>boyut {dimIdx + 1} / {MATURITY_DIMENSIONS.length}</span>
                <span>{answeredCount}/{totalQ} yanıtlandı</span>
              </div>
              <div className="ae-mat-progress-track">
                <div
                  className="ae-mat-progress-fill"
                  style={{ width: `${(answeredCount / totalQ) * 100}%` }}
                />
              </div>
            </div>

            <div className="ae-mat-dim-head" style={{ '--dim-hue': currentDim.hue }}>
              <div className="ae-mat-dim-orb ae-mat-dim-orb-lg" />
              <div>
                <div className="ae-mono ae-mat-dim-tag">boyut {String(dimIdx + 1).padStart(2, '0')}</div>
                <h3 className="ae-mat-dim-title">{currentDim.name}</h3>
                <p className="ae-mat-dim-subdesc">{currentDim.desc}</p>
              </div>
            </div>

            <div className="ae-mat-q-list">
              {currentDim.questions.map((item, qi) => {
                const key = `${currentDim.id}.${qi}`;
                const val = answers[key];
                return (
                  <div key={qi} className="ae-mat-q">
                    <div className="ae-mat-q-text">
                      <span className="ae-mono ae-mat-q-num">Q{qi + 1}</span>
                      <span>{item.q}</span>
                    </div>
                    <div className="ae-mat-scale">
                      <span className="ae-mono ae-mat-scale-label">katılmıyorum</span>
                      <div className="ae-mat-scale-btns">
                        {[1, 2, 3, 4, 5].map(n => (
                          <button
                            key={n}
                            className={`ae-mat-scale-btn ${val === n ? 'active' : ''}`}
                            onClick={() => setAnswer(currentDim.id, qi, n)}
                            aria-label={`${n} puan`}
                          >
                            {n}
                          </button>
                        ))}
                      </div>
                      <span className="ae-mono ae-mat-scale-label">katılıyorum</span>
                    </div>
                  </div>
                );
              })}
            </div>

            <div className="ae-mat-nav">
              <button
                className="ae-btn-ghost"
                onClick={() => dimIdx > 0 ? setDimIdx(dimIdx - 1) : setPhase('intro')}
              >
                ← Geri
              </button>
              <button
                className="ae-btn-primary"
                disabled={!allAnsweredInDim(currentDim)}
                onClick={goNext}
              >
                {dimIdx === MATURITY_DIMENSIONS.length - 1 ? 'Sonuçları gör →' : 'Sonraki boyut →'}
              </button>
            </div>
          </div>
        )}

        {phase === 'result' && (
          <MaturityResult
            teamName={teamName}
            aiSummary={aiSummary}
            aiLoading={aiLoading}
            dimScore={dimScore}
            bandFor={bandFor}
            onReset={reset}
          />
        )}
      </div>
    </section>
  );
}

function MaturityResult({ teamName, aiSummary, aiLoading, dimScore, bandFor, onReset }) {
  const scored = MATURITY_DIMENSIONS.map(d => {
    const s = dimScore(d);
    return { ...d, ...s, band: bandFor(s.pct) };
  });
  const avg = Math.round(scored.reduce((a, s) => a + s.pct, 0) / scored.length);
  const groups = {
    high: scored.filter(s => s.band === 'high'),
    mid: scored.filter(s => s.band === 'mid'),
    low: scored.filter(s => s.band === 'low'),
  };

  const overallBand = avg >= 70 ? 'Demlenmiş' : avg >= 45 ? 'Isınmakta' : 'Çekirdek Aşaması';
  const overallDesc = avg >= 70
    ? 'Ritim tutmuş. Şimdi optimize et ve başka takımlara aktar.'
    : avg >= 45
      ? 'Temel kurulmuş, kas henüz yeterince güçlü değil.'
      : 'Erken aşama — doğru yerden başlarsan atılımı kısa sürede görürsün.';

  return (
    <div className="ae-mat-result">
      <div className="ae-mat-result-head">
        <div>
          <span className="ae-mono ae-eyebrow">// sonuç</span>
          <h3 className="ae-mat-result-title">
            {teamName || 'Takımın'}: <em>{overallBand}</em>
          </h3>
          <p className="ae-mat-result-sub">{overallDesc}</p>
        </div>
        <div className="ae-mat-score-ring">
          <svg viewBox="0 0 140 140">
            <circle cx="70" cy="70" r="60" fill="none" stroke="var(--ae-border-2)" strokeWidth="4" />
            <circle
              cx="70" cy="70" r="60"
              fill="none"
              stroke="url(#mat-grad)"
              strokeWidth="6"
              strokeLinecap="round"
              strokeDasharray={`${(avg / 100) * 377} 377`}
              transform="rotate(-90 70 70)"
            />
            <defs>
              <linearGradient id="mat-grad" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="oklch(0.75 0.2 55)" />
                <stop offset="100%" stopColor="oklch(0.6 0.22 25)" />
              </linearGradient>
            </defs>
          </svg>
          <div className="ae-mat-score-num">%{avg}</div>
          <div className="ae-mat-score-label ae-mono">genel skor</div>
        </div>
      </div>

      <div className={`ae-mat-ai ${aiLoading ? 'is-loading' : ''}`}>
        <div className="ae-mat-ai-label ae-mono">
          <span className="ae-pulse" />
          agilEspresso AI özeti
        </div>
        {aiLoading ? (
          <div className="ae-mat-ai-skel">
            <span /><span /><span />
          </div>
        ) : (
          <p className="ae-mat-ai-text">{aiSummary}</p>
        )}
      </div>

      <div className="ae-mat-bars">
        {scored.map(s => (
          <div key={s.id} className="ae-mat-bar-row" style={{ '--dim-hue': s.hue }}>
            <div className="ae-mat-bar-name">{s.name}</div>
            <div className="ae-mat-bar-track">
              <div className="ae-mat-bar-fill" style={{ width: `${s.pct}%` }} />
              <div className="ae-mat-bar-mark" style={{ left: '45%' }} />
              <div className="ae-mat-bar-mark" style={{ left: '70%' }} />
            </div>
            <div className={`ae-mat-bar-pct ae-mono band-${s.band}`}>%{s.pct}</div>
          </div>
        ))}
        <div className="ae-mat-bar-legend ae-mono">
          <span>0</span>
          <span className="ae-mat-leg-mid">45% orta</span>
          <span className="ae-mat-leg-high">70% güçlü</span>
          <span>100</span>
        </div>
      </div>

      <MaturityGroup
        kind="high"
        title="İyisin, koru"
        sub="Bu boyutlarda güçlüsün. Kaybetmemek için bunları sistematik hale getir."
        dims={groups.high}
      />
      <MaturityGroup
        kind="mid"
        title="Gelişime açık"
        sub="Temel var, rafine etme zamanı. Küçük, düzenli müdahaleler uzun vadede büyük kazanç."
        dims={groups.mid}
      />
      <MaturityGroup
        kind="low"
        title="Acilen ele al"
        sub="Bu boyutlar takımının hızını en çok yavaşlatan noktalar. Buradan başlarsan farkı hemen görürsün."
        dims={groups.low}
      />

      <div className="ae-mat-result-foot">
        <button className="ae-btn-ghost" onClick={onReset}>↺ Baştan al</button>
        <a href="#subscribe" className="ae-btn-primary">Haftalık shot\'lara abone ol →</a>
      </div>
    </div>
  );
}

function MaturityGroup({ kind, title, sub, dims }) {
  if (!dims || dims.length === 0) return null;
  const iconMap = {
    high: (<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M4 9l3.5 3.5L14 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>),
    mid: (<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 3v6m0 3.5v.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>),
    low: (<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2l7 13H2L9 2z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M9 7v4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>),
  };

  return (
    <div className={`ae-mat-group ae-mat-group-${kind}`}>
      <div className="ae-mat-group-head">
        <div className="ae-mat-group-icon">{iconMap[kind]}</div>
        <div>
          <h4 className="ae-mat-group-title">{title}</h4>
          <p className="ae-mat-group-sub">{sub}</p>
        </div>
        <span className="ae-mono ae-mat-group-count">{dims.length} boyut</span>
      </div>
      <div className="ae-mat-tips-grid">
        {dims.map(d => (
          <div key={d.id} className="ae-mat-tip-card" style={{ '--dim-hue': d.hue }}>
            <div className="ae-mat-tip-head">
              <div className="ae-mat-dim-orb" />
              <div className="ae-mat-tip-name">{d.name}</div>
              <div className="ae-mono ae-mat-tip-pct">%{d.pct}</div>
            </div>
            <ul className="ae-mat-tip-list">
              {MATURITY_TIPS[d.id][kind].map((t, i) => (
                <li key={i}>
                  <span className="ae-mat-tip-bullet ae-mono">0{i + 1}</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { MaturitySection });