import { useEffect, useState } from 'react'

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import { useI18n } from '@/i18n/context'
import { Link } from '@/lib/icons'

import type { CompressionSettings, CompressionState } from '../../../electron/compression-settings-types'

import { ListRow, SettingsSection } from './primitives'

export function CompressionSettingsView() {
  const api = window.hermesDesktop?.codexLink
  const { locale } = useI18n()
  const tr = locale === 'tr'
  const t = (a: string, b: string) => tr ? a : b
  const [state, setState] = useState<CompressionState | null>(null)
  const [draft, setDraft] = useState<CompressionSettings | null>(null)
  const [busy, setBusy] = useState(false)
  const [message, setMessage] = useState('')
  const [failed, setFailed] = useState(false)
  useEffect(() => {
    let active = true
    api?.getCompression?.().then(next => {
      if (active) { setState(next); setDraft(next.settings) }
    }, () => {
      if (active) { setFailed(true); setMessage(tr ? 'Sıkıştırma ayarları okunamadı.' : 'Could not load compression settings.') }
    })
    return () => { active = false }
  }, [api, tr])
  if (!api?.getCompression) return null
  const change = <K extends keyof CompressionSettings>(key: K, value: CompressionSettings[K]) => {
    if (draft) setDraft({ ...draft, [key]: value })
  }
  const numeric = (key: 'keepTurns' | 'transferPercent' | 'maxTokens' | 'triggerPercent' | 'targetPercent' | 'timeoutSeconds', label: string, min: number, max: number) => (
    <ListRow key={key} title={label} action={<Input aria-label={label} className="min-h-11 w-32" type="number" min={min} max={max} step={1} disabled={busy} value={draft?.[key] ?? ''} onChange={e => change(key, e.target.valueAsNumber)} />} />
  )
  const modelSelect = (key: 'primaryModel' | 'fallbackModel', label: string) => {
    const models = (state?.models ?? []).filter(m => key !== 'fallbackModel' || m.window >= 1000000)
    const selected = draft?.[key] ?? ''
    return <ListRow title={label} action={
      <select aria-label={label} className="min-h-11 max-w-full rounded-md border bg-(--ui-bg) p-2" disabled={busy} value={selected} onChange={e => change(key, e.target.value)}>
        <option value="">{key === 'primaryModel' ? t('Mevcut model (ayrı çağrı)', 'Current model (separate call)') : t('Yedek seçilmedi', 'No fallback selected')}</option>
        {selected && !models.some(m => m.id === selected) && <option value={selected}>{selected} — {t('katalogda doğrulanmadı', 'not verified in catalog')}</option>}
        {models.map(m => <option key={m.id} value={m.id}>{m.name} ({Math.round(m.window / 1000)}K)</option>)}
      </select>
    } />
  }
  return <SettingsSection icon={Link} title={t('Bağlam ve Sıkıştırma', 'Context and Compression')}>
    <p className="text-sm text-(--ui-text-secondary)">{t('Ek modellerle geçişleri ve aynı ek modelde bağlamı yönetir. Sohbet kimliği ve tam geçmiş korunur. Abonelik modellerinin kendi aralarındaki geçişleri Codex yönetir.', 'Manages transfers involving added models and their ongoing context. Chat identity and full history are preserved. Codex manages transitions between subscription models.')}</p>
    {draft && <>
      {modelSelect('primaryModel', t('Sıkıştırmadan sorumlu model', 'Primary summarizer'))}
      {modelSelect('fallbackModel', t('Yedek sıkıştırıcı (1M)', 'Fallback summarizer (1M)'))}
      {state && !state.modelsAvailable && <p role="status">{t('Model kataloğuna ulaşılamadı.', 'Model catalog unavailable.')}</p>}
      <ListRow title={t('Mevcut modele geri dönüş', 'Fall back to current model')} description={t('Sıkıştırıcılar başarısız olursa ve geçmiş mevcut modele sığıyorsa kullanılır.', 'Used if summarizers fail and the history fits the current model.')} action={<Switch aria-label={t('Mevcut modele geri dönüş', 'Fall back to current model')} checked={draft.currentModelFallback} disabled={busy} onCheckedChange={v => change('currentModelFallback', v)} />} />
      <ListRow title={t('Sıkıştırma seviyesi', 'Compression level')} action={<select aria-label={t('Sıkıştırma seviyesi', 'Compression level')} className="min-h-11 rounded-md border p-2" value={draft.level} disabled={busy} onChange={e => change('level', e.target.value as CompressionSettings['level'])}>
        {(['mini', 'az', 'orta', 'fazla', 'cok-fazla'] as const).map((value, i) => <option key={value} value={value}>{(tr ? ['Mini', 'Az', 'Orta', 'Fazla', 'Çok Fazla'] : ['Minimal', 'Light', 'Medium', 'High', 'Very high'])[i]}</option>)}
      </select>} />
      {numeric('keepTurns', t('Korunan son mesajlaşma sayısı', 'Recent exchanges to preserve'), 1, 100)}
      <p className="text-sm text-(--ui-text-secondary)">{t('Bir mesajlaşma, kullanıcı mesajı ve ardından gelen cevap/araç işlemleridir. Korunan bölüm sığmazsa geçiş durur; bu sayı kendiliğinden azaltılmaz.', 'An exchange includes a user message and subsequent replies/tool operations. If the protected section cannot fit, the transfer stops without reducing this count.')}</p>
      <ListRow title={t('Geçiş bütçesi', 'Transfer budget')} action={<select aria-label={t('Geçiş bütçesi', 'Transfer budget')} className="min-h-11 rounded-md border p-2" disabled={busy} value={draft.budgetMode} onChange={e => change('budgetMode', e.target.value as CompressionSettings['budgetMode'])}><option value="percent">{t('Yüzde', 'Percent')}</option><option value="tokens">{t('Maksimum token', 'Maximum tokens')}</option></select>} />
      {draft.budgetMode === 'percent' ? numeric('transferPercent', t('Hedef model bağlamı (%)', 'Target model context (%)'), 10, 90) : numeric('maxTokens', t('Maksimum giriş tokenı', 'Maximum input tokens'), 1024, 2000000)}
      <ListRow title={t('Otomatik sıkıştırma', 'Automatic compression')} action={<Switch aria-label={t('Otomatik sıkıştırma', 'Automatic compression')} disabled={busy} checked={draft.autoEnabled} onCheckedChange={v => change('autoEnabled', v)} />} />
      {numeric('triggerPercent', t('Başlama eşiği (%)', 'Trigger threshold (%)'), 20, 90)}
      {numeric('targetPercent', t('Sıkıştırma sonrası hedef (%)', 'Target after compression (%)'), 10, 80)}
      {numeric('timeoutSeconds', t('Sıkıştırıcı bekleme süresi (saniye)', 'Summarizer timeout (seconds)'), 1, 3600)}
      <Button disabled={busy || draft.targetPercent >= draft.triggerPercent} onClick={async () => {
        setBusy(true); setMessage(''); setFailed(false)
        try {
          const next = await api.setCompression(draft)
          setState(next); setDraft(next.settings); setMessage(t('Kaydedildi. Sonraki hazırlıkta uygulanacak.', 'Saved. Applies to the next preparation.'))
        } catch { setFailed(true); setMessage(t('Kaydedilemedi. Değerleri ve hedefin eşikten küçük olduğunu kontrol edin.', 'Could not save. Check the values and ensure the target is below the trigger.')) }
        finally { setBusy(false) }
      }}>{busy ? t('Kaydediliyor…', 'Saving…') : t('Kaydet', 'Save')}</Button>
    </>}
    {message && <p role={failed ? 'alert' : 'status'}>{message}</p>}
  </SettingsSection>
}