// AI Auto Insight — proactive insight engine wired to backend
// POST /api/campaigns/:id/insights returns structured insights generated by
// the configured AI provider (or a deterministic stub derived from real data).
const { useState: useState_ai, useEffect: useEffect_ai } = React;

// Backend categories → UI types
const CATEGORY_TO_TYPE = {
  'Peluang': 'opportunity',
  'Risiko': 'risk',
  'Pola': 'pattern',
  'Berhasil': 'win',
};

const TYPE_META = {
  opportunity: { color: 'oklch(0.42 0.12 155)', bg: 'var(--success-soft)', label: 'Peluang', icon: '🎯' },
  risk:        { color: 'oklch(0.50 0.18 25)',  bg: 'var(--danger-soft)',  label: 'Risiko',  icon: '⚠️' },
  pattern:     { color: 'oklch(0.45 0.15 265)', bg: 'var(--primary-50)',   label: 'Pola',    icon: '📊' },
  win:         { color: 'oklch(0.45 0.14 75)',  bg: 'oklch(0.96 0.04 75)', label: 'Berhasil',icon: '🏆' },
};

function normalizeInsight(raw, idx) {
  const type = CATEGORY_TO_TYPE[raw.category] || 'pattern';
  const confidence = typeof raw.confidence === 'number'
    ? Math.round(Math.max(0, Math.min(1, raw.confidence)) * 100)
    : 70;
  const impactPp = typeof raw.impactPp === 'number' ? raw.impactPp : 0;
  const sign = impactPp >= 0 ? '+' : '';
  return {
    id: `${idx}`,
    type,
    priority: confidence >= 75 ? 'high' : confidence >= 55 ? 'medium' : 'low',
    title: raw.title || '(insight tanpa judul)',
    summary: raw.body || '',
    detail: raw.detail || raw.body || '',
    tags: Array.isArray(raw.tags) ? raw.tags : [],
    actions: Array.isArray(raw.actions) ? raw.actions : [],
    impact: {
      metric: `${sign}${impactPp.toFixed(1)} pp`,
      label: 'Estimasi dampak (percentage points)',
      confidence,
    },
    tone: raw.tone,
  };
}

function AIInsightView() {
  const [campaigns, setCampaigns] = useState_ai([]);
  const [campaignId, setCampaignId] = useState_ai(null);
  const [meta, setMeta] = useState_ai(null);
  const [insights, setInsights] = useState_ai([]);
  const [filter, setFilter] = useState_ai('all');
  const [selected, setSelected] = useState_ai(0);
  const [generating, setGenerating] = useState_ai(false);
  const [generatedAt, setGeneratedAt] = useState_ai(null);
  const [error, setError] = useState_ai(null);

  // Load user's campaigns once
  useEffect_ai(() => {
    window.api
      .listCampaigns()
      .then((r) => {
        const list = r.campaigns || [];
        setCampaigns(list);
        const active = list.find((c) => c.status === 'active') || list[0];
        if (active) setCampaignId(active.id);
      })
      .catch((err) => setError(err.message));
  }, []);

  const loadInsights = async (cid = campaignId) => {
    if (!cid) return;
    setGenerating(true);
    setError(null);
    try {
      const r = await window.api.insights(cid);
      setInsights((r.insights || []).map((x, i) => normalizeInsight(x, i)));
      setMeta(r.meta || null);
      setGeneratedAt(new Date());
      setSelected(0);
    } catch (err) {
      setError(err.message || 'Gagal generate insight');
    } finally {
      setGenerating(false);
    }
  };

  // Auto-load when campaign changes
  useEffect_ai(() => {
    if (campaignId) loadInsights(campaignId);
  }, [campaignId]);

  const filtered = filter === 'all' ? insights : insights.filter((i) => i.type === filter);
  const sel = filtered[selected] || filtered[0];
  const highCount = insights.filter((i) => i.priority === 'high').length;
  const selectedCampaign = campaigns.find((c) => c.id === campaignId);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
      <TopBar
        title="AI Auto Insight"
        subtitle={
          selectedCampaign
            ? `Analisis otomatis dari respons "${selectedCampaign.title}"`
            : 'Buat campaign untuk mulai dapat insight'
        }
        right={
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            {campaigns.length > 0 && (
              <select
                className="select"
                value={campaignId || ''}
                onChange={(e) => setCampaignId(e.target.value)}
                style={{ padding: '6px 10px', fontSize: 12.5, minWidth: 200 }}
              >
                {campaigns.map((c) => (
                  <option key={c.id} value={c.id}>{c.title}</option>
                ))}
              </select>
            )}
            <button className="btn btn-soft" onClick={() => loadInsights()} disabled={generating || !campaignId}>
              {generating
                ? <><span style={{ width: 12, height: 12, border: '2px solid var(--primary)', borderTopColor: 'transparent', borderRadius: '50%', display: 'inline-block', animation: 'spin 0.7s linear infinite' }} />Menganalisis…</>
                : <><I.Sparkle size={14} />Generate Ulang</>}
            </button>
          </div>
        }
      />

      {/* Provider banner */}
      {meta && (
        <div style={{
          padding: '6px 18px', background: meta.provider === 'stub' ? 'var(--bg-2)' : 'var(--primary-50)',
          borderBottom: '1px solid var(--line)',
          fontSize: 11.5, color: meta.provider === 'stub' ? 'var(--ink-3)' : 'var(--primary)',
          display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0,
        }}>
          <I.Sparkle size={11} />
          <span>
            {meta.provider === 'stub'
              ? `Mode stub — insight dihitung lokal dari data respons. ${meta.reason ? `(${meta.reason})` : ''}`
              : `Dianalisis dengan ${meta.provider}${meta.model ? ` / ${meta.model}` : ''}`}
          </span>
          {generatedAt && (
            <span style={{ marginLeft: 'auto', color: 'var(--ink-3)' }}>
              {generatedAt.toLocaleTimeString('id-ID')}
            </span>
          )}
        </div>
      )}

      {error && (
        <div style={{
          padding: 12, margin: 16, background: 'var(--danger-soft)',
          color: 'var(--danger)', borderRadius: 8, fontSize: 13,
        }}>
          {error}
        </div>
      )}

      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '380px 1fr', overflow: 'hidden' }}>
        {/* Left: Insight feed */}
        <div className="scroll" style={{ overflow: 'auto', borderRight: '1px solid var(--line)', background: 'var(--surface)' }}>
          <div style={{ padding: '20px 20px 16px', borderBottom: '1px solid var(--line)' }}>
            <div style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>
              Insight aktif
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
              <span className="mono" style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em' }}>{insights.length}</span>
              {highCount > 0 && (
                <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>· {highCount} prioritas tinggi</span>
              )}
            </div>
            <div style={{ display: 'flex', gap: 4, marginTop: 12, fontSize: 11.5, flexWrap: 'wrap' }}>
              {[
                { k: 'all', l: 'Semua' },
                { k: 'opportunity', l: 'Peluang' },
                { k: 'risk', l: 'Risiko' },
                { k: 'pattern', l: 'Pola' },
                { k: 'win', l: 'Berhasil' },
              ].map((f) => (
                <button key={f.k} onClick={() => { setFilter(f.k); setSelected(0); }} style={{
                  padding: '4px 9px', borderRadius: 6,
                  background: filter === f.k ? 'var(--primary)' : 'var(--bg-2)',
                  color: filter === f.k ? 'white' : 'var(--ink-2)',
                  border: 'none', fontSize: 11, fontWeight: 500, cursor: 'pointer',
                }}>{f.l}</button>
              ))}
            </div>
          </div>

          <div style={{ padding: 8 }}>
            {generating && insights.length === 0 && (
              <div style={{ padding: 24, textAlign: 'center', color: 'var(--ink-3)', fontSize: 13 }}>
                AI sedang menganalisis…
              </div>
            )}
            {!generating && filtered.length === 0 && insights.length > 0 && (
              <div style={{ padding: 24, textAlign: 'center', color: 'var(--ink-3)', fontSize: 13 }}>
                Tidak ada insight untuk filter "{filter}".
              </div>
            )}
            {!generating && insights.length === 0 && !error && campaignId && (
              <div style={{ padding: 24, textAlign: 'center', color: 'var(--ink-3)', fontSize: 13 }}>
                Belum ada insight. Klik <b>Generate Ulang</b>.
              </div>
            )}
            {filtered.map((ins, i) => {
              const t = TYPE_META[ins.type];
              const isSel = selected === i;
              return (
                <button key={ins.id} onClick={() => setSelected(i)} style={{
                  width: '100%', padding: '12px 12px', textAlign: 'left',
                  background: isSel ? 'var(--primary-50)' : 'transparent',
                  border: isSel ? '1px solid oklch(0.84 0.08 155)' : '1px solid transparent',
                  borderRadius: 10, cursor: 'pointer', marginBottom: 4,
                  display: 'flex', flexDirection: 'column', gap: 6,
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{
                      fontSize: 11, padding: '2px 7px', borderRadius: 5, fontWeight: 600,
                      background: t.bg, color: t.color,
                    }}>{t.icon} {t.label}</span>
                    {ins.priority === 'high' && (
                      <span style={{
                        fontSize: 10, padding: '2px 6px', borderRadius: 4,
                        background: 'oklch(0.96 0.06 25)', color: 'oklch(0.50 0.18 25)', fontWeight: 600,
                      }}>PRIORITAS</span>
                    )}
                    <span style={{ marginLeft: 'auto', fontSize: 10.5, color: 'var(--ink-3)' }}>
                      {ins.impact.metric}
                    </span>
                  </div>
                  <div style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.35, color: 'var(--ink)' }}>{ins.title}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.5 }}>{ins.summary}</div>
                </button>
              );
            })}
          </div>
        </div>

        {/* Right: Insight detail */}
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg)', padding: 24 }} key={sel?.id}>
          {!sel && (
            <div style={{ display: 'grid', placeItems: 'center', height: '100%', textAlign: 'center', color: 'var(--ink-3)' }}>
              <div>
                <div style={{ fontSize: 32, marginBottom: 8 }}>✨</div>
                <div style={{ fontSize: 14 }}>Pilih insight di kiri untuk melihat detail</div>
              </div>
            </div>
          )}
          {sel && (
            <div className="fade-in" style={{ maxWidth: 760 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14, flexWrap: 'wrap' }}>
                <span style={{
                  fontSize: 12, padding: '4px 10px', borderRadius: 6, fontWeight: 600,
                  background: TYPE_META[sel.type].bg, color: TYPE_META[sel.type].color,
                }}>{TYPE_META[sel.type].icon} {TYPE_META[sel.type].label}</span>
                {sel.tags.map((t) => <span key={t} className="badge" style={{ fontSize: 11 }}>{t}</span>)}
              </div>

              <h2 style={{ fontSize: 26, fontWeight: 700, lineHeight: 1.2, letterSpacing: '-0.015em', margin: '0 0 12px' }}>
                {sel.title}
              </h2>
              <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.55, margin: 0 }}>
                {sel.summary}
              </p>

              {/* Impact card */}
              <div className="card" style={{
                marginTop: 20, padding: 18,
                background: 'linear-gradient(135deg, var(--surface), var(--primary-50))',
                border: '1px solid oklch(0.84 0.08 155)',
              }}>
                <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 18, alignItems: 'center' }}>
                  <div>
                    <div style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>
                      Estimasi Dampak
                    </div>
                    <div className="mono" style={{ fontSize: 32, fontWeight: 700, color: 'var(--primary)', letterSpacing: '-0.02em', marginTop: 4 }}>
                      {sel.impact.metric}
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 2 }}>{sel.impact.label}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginBottom: 6 }}>Confidence AI</div>
                    <div style={{ height: 8, background: 'var(--bg-2)', borderRadius: 4, overflow: 'hidden' }}>
                      <div style={{
                        width: sel.impact.confidence + '%', height: '100%',
                        background: sel.impact.confidence > 75 ? 'oklch(0.62 0.16 155)' : sel.impact.confidence > 60 ? 'var(--primary)' : 'oklch(0.68 0.16 75)',
                        borderRadius: 4,
                      }}></div>
                    </div>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4 }}>{sel.impact.confidence}%</div>
                  </div>
                </div>
              </div>

              {sel.detail && sel.detail !== sel.summary && (
                <div style={{ marginTop: 22 }}>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 8 }}>
                    Analisis Lengkap
                  </div>
                  <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.65, margin: 0 }}>{sel.detail}</p>
                </div>
              )}

              {sel.actions.length > 0 && (
                <div style={{ marginTop: 22 }}>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 10 }}>
                    Rekomendasi Tindakan
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {sel.actions.map((a, i) => (
                      <div key={i} style={{
                        padding: 14, background: 'var(--surface)',
                        border: '1px solid var(--line)', borderRadius: 10,
                        display: 'flex', gap: 12, alignItems: 'flex-start',
                      }}>
                        <div style={{
                          width: 24, height: 24, borderRadius: 6, flexShrink: 0,
                          background: 'var(--primary-50)', color: 'var(--primary)',
                          display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700,
                          fontFamily: 'var(--font-mono)',
                        }}>{i + 1}</div>
                        <div style={{ flex: 1, fontSize: 14, color: 'var(--ink)', lineHeight: 1.5 }}>{a}</div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      </div>

      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

Object.assign(window, { AIInsightView });