'use client';

import { useState } from 'react';

interface FeedbackButtonsProps {
    queryId: string;
    query: string;
    answer: string;
}

type ErrorType = 'exemption_missing' | 'product_confusion' | 'old_version' | 'other';

const ERROR_TYPE_LABELS: Record<ErrorType, string> = {
    exemption_missing: '면책 누락',
    product_confusion: '상품 혼동',
    old_version: '구버전 참조',
    other: '기타',
};

export default function FeedbackButtons({ queryId, query, answer }: FeedbackButtonsProps) {
    const [submitted, setSubmitted] = useState(false);
    const [showDetail, setShowDetail] = useState(false);
    const [selectedErrorType, setSelectedErrorType] = useState<ErrorType>('other');
    const [freeText, setFreeText] = useState('');
    const [submitting, setSubmitting] = useState(false);
    const [toastMessage, setToastMessage] = useState<string | null>(null);

    function showToast(message: string) {
        setToastMessage(message);
        setTimeout(() => setToastMessage(null), 3000);
    }

    async function handleCorrect() {
        if (submitting) return;
        setSubmitting(true);
        try {
            const res = await fetch('/api/ai/feedback', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    queryId,
                    rating: 'positive',
                    errorType: null,
                    freeText: '',
                    query,
                    answer,
                }),
            });
            if (!res.ok) throw new Error('서버 오류');
            setSubmitted(true);
        } catch {
            showToast('피드백 전송에 실패했습니다. 잠시 후 다시 시도해 주세요.');
        } finally {
            setSubmitting(false);
        }
    }

    function handleIncorrect() {
        setShowDetail(true);
    }

    async function handleSubmitDetail() {
        if (submitting) return;
        setSubmitting(true);
        try {
            const res = await fetch('/api/ai/feedback', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    queryId,
                    rating: 'negative',
                    errorType: selectedErrorType,
                    freeText,
                    query,
                    answer,
                }),
            });
            if (!res.ok) throw new Error('서버 오류');
            setSubmitted(true);
            setShowDetail(false);
        } catch {
            showToast('피드백 전송에 실패했습니다. 잠시 후 다시 시도해 주세요.');
        } finally {
            setSubmitting(false);
        }
    }

    if (submitted) {
        return (
            <p className="text-xs text-gray-400">피드백 감사합니다!</p>
        );
    }

    return (
        <div className="flex flex-col gap-2">
            {/* 토스트 메시지 */}
            {toastMessage && (
                <div className="px-3 py-2 bg-red-50 text-red-600 text-xs rounded-lg">
                    {toastMessage}
                </div>
            )}

            {!showDetail ? (
                <div className="flex items-center gap-2">
                    <span className="text-xs text-gray-400 mr-1">이 답변이 도움이 됐나요?</span>
                    <button
                        onClick={handleCorrect}
                        disabled={submitting}
                        className="px-3 py-1 rounded-lg border border-gray-200 text-xs text-gray-500 transition-all disabled:opacity-40 hover:bg-green-50 hover:border-green-400 hover:text-green-700"
                    >
                        정확해요 👍
                    </button>
                    <button
                        onClick={handleIncorrect}
                        disabled={submitting}
                        className="px-3 py-1 rounded-lg border border-gray-200 text-xs text-gray-500 transition-all disabled:opacity-40 hover:bg-red-50 hover:border-red-400 hover:text-red-700"
                    >
                        틀렸어요 👎
                    </button>
                </div>
            ) : (
                <div className="flex flex-col gap-2">
                    <p className="text-xs text-gray-500 font-medium">어떤 점이 틀렸나요?</p>

                    {/* 오답 유형 라디오 버튼 - 가로 배치 */}
                    <div className="flex flex-wrap items-center gap-3">
                        {(Object.entries(ERROR_TYPE_LABELS) as [ErrorType, string][]).map(([value, label]) => (
                            <label key={value} className="flex items-center gap-1 cursor-pointer">
                                <input
                                    type="radio"
                                    name="errorType"
                                    value={value}
                                    checked={selectedErrorType === value}
                                    onChange={() => setSelectedErrorType(value)}
                                    className="w-3.5 h-3.5 accent-indigo-600"
                                />
                                <span className="text-xs text-gray-600">{label}</span>
                            </label>
                        ))}
                    </div>

                    {/* 자유 텍스트 입력 */}
                    <textarea
                        value={freeText}
                        onChange={(e) => setFreeText(e.target.value)}
                        placeholder="추가 의견이 있으면 입력하세요"
                        rows={2}
                        className="resize-none rounded-lg border border-gray-200 text-xs p-2 w-full focus:outline-none focus:border-indigo-400"
                    />

                    <div className="flex items-center gap-2">
                        <button
                            onClick={handleSubmitDetail}
                            disabled={submitting}
                            className="px-3 py-1.5 rounded-lg bg-indigo-600 text-white text-xs font-medium disabled:opacity-40 hover:bg-indigo-700 transition-colors"
                        >
                            {submitting ? '제출 중...' : '제출'}
                        </button>
                        <button
                            onClick={() => setShowDetail(false)}
                            disabled={submitting}
                            className="px-3 py-1.5 rounded-lg border border-gray-200 text-xs text-gray-500 hover:bg-gray-50 transition-colors"
                        >
                            취소
                        </button>
                    </div>
                </div>
            )}
        </div>
    );
}