import { useState } from 'react'
import { useMutation } from '@tanstack/react-query'
import { PageHeader, Button } from '../components/ui'
import { Icon } from '../lib/icons'
import { aiChat, aiAnalyzeAlarm, aiGenerateSignText, aiRecommendAd } from '../api/client'

// WISE AI 어시스턴트 — 온프레미스/Claude(AiTextRouter) 경유. 알람 분석·간판 문구·광고 추천·챗.
// 응답에 근거(citations/sources)·환각차단(abstained)·degraded 필드가 있으면 인용/보류 UX 로 표기.
type Meta = { citations?: any[]; sources?: any[]; abstained?: boolean; degraded?: boolean }
type Msg = { role: 'user' | 'ai'; text: string; meta?: Meta }

// 인용 라벨 — 문서명·위치·근거지지도. citation/source 객체 형태 방어적 처리.
function sgnCite(c: any): string {
  if (c == null) return '문서'
  if (typeof c === 'string') return c
  const src = c.source || c.document || c.doc || c.title || c.chunk_id || c.id || '문서'
  const loc = c.page != null ? ` p.${c.page}` : (c.location ? ` ${c.location}` : '')
  const sup = c.support != null ? ` · ${Math.round(Number(c.support) * 100)}%` : ''
  return `${src}${loc}${sup}`
}

// 근거/보류 배지 블록 — 근거·보류·degraded 정보가 있을 때만 노출(없으면 null).
function Evidence({ meta }: { meta?: Meta }) {
  if (!meta) return null
  const items = (meta.citations?.length ? meta.citations : meta.sources) || []
  const abstained = meta.abstained === true
  const degraded = meta.degraded === true
  if (!abstained && !degraded && items.length === 0) return null
  return (
    <div className="mt-1.5 max-w-[75%] space-y-1">
      {abstained && (
        <div className="text-[11px] px-2 py-1 rounded bg-amber-500/10 border border-amber-500/30 text-amber-300">
          근거가 부족해 답변을 보류했습니다 (오류 아님 · 안내)
        </div>
      )}
      {degraded && !abstained && (
        <div className="text-[11px] px-2 py-1 rounded bg-gray-500/10 border border-edge text-gray-400">
          degraded · 폴백 응답
        </div>
      )}
      {items.length > 0 && (
        <div>
          <div className="text-[10px] text-gray-500 mb-1">근거 인용 ({items.length})</div>
          <div className="flex flex-wrap gap-1">
            {items.map((c: any, i: number) => (
              <span key={i} className="text-[10px] px-1.5 py-0.5 rounded bg-panel border border-edge text-gray-300">{sgnCite(c)}</span>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

export default function AiAssistant() {
  const [msgs, setMsgs] = useState<Msg[]>([])
  const [input, setInput] = useState('')

  const push = (m: Msg) => setMsgs(p => [...p, m])
  const asText = (r: any) => r?.text || r?.result || r?.analysis || r?.recommendation || r?.response || r?.answer || r?.message || JSON.stringify(r)
  const metaOf = (r: any): Meta => ({
    citations: Array.isArray(r?.citations) ? r.citations : undefined,
    sources: Array.isArray(r?.sources) ? r.sources : undefined,
    abstained: r?.abstained === true,
    degraded: r?.degraded === true,
  })

  const chatMut = useMutation({
    mutationFn: (m: string) => aiChat(m),
    onSuccess: r => push({ role: 'ai', text: asText(r), meta: metaOf(r) }),
    onError: () => push({ role: 'ai', text: 'AI 응답을 가져오지 못했습니다. (일시 불가)', meta: { degraded: true } }),
  })
  const alarmMut = useMutation({
    mutationFn: () => aiAnalyzeAlarm({ message: input || '게이트웨이 오프라인 다수 발생', alarmType: 'DEVICE', severity: 'HIGH' }),
    onSuccess: r => push({ role: 'ai', text: '[알람 분석]\n' + asText(r), meta: metaOf(r) }),
  })
  const signMut = useMutation({
    mutationFn: () => aiGenerateSignText({ bizName: input || '지오분식', message: '신메뉴 출시' }),
    onSuccess: r => push({ role: 'ai', text: '[간판 문구]\n' + asText(r), meta: metaOf(r) }),
  })
  const adMut = useMutation({
    mutationFn: () => aiRecommendAd({ storeCode: 'STORE001', season: '여름' }),
    onSuccess: r => push({ role: 'ai', text: '[광고 추천]\n' + asText(r), meta: metaOf(r) }),
  })

  const send = () => {
    if (!input.trim()) return
    push({ role: 'user', text: input })
    chatMut.mutate(input)
    setInput('')
  }

  const busy = chatMut.isPending || alarmMut.isPending || signMut.isPending || adMut.isPending

  return (
    <div>
      <PageHeader title="WISE AI" subtitle="Enterprise AI for Trusted Knowledge · 온프레미스 sLLM / Claude(AiTextRouter) 경유 · 근거·인용·환각차단" />

      <div className="flex gap-2 mb-4 flex-wrap">
        <Button variant="ghost" icon="alarm" onClick={() => alarmMut.mutate()} disabled={busy}>알람 원인 분석</Button>
        <Button variant="ghost" icon="editor" onClick={() => signMut.mutate()} disabled={busy}>간판 문구 생성</Button>
        <Button variant="ghost" icon="ad" onClick={() => adMut.mutate()} disabled={busy}>광고 추천</Button>
      </div>

      <div className="bg-card border border-edge rounded-lg h-[52vh] overflow-auto p-4 space-y-3">
        {msgs.length === 0 && (
          <div className="text-center text-gray-500 text-sm pt-16">
            <Icon name="ai" size={32} className="mx-auto mb-2 text-edge" />
            질문을 입력하거나 위 도구를 사용하세요.
          </div>
        )}
        {msgs.map((m, i) => (
          <div key={i} className={`flex flex-col ${m.role === 'user' ? 'items-end' : 'items-start'}`}>
            <div className={`max-w-[75%] rounded-lg px-3 py-2 text-sm whitespace-pre-wrap ${m.role === 'user' ? 'bg-brand text-white' : 'bg-panel border border-edge text-gray-200'}`}>
              {m.text}
            </div>
            {m.role === 'ai' && <Evidence meta={m.meta} />}
          </div>
        ))}
        {busy && <div className="text-gray-500 text-sm">AI 응답 생성 중...</div>}
      </div>

      <div className="flex gap-2 mt-3">
        <input value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && send()}
          placeholder="질문 또는 도구 파라미터(상호명/알람 내용)를 입력..."
          className="flex-1 bg-ink border border-edge rounded px-3 py-2 text-sm text-white outline-none focus:border-brand" />
        <Button icon="send" onClick={send} disabled={busy}>전송</Button>
      </div>
    </div>
  )
}
