<script setup>
import { ref, computed, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

import {
  GRS_API_KEY,
  QUESTION_API_URL,
  QUESTION_MODEL,
  QUESTION_TEMPERATURE,
  QUESTION_MAX_TOKENS,
  QUESTION_GENERATOR_PROMPT,
} from "@/config/index.js";

const router = useRouter();

const API_KEY = GRS_API_KEY;
const API_URL = QUESTION_API_URL;

// ── 状态 ──
const status = ref("idle"); // 'idle' | 'generating' | 'done' | 'error'
const errorMsg = ref("");
const rawContent = ref("");
const cancelTokenSource = ref(null);

// ── 参数配置 ──
const difficulty = ref("medium"); // 'easy' | 'medium' | 'hard'
const questionCount = ref(5);

// 新增维度：教材章节、知识点、题型
const textbookChapter = ref(""); // 教材章节（预设）
const customTextbookChapter = ref(""); // 自定义教材章节输入
const selectedKnowledgePoints = ref([]); // 选中的知识点
const customKnowledgePoint = ref(""); // 自定义知识点输入
const questionFormat = ref("单项选择"); // 题型（预设）
const customQuestionFormat = ref(""); // 自定义题型输入
const answerFormat = ref("单选题"); // 答题形式：单选题、填空题、写作题
const examType = ref(""); // 试题类型

// ── 配置选项 ──
const DIFFICULTY_OPTIONS = [
  { value: "very_easy", label: "容易", color: "#10b981" },
  { value: "easy", label: "较易", color: "#34d399" },
  { value: "medium", label: "适中", color: "#f59e0b" },
  { value: "hard", label: "较难", color: "#f97316" },
  { value: "very_hard", label: "困难", color: "#ef4444" },
];

// 教材章节预设选项
const CHAPTER_OPTIONS = [
  { value: "Starter Unit1 You and Me", label: "Starter Unit1 You and Me" },
  { value: "Starter Unit2 Keep Tidy", label: "Starter Unit2 Keep Tidy" },
  { value: "Starter Unit3 Welcome!", label: "Starter Unit3 Welcome!" },
  { value: "Unit 1 You and Me", label: "Unit 1 You and Me" },
  { value: "Unit 2 We're Family!", label: "Unit 2 We're Family!" },
  { value: "Unit 3 My School", label: "Unit 3 My School" },
];

// 知识点预设选项
const KNOWLEDGE_POINT_OPTIONS = [
  { value: "语法", label: "语法" },
  { value: "词汇", label: "词汇" },
  { value: "冠词", label: "冠词" },
  { value: "不定冠词", label: "不定冠词" },
  { value: "定冠词", label: "定冠词" },
  { value: "名词", label: "名词" },
  { value: "动词", label: "动词" },
  { value: "形容词", label: "形容词" },
  { value: "代词", label: "代词" },
  { value: "介词", label: "介词" },
  { value: "时态", label: "时态" },
  { value: "一般现在时", label: "一般现在时" },
  { value: "现在进行时", label: "现在进行时" },
  { value: "一般过去时", label: "一般过去时" },
  { value: "句型结构", label: "句型结构" },
  { value: "阅读理解", label: "阅读理解" },
  { value: "写作", label: "写作" },
];

// 题型预设选项
const FORMAT_OPTIONS = [
  { value: "完形填空", label: "完形填空" },
  { value: "句型转换", label: "句型转换" },
  { value: "词汇运用", label: "词汇运用" },
  { value: "翻译句子", label: "翻译句子" },
  { value: "阅读理解", label: "阅读理解" },
  { value: "书面表达", label: "书面表达" },
  { value: "短文填空", label: "短文填空" },
  { value: "语法填空", label: "语法填空" },
  { value: "选词填空", label: "选词填空" },
];

// 答题形式选项
const ANSWER_FORMAT_OPTIONS = [
  { value: "单选题", label: "单选题" },
  { value: "填空题", label: "填空题" },
  { value: "写作题", label: "写作题" },
];

// 试题类型选项
const EXAM_TYPE_OPTIONS = [
  { value: "中考", label: "中考" },
  { value: "单元同义句", label: "单元同义句" },
  { value: "高频考点", label: "高频考点" },
];

// 切换知识点选中状态
const toggleKnowledgePoint = (value) => {
  const index = selectedKnowledgePoints.value.indexOf(value);
  if (index > -1) {
    selectedKnowledgePoints.value.splice(index, 1);
  } else {
    selectedKnowledgePoints.value.push(value);
  }
};

// ── 解析试题内容 ──
const parsedQuestions = computed(() => {
  const raw = rawContent.value;
  if (!raw) return [];

  const questions = [];
  const questionBlocks = raw.split(/##\s*题目\s*\d+/i);

  questionBlocks.forEach((block, index) => {
    if (index === 0) return; // 跳过第一个空块

    const question = {
      id: index,
      type: extractField(block, "题目类型"),
      difficulty: extractField(block, "难度等级"),
      content: extractField(block, "题目内容"),
      options: extractOptions(block),
      answer: extractField(block, "正确答案"),
      explanation: extractField(block, "解析"),
      knowledgePoint: extractField(block, "知识点"),
    };

    if (question.content) {
      questions.push(question);
    }
  });

  return questions;
});

function extractField(text, fieldName) {
  const regex = new RegExp(
    `\\*\\*${fieldName}\\*\\*[：:]\\s*([\\s\\S]*?)(?=\\*\\*|$)`,
    "i"
  );
  const match = text.match(regex);
  if (!match) return "";

  let content = match[1].trim();
  // 清理可能混入的下一个字段
  content = content.split(/\*\*/)[0].trim();
  return content;
}

function extractOptions(text) {
  const options = [];

  // 先尝试提取"选项"字段的内容块
  const optionsBlockMatch = text.match(
    /\*\*选项\*\*[：:]\s*([\s\S]*?)(?=\*\*正确答案\*\*|$)/i
  );

  if (optionsBlockMatch) {
    const optionsBlock = optionsBlockMatch[1];

    // 在选项块中提取各个选项
    const lines = optionsBlock.split("\n");
    for (const line of lines) {
      const match = line.match(/^([A-D])[\.．。:：]\s*(.+)$/i);
      if (match) {
        options.push({
          label: match[1].toUpperCase(),
          content: match[2].trim(),
        });
      }
    }
  }

  return options;
}

// ── 构建请求体 ──
const buildRequestBody = () => {
  const difficultyLabel =
    DIFFICULTY_OPTIONS.find((d) => d.value === difficulty.value)?.label ||
    "中等";

  // 构建知识点字符串：预设选项 + 自定义输入
  const allKnowledgePoints = [
    ...selectedKnowledgePoints.value,
    ...(customKnowledgePoint.value ? [customKnowledgePoint.value] : []),
  ];
  const knowledgePointStr =
    allKnowledgePoints.length > 0 ? allKnowledgePoints.join("、") : "";

  // 教材章节：优先使用自定义输入，否则使用预设选择
  const chapterStr = customTextbookChapter.value || textbookChapter.value || "";

  // 题型：优先使用自定义输入，否则使用预设选择
  const formatStr = customQuestionFormat.value || questionFormat.value || "";

  // 构建教材章节约束提示
  const chapterConstraint = chapterStr
    ? `\n\n【重要约束】教材章节为"${chapterStr}"，所有试题内容必须严格限定在该章节的知识范围内：
- 仅使用该章节已学过的词汇、短语和表达方式
- 仅考查该章节涉及的语法点和句型结构
- 绝对禁止出现超出该章节范围的知识点
- 如果试题类型为"中考"，则按中考标准出题，但仍需体现该章节的核心内容`
    : "";

  const userPrompt = `请生成 ${
    questionCount.value
  } 道${difficultyLabel}难度的英语试题。

要求：
1. 题型：${formatStr}
2. 答题形式：${answerFormat.value}
3. 难度等级：${difficultyLabel}
4. 题目数量：${questionCount.value} 道
${examType.value ? `5. 试题类型：${examType.value}` : ""}
${chapterStr ? `6. 教材章节：${chapterStr}` : ""}
${knowledgePointStr ? `7. 知识点：${knowledgePointStr}` : ""}
${chapterConstraint}

请严格按照指定的输出格式和答题形式生成试题。严禁出现超出指定范围的内容。`;

  return {
    model: QUESTION_MODEL,
    messages: [
      { role: "system", content: QUESTION_GENERATOR_PROMPT },
      { role: "user", content: userPrompt },
    ],
    temperature: QUESTION_TEMPERATURE,
    max_tokens: QUESTION_MAX_TOKENS,
    stream: true,
  };
};

// ── 提取 SSE delta 文本 ──
const extractTextDelta = (chunk) => {
  let result = "";
  const lines = chunk.split("\n");
  for (const line of lines) {
    if (!line.startsWith("data: ")) continue;
    const jsonStr = line.slice(6).trim();
    if (!jsonStr || jsonStr === "[DONE]") continue;
    try {
      const data = JSON.parse(jsonStr);
      const text = data?.choices?.[0]?.delta?.content;
      if (text) result += text;
    } catch {
      // 忽略解析失败的行
    }
  }
  return result;
};

// ── 过滤 HexString思考块 ──
const filterThinkBlocks = (text) => {
  let filtered = text.replace(/HexString[\s\S]*?<\/think>/g, "");
  filtered = filtered.replace(/HexString[\s\S]*$/, "");
  return filtered;
};

// ── 开始生成 ──
const canGenerate = computed(() => {
  return (
    status.value !== "generating" &&
    questionCount.value >= 1 &&
    questionCount.value <= 20
  );
});

const startGeneration = async () => {
  if (!canGenerate.value) return;

  status.value = "generating";
  errorMsg.value = "";
  rawContent.value = "";

  cancelTokenSource.value = axios.CancelToken.source();
  let lastLength = 0;

  await axios
    .post(API_URL, buildRequestBody(), {
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${API_KEY}`,
      },
      responseType: "text",
      cancelToken: cancelTokenSource.value.token,
      onDownloadProgress: (event) => {
        const text = (event.target || event.event?.target)?.responseText || "";
        if (!text) return;
        const newChunk = text.slice(lastLength);
        lastLength = text.length;
        const delta = extractTextDelta(newChunk);
        if (delta) {
          rawContent.value = filterThinkBlocks(rawContent.value + delta);
        }
      },
    })
    .then(() => {
      status.value = "done";
    })
    .catch((err) => {
      if (axios.isCancel(err)) return;
      console.error(err);
      errorMsg.value =
        err?.response?.data?.error?.message ||
        err.message ||
        "请求失败，请稍后重试";
      status.value = "error";
    });
};

const resetAll = () => {
  status.value = "idle";
  rawContent.value = "";
  errorMsg.value = "";
};

const loadExample = () => {
  difficulty.value = "medium";
  questionCount.value = 3;
  answerFormat.value = "单选题";
  examType.value = "";
  textbookChapter.value = "Starter Unit2 Keep Tidy";
  customTextbookChapter.value = "";
  selectedKnowledgePoints.value = ["语法", "冠词", "不定冠词"];
  customKnowledgePoint.value = "";
  questionFormat.value = "句型转换";
  customQuestionFormat.value = "";
};

const goBack = () => router.back();

onUnmounted(() => {
  if (cancelTokenSource.value) {
    cancelTokenSource.value.cancel("组件卸载，取消请求");
  }
});
</script>

<template>
  <div class="page-container">
    <!-- Nav Bar -->
    <div class="nav-bar">
      <button class="back-btn" @click="goBack">
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2.2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <polyline points="15 18 9 12 15 6" />
        </svg>
        <span>返回</span>
      </button>
      <h1 class="nav-title">AI 试题生成</h1>
      <div style="width: 72px"></div>
    </div>

    <!-- Error Banner -->
    <div v-if="errorMsg" class="error-banner">
      <span>{{ errorMsg }}</span>
      <button class="error-close" @click="errorMsg = ''">✕</button>
    </div>

    <!-- Main Layout: Left + Right -->
    <div class="main-layout">
      <!-- Left Panel: Config -->
      <div class="left-panel">
        <div class="config-card">
          <div class="config-header">
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <circle cx="12" cy="12" r="3" />
              <path
                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
              />
            </svg>
            <span>参数配置</span>
          </div>

          <div class="config-body">
            <!-- 难度等级 -->
            <div class="config-item">
              <label class="config-label">难度等级</label>
              <div class="difficulty-group">
                <button
                  v-for="opt in DIFFICULTY_OPTIONS"
                  :key="opt.value"
                  class="difficulty-btn"
                  :class="{ active: difficulty === opt.value }"
                  :style="{ '--accent-color': opt.color }"
                  @click="difficulty = opt.value"
                  :disabled="status === 'generating'"
                >
                  {{ opt.label }}
                </button>
              </div>
            </div>

            <!-- 题目数量 -->
            <div class="config-item">
              <label class="config-label">
                题目数量
                <span class="count-value">{{ questionCount }} 道</span>
              </label>
              <input
                type="range"
                v-model.number="questionCount"
                min="1"
                max="20"
                class="range-slider"
                :disabled="status === 'generating'"
              />
              <div class="range-labels">
                <span>1</span>
                <span>10</span>
                <span>20</span>
              </div>
            </div>

            <!-- 试题类型 -->
            <div class="config-item">
              <label class="config-label">试题类型（可选）</label>
              <div class="exam-type-group">
                <button
                  v-for="opt in EXAM_TYPE_OPTIONS"
                  :key="opt.value"
                  class="exam-type-btn"
                  :class="{ active: examType === opt.value }"
                  @click="examType = examType === opt.value ? '' : opt.value"
                  :disabled="status === 'generating'"
                >
                  {{ opt.label }}
                </button>
              </div>
            </div>

            <!-- 答题形式 -->
            <div class="config-item">
              <label class="config-label">答题形式</label>
              <div class="answer-format-group">
                <button
                  v-for="opt in ANSWER_FORMAT_OPTIONS"
                  :key="opt.value"
                  class="answer-format-btn"
                  :class="{ active: answerFormat === opt.value }"
                  @click="answerFormat = opt.value"
                  :disabled="status === 'generating'"
                >
                  {{ opt.label }}
                </button>
              </div>
            </div>

            <!-- 教材章节 -->
            <div class="config-item">
              <label class="config-label">教材章节（可选）</label>
              <select
                v-model="textbookChapter"
                class="select-input"
                :disabled="status === 'generating'"
              >
                <option value="">请选择教材章节</option>
                <option
                  v-for="opt in CHAPTER_OPTIONS"
                  :key="opt.value"
                  :value="opt.value"
                >
                  {{ opt.label }}
                </option>
              </select>
              <input
                type="text"
                v-model="customTextbookChapter"
                class="topic-input mt-2"
                placeholder="或输入自定义教材章节..."
                :disabled="status === 'generating'"
              />
            </div>

            <!-- 知识点 -->
            <div class="config-item">
              <label class="config-label">知识点（可多选）</label>
              <div class="knowledge-grid">
                <button
                  v-for="opt in KNOWLEDGE_POINT_OPTIONS"
                  :key="opt.value"
                  class="knowledge-btn"
                  :class="{
                    active: selectedKnowledgePoints.includes(opt.value),
                  }"
                  @click="toggleKnowledgePoint(opt.value)"
                  :disabled="status === 'generating'"
                >
                  {{ opt.label }}
                </button>
              </div>
              <input
                type="text"
                v-model="customKnowledgePoint"
                class="topic-input mt-2"
                placeholder="或输入自定义知识点..."
                :disabled="status === 'generating'"
              />
            </div>

            <!-- 题型 -->
            <div class="config-item">
              <label class="config-label">题型</label>
              <select
                v-model="questionFormat"
                class="select-input"
                :disabled="status === 'generating'"
              >
                <option
                  v-for="opt in FORMAT_OPTIONS"
                  :key="opt.value"
                  :value="opt.value"
                >
                  {{ opt.label }}
                </option>
              </select>
              <input
                type="text"
                v-model="customQuestionFormat"
                class="topic-input mt-2"
                placeholder="或输入自定义题型..."
                :disabled="status === 'generating'"
              />
            </div>

            <!-- 示例按钮 -->
            <button
              class="example-btn"
              @click="loadExample"
              :disabled="status === 'generating'"
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path
                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
                />
                <polyline points="14 2 14 8 20 8" />
                <line x1="16" y1="13" x2="8" y2="13" />
                <line x1="16" y1="17" x2="8" y2="17" />
              </svg>
              <span>加载示例</span>
            </button>
          </div>
        </div>

        <!-- Generate Button -->
        <div class="btn-wrap">
          <button
            class="generate-btn"
            :disabled="!canGenerate"
            @click="startGeneration"
          >
            <span v-if="status === 'generating'" class="btn-spinner"></span>
            <svg
              v-else
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
            </svg>
            <span>{{
              status === "generating" ? "生成中..." : "开始生成"
            }}</span>
          </button>
          <button
            v-if="status === 'done' || status === 'error'"
            class="reset-btn"
            @click="resetAll"
          >
            重新生成
          </button>
        </div>
      </div>

      <!-- Right Panel: Result -->
      <div class="right-panel">
        <!-- Empty State -->
        <div v-if="status === 'idle'" class="empty-state">
          <div class="empty-icon">
            <svg
              width="48"
              height="48"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
            </svg>
          </div>
          <p class="empty-title">等待生成</p>
          <p class="empty-hint">在左侧配置参数，点击「开始生成」创建试题</p>
        </div>

        <!-- Result Area -->
        <div
          v-else-if="status === 'generating' || status === 'done'"
          class="result-area"
        >
          <div class="result-header">
            <div class="result-title-wrap">
              <div
                class="result-dot"
                :class="{ pulse: status === 'generating' }"
              ></div>
              <span class="result-title">{{
                status === "generating" ? "AI 正在生成..." : "生成完成"
              }}</span>
            </div>
            <span
              v-if="parsedQuestions.length > 0"
              class="question-count-badge"
            >
              已生成 {{ parsedQuestions.length }} 题
            </span>
          </div>

          <div class="questions-list">
            <div
              v-for="(q, idx) in parsedQuestions"
              :key="q.id"
              class="question-card"
              :style="{ animationDelay: `${idx * 0.1}s` }"
            >
              <div class="question-header">
                <div class="question-number">题目 {{ q.id }}</div>
                <div class="question-meta">
                  <span class="meta-tag type-tag">{{ q.type }}</span>
                  <span class="meta-tag difficulty-tag">{{
                    q.difficulty
                  }}</span>
                </div>
              </div>

              <div class="question-content">
                <p class="content-text">{{ q.content }}</p>
              </div>

              <div
                v-if="q.options && q.options.length > 0"
                class="options-grid"
              >
                <div
                  v-for="opt in q.options"
                  :key="opt.label"
                  class="option-item"
                >
                  <span class="option-label">{{ opt.label }}.</span>
                  <span class="option-text">{{ opt.content }}</span>
                </div>
              </div>

              <div class="answer-section">
                <div class="answer-row">
                  <span class="answer-label">正确答案：</span>
                  <span class="answer-value">{{ q.answer }}</span>
                </div>
              </div>

              <div class="explanation-section">
                <div class="explanation-header">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <circle cx="12" cy="12" r="10" />
                    <line x1="12" y1="16" x2="12" y2="12" />
                    <line x1="12" y1="8" x2="12.01" y2="8" />
                  </svg>
                  <span>解析</span>
                </div>
                <p class="explanation-text">{{ q.explanation }}</p>
              </div>

              <div class="knowledge-section">
                <span class="knowledge-label">知识点：</span>
                <span class="knowledge-value">{{ q.knowledgePoint }}</span>
              </div>
            </div>

            <!-- 生成中的占位符 -->
            <div v-if="status === 'generating'" class="loading-card">
              <div class="loading-dots">
                <span class="dot"></span>
                <span class="dot"></span>
                <span class="dot"></span>
              </div>
              <p class="loading-text">正在生成试题，请稍候...</p>
            </div>
          </div>
        </div>

        <!-- Error State -->
        <div v-else-if="status === 'error'" class="empty-state error-state">
          <div class="empty-icon error-icon">
            <svg
              width="48"
              height="48"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <circle cx="12" cy="12" r="10" />
              <line x1="12" y1="8" x2="12" y2="12" />
              <line x1="12" y1="16" x2="12.01" y2="16" />
            </svg>
          </div>
          <p class="empty-title">生成失败</p>
          <p class="empty-hint">请检查网络连接后重试</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-container {
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  font-family: "Inter", "PingFang SC", -apple-system, sans-serif;
}

/* Nav */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--card-border);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.back-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  transition: all 0.2s;
}
.back-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
}
.nav-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Main Layout */
.main-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* Left Panel */
.left-panel {
  width: 380px;
  min-width: 320px;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-right: 1px solid var(--card-border);
  overflow-y: auto;
  flex-shrink: 0;
}

/* Right Panel */
.right-panel {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.right-panel::-webkit-scrollbar {
  width: 8px;
}

.right-panel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin: 4px 0;
}

.right-panel::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.3);
  border-radius: 4px;
  transition: background 0.2s;
}

.right-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.5);
}

/* Empty State */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.5;
}
.empty-icon {
  color: var(--text-secondary);
  opacity: 0.4;
}
.empty-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}
.empty-hint {
  font-size: 0.875rem;
  margin: 0;
  text-align: center;
}
.error-state {
  opacity: 1;
}
.error-icon {
  color: #f87171;
  opacity: 1;
}
.error-state .empty-title {
  color: #fca5a5;
}

/* Error Banner */
.error-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
  padding: 0.75rem 1.5rem;
  color: #fca5a5;
  font-size: 0.9rem;
  animation: fadeInUp 0.2s ease;
  flex-shrink: 0;
}
.error-close {
  background: none;
  border: none;
  color: #fca5a5;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.error-close:hover {
  opacity: 1;
}

/* Config Card */
.config-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.config-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--card-border);
  color: #10b981;
  font-weight: 600;
  font-size: 1rem;
}

.config-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
  min-height: 0;
}

.config-body::-webkit-scrollbar {
  width: 6px;
}

.config-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.config-body::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.3);
  border-radius: 3px;
  transition: background 0.2s;
}

.config-body::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.5);
}

.config-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.config-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.count-value {
  font-size: 0.85rem;
  color: #10b981;
  font-weight: 600;
}

/* Difficulty Selection */
.difficulty-group {
  display: flex;
  gap: 0.75rem;
}

.difficulty-btn {
  flex: 1;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.difficulty-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--accent-color);
}
.difficulty-btn.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-color);
  color: var(--accent-color);
}
.difficulty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Answer Format Selection */
.answer-format-group {
  display: flex;
  gap: 0.75rem;
}

.answer-format-btn {
  flex: 1;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.answer-format-btn:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}
.answer-format-btn.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #10b981;
}
.answer-format-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Exam Type Selection */
.exam-type-group {
  display: flex;
  gap: 0.75rem;
}

.exam-type-btn {
  flex: 1;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.exam-type-btn:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}
.exam-type-btn.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #10b981;
}
.exam-type-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Range Slider */
.range-slider {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: #10b981;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
}
.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.range-slider:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.6;
}

/* Topic Input */
.topic-input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.topic-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.5;
}
.topic-input:focus {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.topic-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Select Input */
.select-input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.select-input:focus {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.select-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.select-input option {
  background: #1a1a2e;
  color: var(--text-primary);
}

/* Knowledge Points Grid */
.knowledge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.knowledge-btn {
  padding: 0.5rem 0.875rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.knowledge-btn:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10b981;
}
.knowledge-btn.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #10b981;
}
.knowledge-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mt-2 {
  margin-top: 0.75rem;
}

/* Example Button */
.example-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 10px;
  color: #10b981;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.example-btn:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.2);
  transform: translateY(-1px);
}
.example-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Generate Button */
.btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.generate-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.875rem 2.5rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35);
}
.generate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.5);
}
.generate-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.reset-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 0.875rem 1.5rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s;
}
.reset-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}
.btn-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Result Area */
.result-area {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.result-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.result-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}
.result-dot.pulse {
  animation: pulse 1.2s ease-in-out infinite;
}
.result-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.question-count-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Questions List */
.questions-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.question-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
  animation: fadeInUp 0.4s ease both;
}

.question-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: rgba(16, 185, 129, 0.04);
  border-bottom: 1px solid var(--card-border);
}

.question-number {
  font-size: 1rem;
  font-weight: 600;
  color: #10b981;
}

.question-meta {
  display: flex;
  gap: 0.5rem;
}

.meta-tag {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.type-tag {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.difficulty-tag {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.question-content {
  padding: 1.25rem;
}

.content-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-primary);
  margin: 0;
  white-space: pre-wrap;
}

.options-grid {
  padding: 0 1.25rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.option-item {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.option-label {
  font-weight: 600;
  color: #10b981;
  flex-shrink: 0;
}

.option-text {
  color: var(--text-primary);
  font-size: 0.9rem;
}

.answer-section {
  padding: 1rem 1.25rem;
  background: rgba(16, 185, 129, 0.06);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}

.answer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.answer-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.answer-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #10b981;
}

.explanation-section {
  padding: 1.25rem;
}

.explanation-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #10b981;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.explanation-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

.knowledge-section {
  padding: 0.875rem 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--card-border);
}

.knowledge-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.knowledge-value {
  font-size: 0.85rem;
  color: var(--text-primary);
}

/* Loading Card */
.loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(16, 185, 129, 0.3);
  border-radius: 16px;
}

.loading-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 1rem;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.4);
  animation: bounce 1.2s ease-in-out infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

.loading-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Animations */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.75);
  }
}
@keyframes bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
}

@media (max-width: 768px) {
  .main-layout {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  .left-panel {
    width: 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--card-border);
    overflow-y: visible;
  }
  .right-panel {
    padding: 1.25rem 1rem;
  }
  .options-grid {
    grid-template-columns: 1fr;
  }
}
</style>
