"use client";

import React, { useEffect, useState } from "react";
import { getProblemData } from "@/app/actions/getProblem";
import { updateProblemTemplate } from "@/components/creater/problem-maintain";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CoreEditor } from "@/components/core-editor";
import { Language } from "@/generated/client";
import { toast } from "sonner";

interface Template {
  language: string;
  content: string;
}

interface EditCodePanelProps {
  problemId: string;
}

export default function EditCodePanel({ problemId }: EditCodePanelProps) {
  const [codeTemplate, setCodeTemplate] = useState<Template>({
    language: "cpp",
    content: `// 默认代码模板 for Problem ${problemId}`,
  });
  const [templates, setTemplates] = useState<Template[]>([]);

  useEffect(() => {
    async function fetchTemplates() {
      try {
        const problem = await getProblemData(problemId);
        setTemplates(problem.templates);
        const sel =
          problem.templates.find((t) => t.language === "cpp") ||
          problem.templates[0];
        if (sel) setCodeTemplate(sel);
      } catch (err) {
        console.error("加载问题数据失败:", err);
        toast.error("加载问题数据失败");
      }
    }
    fetchTemplates();
  }, [problemId]);

  const handleLanguageChange = (language: string) => {
    const sel = templates.find((t) => t.language === language);
    if (sel) setCodeTemplate(sel);
  };

  const handleSave = async (): Promise<void> => {
    try {
      const res = await updateProblemTemplate(
        problemId,
        codeTemplate.language as Language,
        codeTemplate.content
      );
      if (res.success) {
        toast.success("保存成功");
      } else {
        toast.error("保存失败");
      }
    } catch (error) {
      console.error("保存异常:", error);
      toast.error("保存异常");
    }
  };

  return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>代码模板</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          <div className="space-y-2">
            <Label htmlFor="language-select">编程语言</Label>
            <select
              id="language-select"
              className="block w-full p-2 border border-gray-300 rounded-md dark:bg-gray-800 dark:border-gray-700"
              value={codeTemplate.language}
              onChange={(e) => handleLanguageChange(e.target.value)}
            >
              {templates.map((t) => (
                <option key={t.language} value={t.language}>
                  {t.language.toUpperCase()}
                </option>
              ))}
            </select>
          </div>

          <div className="space-y-2">
            <Label htmlFor="code-editor">代码模板内容</Label>
            <div className="border rounded-md h-[500px]">
              <CoreEditor
                language={codeTemplate.language}
                value={codeTemplate.content}
                path={`/${problemId}.${codeTemplate.language}`}
                onChange={(value) =>
                  setCodeTemplate({ ...codeTemplate, content: value || "" })
                }
              />
            </div>
          </div>

          <Button onClick={handleSave}>保存代码模板</Button>
        </div>
      </CardContent>
    </Card>
  );
}