"use client";

import {useState, useEffect, useCallback, useRef} from "react";
import {
    Plus,
    Search,
    Loader2,
    Pencil,
    Trash2,
    Sparkles,
    ChevronLeft,
    ChevronRight,
    X,
} from "lucide-react";
import {Button} from "@/components/ui/button";
import {useToast} from "@/components/ui/toast";

interface WordItem {
    id: number;
    word: string;
    english: string;
    createTime?: string;
    updateTime?: string;
}

interface Pagination {
    page: number;
    pageSize: number;
    total: number;
    totalPages: number;
}

// Modal 组件
function Modal({
                   open,
                   onClose,
                   title,
                   children,
               }: {
    open: boolean;
    onClose: () => void;
    title: string;
    children: React.ReactNode;
}) {
    if (!open) return null;

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center overflow-hidden">
            {/* Backdrop */}
            <div
                className="absolute inset-0 bg-black/50 animate-in fade-in duration-200"
                onClick={onClose}
            />
            {/* Content */}
            <div
                className="relative z-10 w-full max-w-md rounded-lg bg-background p-6 shadow-lg animate-in zoom-in-95 fade-in duration-200">
                <div className="mb-4 flex items-center justify-between">
                    <h3 className="text-lg font-semibold">{title}</h3>
                    <button
                        onClick={onClose}
                        className="rounded-sm p-1 hover:bg-muted"
                    >
                        <X className="h-4 w-4"/>
                    </button>
                </div>
                {children}
            </div>
        </div>
    );
}

export default function TranslationPage() {
    const [words, setWords] = useState<WordItem[]>([]);
    const [pagination, setPagination] = useState<Pagination>({
        page: 1,
        pageSize: 20,
        total: 0,
        totalPages: 0,
    });
    const [search, setSearch] = useState("");
    const [loading, setLoading] = useState(false);
    const [showAddModal, setShowAddModal] = useState(false);
    const [showEditModal, setShowEditModal] = useState(false);
    const [editingWord, setEditingWord] = useState<WordItem | null>(null);
    const [newWord, setNewWord] = useState({word: "", english: ""});
    const [editForm, setEditForm] = useState({word: "", english: ""});
    const [aiTranslating, setAiTranslating] = useState(false);
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const {addToast} = useToast();

    // 搜索防抖定时器
    const searchTimerRef = useRef<NodeJS.Timeout | null>(null);

    // 禁止背景滚动
    useEffect(() => {
        if (showAddModal || showEditModal) {
            document.body.style.overflow = "hidden";
        } else {
            document.body.style.overflow = "";
        }
        return () => {
            document.body.style.overflow = "";
        };
    }, [showAddModal, showEditModal]);

    // 获取词组列表
    const fetchWords = useCallback(async () => {
        setLoading(true);
        setError(null);
        try {
            const params = new URLSearchParams({
                page: pagination.page.toString(),
                pageSize: pagination.pageSize.toString(),
            });
            if (search) params.set("search", search);

            const response = await fetch(`/api/words?${params}`);
            const result = await response.json();

            if (result.success) {
                setWords(result.data);
                setPagination(result.pagination);
            } else {
                setError(result.error || "获取数据失败");
            }
        } catch (error) {
            console.error("Failed to fetch words:", error);
            setError("网络错误，请检查连接");
        } finally {
            setLoading(false);
        }
    }, [pagination.page, pagination.pageSize, search]);

    useEffect(() => {
        fetchWords();
    }, [fetchWords]);

    // 搜索（防抖 300ms）
    const handleSearch = () => {
        if (searchTimerRef.current) {
            clearTimeout(searchTimerRef.current);
        }
        searchTimerRef.current = setTimeout(() => {
            setPagination((prev) => ({...prev, page: 1}));
            fetchWords();
        }, 300);
    };

    // 添加词组
    const handleAdd = async () => {
        if (!newWord.word || !newWord.english) return;

        setSaving(true);
        try {
            const response = await fetch("/api/words", {
                method: "POST",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify(newWord),
            });

            if (response.ok) {
                setNewWord({word: "", english: ""});
                setShowAddModal(false);
                fetchWords();
            }
        } catch (error) {
            console.error("Failed to add word:", error);
        } finally {
            setSaving(false);
        }
    };

    // 打开编辑弹窗
    const handleEdit = (word: WordItem) => {
        setEditingWord(word);
        setEditForm({word: word.word, english: word.english});
        setShowEditModal(true);
    };

    // 保存编辑
    const handleSave = async () => {
        if (!editingWord || !editForm.word || !editForm.english) return;

        setSaving(true);
        try {
            const response = await fetch(`/api/words/${editingWord.id}`, {
                method: "PATCH",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify(editForm),
            });

            if (response.ok) {
                setShowEditModal(false);
                setEditingWord(null);
                fetchWords();
            }
        } catch (error) {
            console.error("Failed to update word:", error);
        } finally {
            setSaving(false);
        }
    };

    // 删除词组
    const handleDelete = async (id: number) => {
        if (!confirm("确定要删除这个词组吗？")) return;

        try {
            const response = await fetch(`/api/words/${id}`, {
                method: "DELETE",
            });

            if (response.ok) {
                fetchWords();
            }
        } catch (error) {
            console.error("Failed to delete word:", error);
        }
    };

    // AI 翻译
    const handleAiTranslate = async (target: "add" | "edit") => {
        const source = target === "add" ? newWord.word : editForm.word;
        if (!source.trim()) return;

        setAiTranslating(true);
        try {
            // 使用 AI 翻译 API
            const response = await fetch(`/api/ai/translate?word=${encodeURIComponent(source.trim())}`);
            const result = await response.json();

            if (result.english) {
                if (target === "add") {
                    setNewWord((prev) => ({...prev, english: result.english}));
                } else {
                    setEditForm((prev) => ({...prev, english: result.english}));
                }
            } else {
                addToast({type: "error", title: "翻译失败", description: result.error || "未找到翻译结果"});
            }
        } catch (error) {
            console.error("AI translation error:", error);
            addToast({type: "error", title: "翻译失败", description: "请检查 AI 配置"});
        } finally {
            setAiTranslating(false);
        }
    };

    return (
        <div className="space-y-6">
            {/*标题和按钮*/}
            <div className={"flex items-center justify-between gap-2"}>
                <div>
                    <h2 className="text-lg font-semibold">翻译词库</h2>
                    <p className="text-sm text-muted-foreground">管理翻译词组对照表</p>
                </div>
                <Button onClick={() => setShowAddModal(true)}>
                    <Plus className="mr-2 h-4 w-4"/>
                    添加词组
                </Button>
            </div>
            {/* 搜索输入框 */}
            <div className="flex flex-col gap-4 sm:flex-row">
                <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"/>
                    <input
                        type="text"
                        value={search}
                        onChange={(e) => setSearch(e.target.value)}
                        onKeyDown={(e) => e.key === "Enter" && handleSearch()}
                        placeholder="搜索中文或英文..."
                        className="w-full rounded-md border border-input bg-background py-2 pl-10 pr-4 text-sm"
                    />
                </div>

            </div>

            {/* 错误提示 */}
            {error && (
                <div className="rounded-lg border border-destructive/50 bg-destructive/5 p-4">
                    <p className="text-sm text-destructive">{error}</p>
                    <Button variant="outline" size="sm" onClick={fetchWords} className="mt-2">
                        重试
                    </Button>
                </div>
            )}

            {/* 词组列表 */}
            <div className="rounded-lg border">
                <div className="max-h-[400px] overflow-auto">
                    <table className="w-full text-sm">
                        <thead className="sticky top-0 bg-muted/50">
                        <tr>
                            <th className="px-4 py-3 text-left font-medium">中文</th>
                            <th className="px-4 py-3 text-left font-medium">英文</th>
                            <th className="w-32 px-4 py-3 text-center font-medium">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {loading ? (
                            <tr>
                                <td colSpan={3} className="px-4 py-8 text-center text-muted-foreground">
                                    <Loader2 className="mx-auto h-6 w-6 animate-spin"/>
                                </td>
                            </tr>
                        ) : words.length === 0 ? (
                            <tr>
                                <td colSpan={3} className="px-4 py-8 text-center text-muted-foreground">
                                    暂无词组，点击上方添加按钮新建
                                </td>
                            </tr>
                        ) : (
                            words.map((word) => (
                                <tr key={word.id} className="border-t hover:bg-muted/30">
                                    <td className="px-4 py-3">{word.word}</td>
                                    <td className="px-4 py-3">{word.english}</td>
                                    <td className="px-4 py-3">
                                        <div className="flex items-center justify-center gap-1">
                                            <Button variant="ghost" size="sm" onClick={() => handleEdit(word)}>
                                                <Pencil className="h-4 w-4"/>
                                            </Button>
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                onClick={() => handleDelete(word.id)}
                                                className="text-destructive hover:text-destructive"
                                            >
                                                <Trash2 className="h-4 w-4"/>
                                            </Button>
                                        </div>
                                    </td>
                                </tr>
                            ))
                        )}
                        </tbody>
                    </table>
                </div>

                {/* 分页 */}
                {pagination.totalPages > 1 && (
                    <div className="flex items-center justify-between border-t bg-muted/30 px-4 py-3">
            <span className="text-sm text-muted-foreground">
              共 {pagination.total} 条，第 {pagination.page}/{pagination.totalPages} 页
            </span>
                        <div className="flex items-center gap-2">
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => setPagination((prev) => ({...prev, page: prev.page - 1}))}
                                disabled={pagination.page <= 1}
                            >
                                <ChevronLeft className="h-4 w-4"/>
                            </Button>
                            <span className="text-sm">
                {pagination.page} / {pagination.totalPages}
              </span>
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={() => setPagination((prev) => ({...prev, page: prev.page + 1}))}
                                disabled={pagination.page >= pagination.totalPages}
                            >
                                <ChevronRight className="h-4 w-4"/>
                            </Button>
                        </div>
                    </div>
                )}
            </div>

            {/* 添加弹窗 */}
            <Modal open={showAddModal} onClose={() => setShowAddModal(false)} title="添加词组">
                <div className="space-y-4">
                    <div className="space-y-2">
                        <label className="text-sm font-medium">中文</label>
                        <input
                            type="text"
                            value={newWord.word}
                            onChange={(e) => setNewWord({...newWord, word: e.target.value})}
                            placeholder="输入中文"
                            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                        />
                    </div>
                    <div className="space-y-2">
                        <label className="text-sm font-medium">英文</label>
                        <div className="flex gap-2">
                            <input
                                type="text"
                                value={newWord.english}
                                onChange={(e) => setNewWord({...newWord, english: e.target.value})}
                                placeholder="输入英文"
                                className="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm"
                            />
                            <Button
                                variant="outline"
                                onClick={() => handleAiTranslate("add")}
                                disabled={aiTranslating || !newWord.word}
                                title="AI 翻译"
                            >
                                {aiTranslating ? <Loader2 className="h-4 w-4 animate-spin"/> :
                                    <Sparkles className="h-4 w-4"/>}
                            </Button>
                        </div>
                    </div>
                    <div className="flex justify-end gap-2">
                        <Button variant="outline" onClick={() => setShowAddModal(false)}>
                            取消
                        </Button>
                        <Button onClick={handleAdd} disabled={saving || !newWord.word || !newWord.english}>
                            {saving ? "保存中..." : "保存"}
                        </Button>
                    </div>
                </div>
            </Modal>

            {/* 编辑弹窗 */}
            <Modal open={showEditModal} onClose={() => setShowEditModal(false)} title="编辑词组">
                <div className="space-y-4">
                    <div className="space-y-2">
                        <label className="text-sm font-medium">中文</label>
                        <input
                            type="text"
                            value={editForm.word}
                            onChange={(e) => setEditForm({...editForm, word: e.target.value})}
                            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                        />
                    </div>
                    <div className="space-y-2">
                        <label className="text-sm font-medium">英文</label>
                        <div className="flex gap-2">
                            <input
                                type="text"
                                value={editForm.english}
                                onChange={(e) => setEditForm({...editForm, english: e.target.value})}
                                className="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm"
                            />
                            <Button
                                variant="outline"
                                onClick={() => handleAiTranslate("edit")}
                                disabled={aiTranslating || !editForm.word}
                                title="AI 翻译"
                            >
                                {aiTranslating ? <Loader2 className="h-4 w-4 animate-spin"/> :
                                    <Sparkles className="h-4 w-4"/>}
                            </Button>
                        </div>
                    </div>
                    <div className="flex justify-end gap-2">
                        <Button variant="outline" onClick={() => setShowEditModal(false)}>
                            取消
                        </Button>
                        <Button onClick={handleSave} disabled={saving || !editForm.word || !editForm.english}>
                            {saving ? "保存中..." : "保存"}
                        </Button>
                    </div>
                </div>
            </Modal>
        </div>
    );
}