// AI 결과 피드백 위젯(👍/👎 + 교정) — 로컬 DuckDB + 중앙 rag 전달.
//   AI 도구·설정 등 AI 결과가 표시되는 곳에서 재사용. 사용자 식별자는 서버가 JWT 에서 취득(전송 불필요).
//   PII 는 서버 저장 시 마스킹. 실패해도 사용자 흐름을 막지 않는다(best-effort 표시).
import { useState } from 'react'
import { ThumbsUp, ThumbsDown, Send } from 'lucide-react'
import { submitAiFeedback } from '../api/adminAiConfig'

interface Props {
  /** 피드백 대상 기능 식별자(예: content-draft, seo, moderate). */
  feature: string
  /** 선택: 질문/입력 컨텍스트(마스킹되어 저장). */
  question?: string
  /** 선택: AI 응답(마스킹되어 저장). */
  answer?: string
}

export default function AiFeedback({ feature, question, answer }: Props) {
  const [verdict, setVerdict] = useState<'up' | 'down' | null>(null)
  const [correction, setCorrection] = useState('')
  const [sent, setSent] = useState(false)
  const [busy, setBusy] = useState(false)

  const send = async (v: 'up' | 'down') => {
    setVerdict(v)
    if (v === 'up') { await post(v) }
  }

  const post = async (v: 'up' | 'down') => {
    setBusy(true)
    try {
      await submitAiFeedback({ feature, question, answer, verdict: v, correction: correction || undefined })
      setSent(true)
    } catch {
      setSent(true) // best-effort — 실패해도 UI 를 막지 않음
    } finally {
      setBusy(false)
    }
  }

  if (sent) {
    return <div className="text-xs text-accent">피드백 감사합니다. 학습에 반영됩니다.</div>
  }

  return (
    <div className="flex flex-col gap-2">
      <div className="flex items-center gap-2">
        <span className="text-xs text-slate-500">이 결과가 도움이 되었나요?</span>
        <button
          onClick={() => send('up')}
          disabled={busy}
          className={`p-1.5 rounded-lg border text-xs ${verdict === 'up' ? 'bg-accent/15 border-accent text-accent' : 'bg-ink border-edge text-slate-300 hover:border-accent/50'}`}
          aria-label="좋아요"
        >
          <ThumbsUp size={14} />
        </button>
        <button
          onClick={() => send('down')}
          disabled={busy}
          className={`p-1.5 rounded-lg border text-xs ${verdict === 'down' ? 'bg-rose-500/15 border-rose-500 text-rose-300' : 'bg-ink border-edge text-slate-300 hover:border-rose-500/50'}`}
          aria-label="아쉬워요"
        >
          <ThumbsDown size={14} />
        </button>
      </div>
      {verdict === 'down' && (
        <div className="flex items-center gap-2">
          <input
            value={correction}
            onChange={e => setCorrection(e.target.value)}
            placeholder="무엇이 잘못됐는지 알려주세요 (선택)"
            className="flex-1 px-3 py-1.5 rounded-lg bg-ink border border-edge text-sm outline-none focus:border-brand"
          />
          <button
            onClick={() => post('down')}
            disabled={busy}
            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-brand text-ink text-xs font-semibold disabled:opacity-40"
          >
            <Send size={13} /> 제출
          </button>
        </div>
      )}
    </div>
  )
}
