import React, { useState } from 'react'
import { wiseAsk } from '../api/client'

/**
 * WISE AI — Enterprise AI for Trusted Knowledge. [GUARDiA-HRM]
 *
 * 중앙 guardia-rag(/rag/answer) 경유 근거·인용 기반 질의응답 화면.
 *  - 질문 입력 → 스피너 → 답변(plain text)
 *  - sources[] 인용 카드(없으면 "근거 문서 없음" 표기)
 *  - abstained=true → 경고 톤 안내 배지(오류 아님)
 *  - degraded → 회색 배지(사유 코드)
 * 외부 API 미사용(온프레미스 rag 프록시). 기존 AI 인사분석(/ai) 화면과 별개 레이어.
 */
export default function WiseAiPage() {
  const [query, setQuery] = useState('')
  const [busy, setBusy] = useState(false)
  const [res, setRes] = useState<any>(null)
  const [err, setErr] = useState('')

  const ask = async () => {
    if (!query.trim()) return
    setBusy(true); setErr(''); setRes(null)
    try {
      const r = await wiseAsk(query.trim())
      setRes(r.data?.data ?? r.data)
    } catch (e: any) {
      setErr(e.response?.data?.message || 'AI 서비스 일시 불가 — 잠시 후 다시 시도해주세요.')
    } finally {
      setBusy(false)
    }
  }

  const sources: any[] = Array.isArray(res?.sources) ? res.sources
    : Array.isArray(res?.citations) ? res.citations : []
  const abstained = res?.abstained === true
  const degraded = res?.degraded === true
  const answer: string = res?.answer ?? ''

  return (
    <div className="space-y-4 max-w-3xl">
      <div className="flex items-center gap-3">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">WISE AI</h1>
          <p className="text-sm text-slate-500">Enterprise AI for Trusted Knowledge</p>
        </div>
        <span className="badge bg-emerald-100 text-emerald-700 ml-auto">중앙 guardia-rag · 외부 API 미사용</span>
      </div>

      <div className="card space-y-3">
        <label className="block text-xs font-medium text-slate-600">질문</label>
        <textarea
          value={query}
          onChange={e => setQuery(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) ask() }}
          placeholder="예) 연차 정산 규정과 이월 한도를 알려줘"
          rows={3}
          className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500" />
        <button onClick={ask} disabled={busy}
          className="btn-primary disabled:opacity-50">
          {busy ? '검색·생성 중…' : '질문하기'}
        </button>
      </div>

      {busy && (
        <div className="card flex items-center justify-center py-16">
          <div className="text-center space-y-3">
            <div className="w-10 h-10 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto"></div>
            <p className="text-sm text-slate-500">근거 문서 검색 및 답변 생성 중…</p>
          </div>
        </div>
      )}

      {err && <div className="card bg-red-50 text-red-600 text-sm">{err}</div>}

      {res && !busy && (
        <div className="card space-y-4">
          {/* 배지 */}
          <div className="flex flex-wrap items-center gap-2">
            {abstained && (
              <span className="text-xs px-3 py-1.5 rounded-full bg-amber-50 border border-amber-300 text-amber-700">
                근거가 부족해 답변을 보류했습니다
              </span>
            )}
            {degraded && (
              <span className="text-xs px-3 py-1.5 rounded-full bg-slate-100 border border-slate-300 text-slate-500">
                degraded{res.degraded_reason ? ` · ${res.degraded_reason}` : ''}
              </span>
            )}
            {!abstained && !degraded && res.faithfulness != null && (
              <span className="text-xs px-3 py-1.5 rounded-full bg-emerald-50 border border-emerald-300 text-emerald-700">
                신뢰도(faithfulness) {Math.round(Number(res.faithfulness) * 100)}%
              </span>
            )}
          </div>

          {/* 답변 */}
          {answer
            ? <p className="text-sm text-slate-700 whitespace-pre-wrap leading-relaxed">{answer}</p>
            : abstained
              ? <p className="text-sm text-slate-500">확인된 근거가 없어 답변을 제시하지 않았습니다. 질문을 더 구체화하거나 관련 문서를 확인해주세요.</p>
              : <p className="text-sm text-slate-400">응답이 비어 있습니다.</p>}

          {/* 인용 카드 */}
          <div>
            <p className="text-xs font-medium text-slate-500 mb-1.5">근거 인용</p>
            {sources.length > 0 ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                {sources.map((s, i) => (
                  <div key={i} className="border border-slate-200 rounded-lg px-3 py-2 bg-slate-50">
                    <div className="text-xs font-medium text-slate-700 truncate">
                      {s.source || s.document || s.title || s.chunk_id || `근거 ${i + 1}`}
                    </div>
                    {(s.page != null || s.location) && (
                      <div className="text-[11px] text-slate-400">위치: {s.page ?? s.location}</div>
                    )}
                    {s.support != null && (
                      <div className="text-[11px] text-slate-400">관련도 {Math.round(Number(s.support) * 100)}%</div>
                    )}
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-xs text-slate-400">근거 문서 없음</p>
            )}
          </div>
        </div>
      )}
    </div>
  )
}
