import { useState } from 'react'
import {
  BrainCircuit, Send, Quote, ThumbsUp, ThumbsDown, ShieldAlert, Info, Cpu, FileText,
} from 'lucide-react'
import { ragContentDraft, ragFeedback } from '../api/client'

/**
 * WISE AI — Enterprise AI for Trusted Knowledge (CMS)
 *
 * 중앙 guardia-rag(문서 근거 검색) 경유 독립 질의 화면. 기존 설정 내 라이브테스트(AiTechniques,
 * /ai-techniques)는 그대로 유지 — 본 화면은 근거 있는 답을 얻는 질의 전용으로 승격.
 * 질문 → 근거 답변 → 인용 카드(문서·위치) → 근거 부족 보류(abstained, 오류 아님) · 폴백(degraded) 안내.
 * 기존 라이브테스트의 rag 호출(ragContentDraft = /rag/answer 프록시)을 그대로 소비 · 외부 API 0.
 */
export default function WiseAiPage() {
  const [query, setQuery] = useState('')
  const [result, setResult] = useState<any>(null)
  const [busy, setBusy] = useState(false)
  const [fbMsg, setFbMsg] = useState('')

  const ask = async () => {
    if (!query.trim()) return
    setBusy(true); setResult(null); setFbMsg('')
    try { setResult(await ragContentDraft('page', query, '')) }
    catch { setResult({ error: 'AI 서비스 일시 불가 — 잠시 후 다시 시도하세요.' }) }
    finally { setBusy(false) }
  }

  const sendFeedback = async (verdict: 'up' | 'down') => {
    if (!result) return
    try {
      await ragFeedback({ answerId: result.answerId, query, answer: String(result.draft ?? ''), verdict })
      setFbMsg(verdict === 'up' ? '피드백 감사합니다 👍' : '학습에 반영합니다 👎')
    } catch { setFbMsg('피드백 저장 보류(중앙 RAG 일시 제한)') }
  }

  const cites: any[] = (result?.citations?.length ? result.citations : result?.sources) || []
  const applied = result?.applied

  return (
    <div className="space-y-6 max-w-3xl">
      <div>
        <h1 className="text-xl font-bold flex items-center gap-2">
          <BrainCircuit size={22} className="text-brand" /> WISE AI
        </h1>
        <p className="text-sm text-slate-400 mt-0.5">Enterprise AI for Trusted Knowledge · 근거·인용 기반 답변 (중앙 guardia-rag · 외부 API 0)</p>
      </div>

      {/* 질문 입력 */}
      <div className="bg-card border border-edge rounded-xl p-5 space-y-3">
        <div className="text-sm font-semibold text-slate-300 flex items-center gap-2"><FileText size={16} /> 질문</div>
        <textarea value={query} onChange={e => setQuery(e.target.value)} rows={3}
          onKeyDown={e => { if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') ask() }}
          placeholder="콘텐츠·상품·정책 문서에 대해 자연어로 질문하세요 (예: 봄맞이 신상 화분 소개 문구를 근거와 함께 작성해줘)"
          className="w-full bg-panel border border-edge rounded-lg px-3 py-2 text-sm focus:border-brand outline-none" />
        <button onClick={ask} disabled={busy || !query.trim()}
          className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-brand text-ink text-sm font-semibold disabled:opacity-40">
          <Send size={15} /> {busy ? '검색·생성 중…' : '질문하기'}
        </button>
      </div>

      {/* 답변 */}
      {result && !result.error && (
        <div className="bg-card border border-edge rounded-xl p-5 space-y-3">
          {/* 상태 배지 */}
          <div className="flex flex-wrap gap-1.5 items-center">
            <span className="text-[11px] px-2 py-0.5 rounded-full bg-panel border border-edge text-slate-400 flex items-center gap-1"><Cpu size={11} /> {result.engine || 'RAG'}</span>
            {applied?.retrievalMode && <Chip>mode: {applied.retrievalMode}</Chip>}
            {applied?.rerank && <Chip>rerank</Chip>}
            {applied?.graphrag && <Chip>graph</Chip>}
            {applied?.toolUse && <Chip>tool-use</Chip>}
            {typeof result.faithfulness === 'number' && <Chip>신뢰도 {result.faithfulness}</Chip>}
            {result.degraded && (
              <span className="text-[11px] px-2 py-0.5 rounded-full bg-slate-500/15 border border-slate-500/40 text-slate-300">
                degraded · 로컬 폴백{result.degraded_reason ? ` (${result.degraded_reason})` : ''}
              </span>
            )}
          </div>

          {/* 근거 부족 보류 안내 (오류 아님) */}
          {result.abstained && (
            <div className="bg-amber-500/10 border border-amber-500/40 text-amber-300 text-sm rounded-lg px-4 py-3 flex items-start gap-2">
              <ShieldAlert size={16} className="mt-0.5 shrink-0" />
              <div>
                <div className="font-semibold">근거가 부족해 답변을 보류했습니다</div>
                <div className="text-xs text-amber-300/80 mt-0.5">문서에서 충분한 근거를 찾지 못했습니다. 질문을 더 구체화하거나 관련 문서를 색인하세요. (환각 방지 — 오류가 아닌 정상 안내)</div>
              </div>
            </div>
          )}

          {/* 답변 본문 */}
          {result.draft && (
            <pre className="bg-panel border border-edge rounded-lg p-4 text-sm text-slate-200 whitespace-pre-wrap font-sans leading-relaxed">{String(result.draft)}</pre>
          )}

          {/* 인용 */}
          <Citations cites={cites} />

          {/* 피드백 */}
          {!result.degraded && (
            <div className="flex items-center gap-2 pt-1">
              <button onClick={() => sendFeedback('up')} className="flex items-center gap-1 text-xs px-2.5 py-1 rounded-lg bg-panel border border-edge text-emerald-300 hover:border-emerald-400"><ThumbsUp size={13} /> 도움됨</button>
              <button onClick={() => sendFeedback('down')} className="flex items-center gap-1 text-xs px-2.5 py-1 rounded-lg bg-panel border border-edge text-rose-300 hover:border-rose-400"><ThumbsDown size={13} /> 부정확</button>
              {fbMsg && <span className="text-xs text-slate-400">{fbMsg}</span>}
            </div>
          )}
        </div>
      )}

      {result?.error && (
        <div className="bg-rose-500/10 border border-rose-500/40 text-rose-300 text-sm rounded-lg px-4 py-3 flex items-center gap-2">
          <Info size={16} /> {result.error}
        </div>
      )}
    </div>
  )
}

function Chip({ children }: { children: React.ReactNode }) {
  return <span className="text-[11px] px-2 py-0.5 rounded-full bg-panel border border-edge text-slate-400">{children}</span>
}

function citeName(c: any): string {
  return c?.source || c?.document || c?.title || c?.doc || c?.chunk_id || '문서'
}
function citeLoc(c: any): string {
  const loc = c?.page ?? c?.loc ?? c?.position ?? c?.chunk_id
  return loc != null ? String(loc) : ''
}
function citeScore(c: any): number | null {
  const s = c?.score ?? c?.support
  return typeof s === 'number' ? Math.round(s * 100) / 100 : null
}

function Citations({ cites }: { cites: any[] }) {
  return (
    <div>
      <div className="text-xs text-slate-400 mb-1.5 flex items-center gap-1"><Quote size={12} /> 근거 인용 {cites.length > 0 ? `(${cites.length})` : ''}</div>
      {cites.length === 0 ? (
        <div className="text-xs text-slate-500">근거 문서 없음</div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
          {cites.map((c, i) => {
            const loc = citeLoc(c); const sc = citeScore(c)
            return (
              <div key={i} className="bg-panel border border-edge rounded-lg px-3 py-2">
                <div className="text-sm text-slate-200 truncate flex items-center gap-1.5"><FileText size={13} className="text-brand shrink-0" /> {citeName(c)}</div>
                <div className="text-[11px] text-slate-500 mt-0.5">
                  {loc && <span>위치: {loc}</span>}{loc && sc != null && ' · '}{sc != null && <span>관련도 {sc}</span>}
                </div>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}
