// advanced-settings.jsx — Pro-flavoured Settings dialog for the advanced shell.
// Reuses useOpenRouter state + OR_*_MODELS catalogues from easy-settings.jsx,
// but renders in the ai-* design language (compact, tabular, denser).

const { useState: asUseState } = React;

function AdvancedSettingsPanel({ open, or, onClose, onOpenAuth }) {
  const [tab, setTab] = asUseState('account'); // account | models | advanced
  const [testState, setTestState] = asUseState(null);

  if (!open) return null;

  const runTest = () => {
    setTestState('busy');
    setTimeout(() => setTestState(Math.random() > 0.15 ? 'ok' : 'fail'), 900);
  };

  const mask = (k) => !k ? '—' : (k.length < 10 ? '••••' : k.slice(0, 8) + '…' + k.slice(-4));

  const TABS = [
    { id: 'account',  label: 'Hesap',     hint: '⌘1' },
    { id: 'models',   label: 'Modeller',  hint: '⌘2' },
    { id: 'advanced', label: 'Gelişmiş',  hint: '⌘3' },
  ];

  return (
    <div className="ai-settings-overlay" onClick={onClose}>
      <div
        className="ai-settings"
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-label="Ayarlar"
      >
        {/* sidebar */}
        <aside className="ai-settings-side">
          <div className="ai-settings-side-head">
            <span className="ai-settings-eyebrow">Tercihler</span>
            <h2>Ayarlar</h2>
          </div>
          <nav className="ai-settings-nav">
            {TABS.map((t) => (
              <button
                key={t.id}
                className={`ai-settings-navitem ${tab === t.id ? 'is-active' : ''}`}
                onClick={() => setTab(t.id)}
              >
                <span>{t.label}</span>
                <kbd>{t.hint}</kbd>
              </button>
            ))}
          </nav>
          <div className="ai-settings-side-foot">
            <div className="ai-settings-status">
              <span className={`ai-rail-statusdot ${or.isAuthed ? 'is-ok' : 'is-warn'}`} style={{ position: 'static', border: 0, width: 8, height: 8 }} />
              <span>{or.isAuthed ? 'OpenRouter bağlı' : 'Bağlantı yok'}</span>
            </div>
            <div className="ai-settings-version">v1.0 · build 2026.05</div>
          </div>
        </aside>

        {/* content */}
        <main className="ai-settings-main">
          <header className="ai-settings-head">
            <h3>
              {tab === 'account'  && 'Hesap ve kimlik doğrulama'}
              {tab === 'models'   && 'Model kataloğu'}
              {tab === 'advanced' && 'Gelişmiş'}
            </h3>
            <button className="ai-iconbtn" onClick={onClose} aria-label="Kapat">
              <IconClose size={18} />
            </button>
          </header>

          <div className="ai-settings-body">
            {tab === 'account' && (
              <AccountTab or={or} open={open} onOpenAuth={onOpenAuth} testState={testState} runTest={runTest} mask={mask} />
            )}
            {tab === 'models'   && <ModelsTab or={or} />}
            {tab === 'advanced' && <AdvancedTab />}
          </div>
        </main>
      </div>
    </div>
  );
}

// ─── Account ───────────────────────────────────────────────────────────────
function AccountTab({ or, onOpenAuth, testState, runTest, mask, open }) {
  const credits = useCredits(or.auth.apiKey || '', open);
  const ledger = useLedger();
  const fmt = (v) => {
    const n = Number(v);
    if (!Number.isFinite(n)) return '—';
    if (Math.abs(n) >= 100) return '$' + n.toFixed(2);
    if (Math.abs(n) >= 1)   return '$' + n.toFixed(3);
    return '$' + n.toFixed(4);
  };
  return (
    <div className="ai-settings-stack">
      <section className="ai-settings-section">
        <div className="ai-settings-section-head">
          <h4>Bağlantı durumu</h4>
          <p>Resim modelleri OpenRouter üzerinden çağrılır. Anahtar bu cihazda tutulur, sunucumuza gönderilmez.</p>
        </div>
        <div className={`ai-settings-statusrow ${or.isAuthed ? 'is-ok' : 'is-warn'}`}>
          <div className="ai-settings-statuscol">
            <div className="ai-settings-kv">
              <span className="ai-kv-k">Durum</span>
              <span className="ai-kv-v">
                <span className={`ai-pill ${or.isAuthed ? 'is-ok' : 'is-warn'}`}>
                  <span className="ai-pill-dot" />
                  {or.isAuthed ? 'Bağlı' : 'Bağlı değil'}
                </span>
              </span>
            </div>
            <div className="ai-settings-kv">
              <span className="ai-kv-k">Yöntem</span>
              <span className="ai-kv-v">
                {or.isAuthed
                  ? (or.auth.method === 'sso' ? 'OAuth · SSO' : 'API key')
                  : '—'}
              </span>
            </div>
            <div className="ai-settings-kv">
              <span className="ai-kv-k">Kimlik</span>
              <span className="ai-kv-v" style={{ fontFamily: 'ui-monospace, SF Mono, Menlo, monospace' }}>
                {or.isAuthed
                  ? (or.auth.method === 'sso' ? (or.auth.email || 'sen@openrouter.ai') : mask(or.auth.apiKey))
                  : '—'}
              </span>
            </div>
            <div className="ai-settings-kv">
              <span className="ai-kv-k">Endpoint</span>
              <span className="ai-kv-v" style={{ fontFamily: 'ui-monospace, SF Mono, Menlo, monospace' }}>
                https://openrouter.ai/api/v1
              </span>
            </div>
          </div>
          <div className="ai-settings-statusactions">
            {or.isAuthed ? (
              <>
                <button className="ai-btn ai-btn-sm" onClick={runTest} disabled={testState === 'busy'}>
                  {testState === 'busy' ? 'Test ediliyor…' : 'Bağlantıyı test et'}
                </button>
                <button className="ai-btn ai-btn-sm ai-btn-ghost" onClick={or.signOut}>
                  Çıkış yap
                </button>
              </>
            ) : (
              <button className="ai-btn ai-btn-primary ai-btn-sm" onClick={onOpenAuth}>
                OpenRouter'a bağlan
              </button>
            )}
            {testState === 'ok' && (
              <span className="ai-pill is-ok"><span className="ai-pill-dot" /> 142 ms · OK</span>
            )}
            {testState === 'fail' && (
              <span className="ai-pill is-err"><span className="ai-pill-dot" /> Bağlantı reddedildi</span>
            )}
          </div>
        </div>
      </section>

      <section className="ai-settings-section">
        <div className="ai-settings-section-head">
          <h4>Kullanım</h4>
          <p>
            <b>Kalan kredi</b> ve <b>lifetime harcama</b> OpenRouter'dan canlı çekilir;
            <b> bugünkü</b> ve <b>bu ayki</b> sayılar bu cihazdaki yerel kayıttan
            (sadece tarayıcı belleğinde).
          </p>
        </div>
        <div className="ai-settings-usage">
          <div className="ai-usage-cell">
            <span className="ai-usage-num">
              {credits.loading ? '…'
                : credits.error ? '—'
                : credits.remaining != null ? fmt(credits.remaining) : '—'}
            </span>
            <span className="ai-usage-lbl">kalan kredi</span>
          </div>
          <div className="ai-usage-cell">
            <span className="ai-usage-num">{fmt(ledger.stats.todayCost)}</span>
            <span className="ai-usage-lbl">bugün harcanan</span>
          </div>
          <div className="ai-usage-cell">
            <span className="ai-usage-num">{ledger.stats.monthCalls}</span>
            <span className="ai-usage-lbl">bu ay istek</span>
          </div>
          <div className="ai-usage-cell">
            <span className="ai-usage-num">{fmt(ledger.stats.monthCost)}</span>
            <span className="ai-usage-lbl">bu ay harcama</span>
          </div>
          <div className="ai-usage-cell">
            <span className="ai-usage-num">{ledger.stats.monthImages}</span>
            <span className="ai-usage-lbl">bu ay görsel</span>
          </div>
          <div className="ai-usage-cell">
            <span className="ai-usage-num">
              {credits.used != null ? fmt(credits.used) : '—'}
            </span>
            <span className="ai-usage-lbl">lifetime kullanım</span>
          </div>
        </div>
        {credits.error && (
          <div className="ai-settings-row" style={{ color: '#ff6b35', fontSize: 12, marginTop: 6 }}>
            Kredi bilgisi çekilemedi: {credits.error}
          </div>
        )}
      </section>
    </div>
  );
}

// ─── Models ────────────────────────────────────────────────────────────────
function ModelsTab({ or }) {
  const models = or.models || { textModels: [], imageModels: [], loading: false, error: null };
  const [textQ, setTextQ] = asUseState('');
  const [imgQ, setImgQ] = asUseState('');
  const filterModels = (arr, q) => {
    const s = q.trim().toLowerCase();
    if (!s) return arr;
    return arr.filter((m) =>
      m.id.toLowerCase().includes(s) ||
      m.name.toLowerCase().includes(s) ||
      (m.vendor || '').toLowerCase().includes(s)
    );
  };
  const textList = filterModels(models.textModels, textQ);
  const imgList = filterModels(models.imageModels, imgQ);
  return (
    <div className="ai-settings-stack">
      <section className="ai-settings-section">
        <div className="ai-settings-section-head">
          <h4>Metin · prompt asistanı</h4>
          <p>
            Prompt geliştirme, çeviri, fikir üretimi için tek bir metin modeli seç.
            {models.loading ? ' Yükleniyor…'
              : models.error ? ` Hata: ${models.error}`
              : ` ${models.textModels.length} model.`}
          </p>
        </div>
        <div className="ez-model-search" style={{ marginBottom: 6 }}>
          <input type="text" placeholder="ID veya isimde ara — örn: claude, sonnet, free…"
                 value={textQ} onChange={(e) => setTextQ(e.target.value)} />
          {textQ && <button className="ez-model-search-x" onClick={() => setTextQ('')}>×</button>}
        </div>
        <div className="ai-modeltable" style={{ maxHeight: 340, overflowY: 'auto' }}>
          <div className="ai-modeltable-head">
            <span>Model</span>
            <span>Sağlayıcı</span>
            <span>Hız</span>
            <span>Maliyet</span>
            <span></span>
          </div>
          {models.loading && <div className="ez-model-empty" style={{ margin: 8 }}>Modeller yükleniyor…</div>}
          {!models.loading && !textList.length && (
            <div className="ez-model-empty" style={{ margin: 8 }}>Aramana uygun model yok.</div>
          )}
          {textList.map((m) => {
            const active = or.textModel === m.id;
            return (
              <button
                key={m.id}
                className={`ai-modelrow ${active ? 'is-active' : ''}`}
                onClick={() => or.update({ textModel: m.id })}
              >
                <span className="ai-modelrow-main">
                  <span className={`ai-radio ${active ? 'is-on' : ''}`}><span /></span>
                  <span className="ai-modelrow-meta">
                    <span className="ai-modelrow-name">
                      {m.name}
                      {m.tag && <span className="ai-tag">{m.tag}</span>}
                    </span>
                    <span className="ai-modelrow-id">{m.id}</span>
                  </span>
                </span>
                <span className="ai-modelrow-cell">{m.vendor}</span>
                <span className="ai-modelrow-cell">{m.speed}</span>
                <span className="ai-modelrow-cell">{m.cost}</span>
                <span className="ai-modelrow-cell ai-modelrow-note">{m.note}</span>
              </button>
            );
          })}
        </div>
      </section>

      <section className="ai-settings-section">
        <div className="ai-settings-section-head">
          <h4>Resim · katalog</h4>
          <p>
            Aktif modeller prompt kutusundaki seçicide görünür. Yıldız = varsayılan.
            {models.loading ? ' Yükleniyor…'
              : models.error ? ` Hata: ${models.error}`
              : ` ${models.imageModels.length} görsel modeli.`}
          </p>
        </div>
        <div className="ez-model-search" style={{ marginBottom: 6 }}>
          <input type="text" placeholder="ID veya isimde ara — örn: gemini, flux, image…"
                 value={imgQ} onChange={(e) => setImgQ(e.target.value)} />
          {imgQ && <button className="ez-model-search-x" onClick={() => setImgQ('')}>×</button>}
        </div>
        <div className="ai-modeltable">
          <div className="ai-modeltable-head ai-modeltable-head-img">
            <span></span>
            <span>Model</span>
            <span>Sağlayıcı</span>
            <span>Hız</span>
            <span>Maliyet</span>
            <span></span>
          </div>
          {models.loading && <div className="ez-model-empty" style={{ margin: 8 }}>Modeller yükleniyor…</div>}
          {!models.loading && !imgList.length && (
            <div className="ez-model-empty" style={{ margin: 8 }}>Aramana uygun model yok.</div>
          )}
          {imgList.map((m) => {
            const on = (or.imageModels || []).includes(m.id);
            const primary = or.primaryImageModel === m.id;
            const toggle = () => {
              const next = on
                ? or.imageModels.filter((x) => x !== m.id)
                : [...(or.imageModels || []), m.id];
              const patch = { imageModels: next };
              if (!on && !or.primaryImageModel) patch.primaryImageModel = m.id;
              if (on && primary) patch.primaryImageModel = next[0] || null;
              or.update(patch);
            };
            const star = () => or.update({
              primaryImageModel: m.id,
              imageModels: on ? or.imageModels : [...(or.imageModels || []), m.id],
            });
            return (
              <div key={m.id} className={`ai-modelrow is-img ${on ? 'is-active' : ''}`}>
                <button className="ai-modelrow-check" onClick={toggle} aria-label="Seç">
                  <span className={`ai-checkbox ${on ? 'is-on' : ''}`}>
                    {on && (
                      <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M5 12l5 5L20 7" />
                      </svg>
                    )}
                  </span>
                </button>
                <span className="ai-modelrow-main" onClick={toggle} role="button">
                  <span className="ai-modelrow-meta">
                    <span className="ai-modelrow-name">
                      {m.name}
                      {m.tag && <span className="ai-tag">{m.tag}</span>}
                    </span>
                    <span className="ai-modelrow-id">{m.id}</span>
                  </span>
                </span>
                <span className="ai-modelrow-cell">{m.vendor}</span>
                <span className="ai-modelrow-cell">{m.speed}</span>
                <span className="ai-modelrow-cell">{m.cost}</span>
                <button
                  className={`ai-star ${primary ? 'is-on' : ''}`}
                  onClick={star}
                  aria-label={primary ? 'Varsayılan' : 'Varsayılan yap'}
                  title={primary ? 'Varsayılan model' : 'Varsayılan yap'}
                >
                  <svg viewBox="0 0 24 24" width="16" height="16" fill={primary ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round">
                    <path d="M12 2.8l2.7 5.6 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.5 2.9 1.1-6.2L3 9.3l6.2-.9L12 2.8z" />
                  </svg>
                </button>
              </div>
            );
          })}
        </div>
        {or.imageModels.length === 0 && (
          <div className="ai-settings-warn">
            En az bir resim modeli seç — yoksa resim oluşturulamaz.
          </div>
        )}
      </section>
    </div>
  );
}

// ─── Advanced ──────────────────────────────────────────────────────────────
function AdvancedTab() {
  return (
    <div className="ai-settings-stack">
      <section className="ai-settings-section">
        <div className="ai-settings-section-head">
          <h4>İstek davranışı</h4>
          <p>Provider failover, retry ve önbellek davranışını burada yönet.</p>
        </div>
        <div className="ai-settings-rows">
          <div className="ai-settings-row">
            <div>
              <div className="ai-settings-row-title">Provider failover</div>
              <div className="ai-settings-row-sub">Birincil sağlayıcı cevap vermezse ikinciye düş.</div>
            </div>
            <label className="ai-switch">
              <input type="checkbox" defaultChecked />
              <span className="ai-switch-track"><span className="ai-switch-thumb" /></span>
            </label>
          </div>
          <div className="ai-settings-row">
            <div>
              <div className="ai-settings-row-title">Retry · 429</div>
              <div className="ai-settings-row-sub">Rate-limit hatasında üstel geri çekilme ile 3'e kadar yeniden dene.</div>
            </div>
            <label className="ai-switch">
              <input type="checkbox" defaultChecked />
              <span className="ai-switch-track"><span className="ai-switch-thumb" /></span>
            </label>
          </div>
          <div className="ai-settings-row">
            <div>
              <div className="ai-settings-row-title">Önbellek</div>
              <div className="ai-settings-row-sub">Aynı prompt+seed için sonucu yerel olarak hatırla.</div>
            </div>
            <label className="ai-switch">
              <input type="checkbox" />
              <span className="ai-switch-track"><span className="ai-switch-thumb" /></span>
            </label>
          </div>
          <div className="ai-settings-row">
            <div>
              <div className="ai-settings-row-title">Telemetri</div>
              <div className="ai-settings-row-sub">Anonim hata raporları gönder (sadece istek/yanıt kodları).</div>
            </div>
            <label className="ai-switch">
              <input type="checkbox" />
              <span className="ai-switch-track"><span className="ai-switch-thumb" /></span>
            </label>
          </div>
        </div>
      </section>

      <section className="ai-settings-section">
        <div className="ai-settings-section-head">
          <h4>Veri</h4>
          <p>Yerel olarak saklanan oturum, prompt ve resim geçmişini yönet.</p>
        </div>
        <div className="ai-settings-rows">
          <div className="ai-settings-row">
            <div>
              <div className="ai-settings-row-title">Prompt geçmişi</div>
              <div className="ai-settings-row-sub">Son 30 prompt'u temizle.</div>
            </div>
            <button className="ai-btn ai-btn-sm" onClick={() => {
              try { localStorage.removeItem('ai-lab.prompts'); } catch {}
            }}>Temizle</button>
          </div>
          <div className="ai-settings-row">
            <div>
              <div className="ai-settings-row-title">Resim geçmişi</div>
              <div className="ai-settings-row-sub">Tüm yaratılan görsel galerini sıfırla.</div>
            </div>
            <button className="ai-btn ai-btn-sm" onClick={() => {
              if (confirm('Tüm geçmişi silmek istediğine emin misin?')) {
                try { localStorage.removeItem('ez.history'); } catch {}
                location.reload();
              }
            }}>Sil</button>
          </div>
          <div className="ai-settings-row">
            <div>
              <div className="ai-settings-row-title">Açılış modu</div>
              <div className="ai-settings-row-sub">Bir sonraki açılışta hangi modu yükle?</div>
            </div>
            <button className="ai-btn ai-btn-sm" onClick={() => {
              try { localStorage.removeItem('ez.mode'); } catch {}
              location.reload();
            }}>Bir daha sor</button>
          </div>
        </div>
      </section>

      <section className="ai-settings-section">
        <div className="ai-settings-section-head">
          <h4>Hakkında</h4>
        </div>
        <div className="ai-settings-about">
          <div>
            <b>AI Image Lab</b> · advanced shell · sürüm 1.0
            <br />
            <span style={{ color: 'var(--ai-muted)' }}>
              Tüm modeller OpenRouter üzerinden çağrılır. Anahtar yerel depolamada tutulur.
            </span>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AdvancedSettingsPanel });