import { useCallback, useEffect, useRef, useState } from "react";
import { useMutation, useQuery } from "@tanstack/react-query";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  Wand2,
  BookOpen,
  Headphones,
  PenTool,
  Mic,
  Layers,
  Briefcase,
  ChevronDown,
  Plus,
  Minus,
  X,
  Loader2,
  RotateCcw,
  Eye,
  Send,
  SkipForward,
  Upload,
  FileText,
  Play,
  Video,
  Sparkles,
  Settings2,
  ListChecks,
} from "lucide-react";
import AiTipBanner from "@/components/ai/AiTipBanner";
import { generationService } from "@/services/generation.service";
import { mediaService, type Avatar } from "@/services/media.service";
import { examsService } from "@/services/exams.service";
import { useToast } from "@/hooks/use-toast";

type ModuleKey = "reading" | "listening" | "writing" | "speaking" | "level" | "industry";

interface ModuleInfo {
  key: ModuleKey;
  label: string;
  icon: React.ReactNode;
  color: string;
  bgColor: string;
}

const MODULES: ModuleInfo[] = [
  { key: "reading", label: "Reading", icon: <BookOpen className="h-4 w-4" />, color: "text-blue-600", bgColor: "bg-blue-50 border-blue-200" },
  { key: "listening", label: "Listening", icon: <Headphones className="h-4 w-4" />, color: "text-orange-600", bgColor: "bg-orange-50 border-orange-200" },
  { key: "writing", label: "Writing", icon: <PenTool className="h-4 w-4" />, color: "text-green-600", bgColor: "bg-green-50 border-green-200" },
  { key: "speaking", label: "Speaking", icon: <Mic className="h-4 w-4" />, color: "text-pink-600", bgColor: "bg-pink-50 border-pink-200" },
  { key: "level", label: "Level", icon: <Layers className="h-4 w-4" />, color: "text-purple-600", bgColor: "bg-purple-50 border-purple-200" },
  { key: "industry", label: "Industry", icon: <Briefcase className="h-4 w-4" />, color: "text-amber-700", bgColor: "bg-amber-50 border-amber-200" },
];

const MODULE_KEYS: ModuleKey[] = MODULES.map((m) => m.key);
const CEFR_LEVELS = ["A1", "A2", "B1", "B2", "C1", "C2"];

const READING_EXERCISE_TYPES = [
  { key: "mcq", label: "Multiple Choice" },
  { key: "fill_blanks", label: "Fill Blanks" },
  { key: "write_blanks", label: "Write Blanks" },
  { key: "true_false", label: "True False" },
  { key: "paragraph_match", label: "Paragraph Match" },
];

const LISTENING_SECTION_TYPES = [
  { key: "social_conversation", label: "Social Conversation" },
  { key: "social_monologue", label: "Social Monologue" },
  { key: "academic_discussion", label: "Academic Discussion" },
  { key: "academic_monologue", label: "Academic Monologue" },
];

const LISTENING_EXERCISE_TYPES = [
  { key: "mcq", label: "Multiple Choice" },
  { key: "write_blanks_questions", label: "Write Blanks: Questions" },
  { key: "true_false", label: "True False" },
  { key: "write_blanks_fill", label: "Write Blanks: Fill" },
  { key: "write_blanks_form", label: "Write Blanks: Form" },
];

const DEFAULT_AVATARS: Avatar[] = [
  { id: "gia", name: "Gia", gender: "female" },
  { id: "vadim", name: "Vadim", gender: "male" },
  { id: "orhan", name: "Orhan", gender: "male" },
  { id: "flora", name: "Flora", gender: "female" },
  { id: "scarlett", name: "Scarlett", gender: "female" },
  { id: "parker", name: "Parker", gender: "male" },
  { id: "ethan", name: "Ethan", gender: "male" },
];

interface Exercise {
  type: string;
  instructions: string;
  prompt: string;
  options: string[];
  correct_answer: string;
  explanation: string;
  marks: number;
  difficulty?: string;
}

interface PassageState {
  text: string;
  category: string;
  type: string;
  divider: string;
  exerciseTypes: string[];
  exercises: Exercise[];
  editing: boolean;
}

interface ListeningSectionState {
  type: string;
  category: string;
  divider: string;
  context: string;
  audioUrl: string;
  exerciseTypes: string[];
  exercises: Exercise[];
  editing: boolean;
}

interface WritingTaskState {
  instructions: string;
  category: string;
  type: string;
  divider: string;
  wordLimit: number;
  marks: number;
  editing: boolean;
}

interface SpeakingPartState {
  type: string;
  category: string;
  divider: string;
  script: string;
  videoUrl: string;
  avatarId: string;
  marks: number;
  topics: string[];
  editing: boolean;
}

interface ModuleState {
  timer: number;
  difficulty: string[];
  accessType: string;
  entity: string;
  approvalWorkflow: string;
  rubricGroup: string;
  rubricCriteria: string;
  totalMarks: number;
  gradingSystem: string;
  shuffling: boolean;
  passages: PassageState[];
  listeningSections: ListeningSectionState[];
  writingTasks: WritingTaskState[];
  speakingParts: SpeakingPartState[];
}

function defaultModuleState(mod: ModuleKey): ModuleState {
  return {
    timer: 5,
    difficulty: [mod === "reading" ? "B2" : mod === "listening" ? "A2" : mod === "writing" ? "A1" : "B1"],
    accessType: "private",
    entity: "",
    approvalWorkflow: "",
    rubricGroup: "",
    rubricCriteria: "",
    totalMarks: 0,
    gradingSystem: "",
    shuffling: false,
    passages: [{ text: "", category: "", type: "general", divider: "", exerciseTypes: [], exercises: [], editing: false }],
    listeningSections: [{ type: "social_conversation", category: "", divider: "", context: "", audioUrl: "", exerciseTypes: [], exercises: [], editing: false }],
    writingTasks: [{ instructions: "", category: "", type: "", divider: "", wordLimit: 150, marks: 0, editing: false }],
    speakingParts: [{ type: "speaking_1", category: "", divider: "", script: "", videoUrl: "", avatarId: "", marks: 0, topics: ["", ""], editing: false }],
  };
}

export default function GenerationPage() {
  const { toast } = useToast();
  const [title, setTitle] = useState("");
  const [examLabel, setExamLabel] = useState("");
  const [examStructure, setExamStructure] = useState("");
  const [selectedModules, setSelectedModules] = useState<Set<ModuleKey>>(new Set());
  const [activeModule, setActiveModule] = useState<ModuleKey | null>(null);
  const [moduleStates, setModuleStates] = useState<Record<string, ModuleState>>({});
  const [previewOpen, setPreviewOpen] = useState(false);
  const [editingExercise, setEditingExercise] = useState<{ passageIndex: number; exerciseIndex: number } | null>(null);
  const [exerciseDraft, setExerciseDraft] = useState<Exercise | null>(null);

  const [exerciseWizard, setExerciseWizard] = useState<{
    open: boolean;
    passageIndex: number;
    step: number; // 0 = configure, 1 = generating/done
    types: Record<string, { enabled: boolean; count: number; difficulty: string; instructions: string }>;
  }>({
    open: false,
    passageIndex: 0,
    step: 0,
    types: {},
  });

  const DEFAULT_INSTRUCTIONS: Record<string, string> = {
    mcq: "Read the passage carefully and choose the best answer for each question.",
    fill_blanks: "Complete each sentence by selecting the correct word from the options provided.",
    write_blanks: "Fill in each blank with a suitable word or phrase based on the passage.",
    true_false: "Read each statement and decide whether it is True, False, or Not Given based on the passage.",
    paragraph_match: "Match each heading or statement to the correct paragraph from the passage.",
  };

  const openExerciseWizard = (pi: number) => {
    const st = getModuleState("reading");
    const existing = st.passages[pi]?.exerciseTypes ?? [];
    const types: Record<string, { enabled: boolean; count: number; difficulty: string; instructions: string }> = {};
    for (const et of READING_EXERCISE_TYPES) {
      types[et.key] = {
        enabled: existing.includes(et.key) || existing.length === 0,
        count: 5,
        difficulty: st.difficulty[0] || "B2",
        instructions: DEFAULT_INSTRUCTIONS[et.key] || "",
      };
    }
    setExerciseWizard({ open: true, passageIndex: pi, step: 0, types });
  };

  const wizardTotalQuestions = Object.values(exerciseWizard.types).reduce(
    (sum, t) => sum + (t.enabled ? t.count : 0), 0
  );
  const wizardEnabledTypes = Object.entries(exerciseWizard.types).filter(([, t]) => t.enabled);

  const structuresQ = useQuery({
    queryKey: ["exam-structures"],
    queryFn: () => examsService.listStructures({}),
  });
  const structures = structuresQ.data?.items ?? [];

  const getModuleState = useCallback((mod: ModuleKey): ModuleState => {
    return moduleStates[mod] ?? defaultModuleState(mod);
  }, [moduleStates]);

  const updateModuleState = useCallback((mod: ModuleKey, patch: Partial<ModuleState>) => {
    setModuleStates((prev) => ({
      ...prev,
      [mod]: { ...(prev[mod] ?? defaultModuleState(mod)), ...patch },
    }));
  }, []);

  const toggleModule = (mod: ModuleKey) => {
    setSelectedModules((prev) => {
      const next = new Set(prev);
      if (next.has(mod)) {
        next.delete(mod);
        if (activeModule === mod) setActiveModule(null);
      } else {
        next.add(mod);
        setActiveModule(mod);
      }
      return next;
    });
  };

  const currentState = activeModule ? getModuleState(activeModule) : null;

  const generatePassageMut = useMutation({
    mutationFn: (params: { index: number; topic: string; difficulty: string; wordCount: number }) =>
      generationService.generatePassage({
        topic: params.topic,
        difficulty: params.difficulty,
        word_count: params.wordCount,
      }),
    onSuccess: (res, vars) => {
      if (!activeModule) return;
      const st = getModuleState(activeModule);
      const passages = [...st.passages];
      const r = res as Record<string, unknown>;
      const passageText = (r.passage as string) ?? (r.text as string) ?? JSON.stringify(res);
      passages[vars.index] = { ...passages[vars.index], text: passageText };
      updateModuleState(activeModule, { passages });
      toast({ title: "Passage generated", description: `${passageText.length} characters` });
    },
    onError: (err: Error) => toast({ variant: "destructive", title: "Generation failed", description: err.message }),
  });

  const generateExercisesMut = useMutation({
    mutationFn: (params: {
      module: ModuleKey;
      passageIndex: number;
      types: string[];
      typeCounts: Record<string, number>;
      typeInstructions: Record<string, string>;
      passageText: string;
      difficulty: string;
    }) => {
      const mod = params.module === "level" || params.module === "industry" ? "reading" : params.module;
      const totalCount = Object.values(params.typeCounts).reduce((s, n) => s + n, 0);
      return generationService.generateExercises(mod as "reading" | "listening" | "writing" | "speaking", {
        passage_index: params.passageIndex,
        exercise_types: params.types,
        count_per_type: totalCount,
        passage_text: params.passageText,
        type_counts: params.typeCounts,
        type_instructions: params.typeInstructions,
        difficulty: params.difficulty,
      } as Record<string, unknown> & { passage_index: number; exercise_types: string[] });
    },
    onSuccess: (res, vars) => {
      const st = getModuleState(vars.module);
      const raw = Array.isArray((res as Record<string, unknown>).questions) ? (res as Record<string, unknown>).questions as Record<string, unknown>[] : [];
      const items: Exercise[] = raw.map((q) => ({
        type: String(q.type || vars.types?.[0] || "mcq"),
        instructions: String(q.instructions || vars.typeInstructions?.[String(q.type)] || ""),
        prompt: String(q.prompt || q.question || ""),
        options: Array.isArray(q.options) ? q.options.map(String) : [],
        correct_answer: String(q.correct_answer || q.answer || ""),
        explanation: String(q.explanation || ""),
        marks: Number(q.marks) || 1,
        difficulty: q.difficulty ? String(q.difficulty) : undefined,
      }));
      if (vars.module === "reading") {
        const passages = [...st.passages];
        passages[vars.passageIndex] = {
          ...passages[vars.passageIndex],
          exercises: [...passages[vars.passageIndex].exercises, ...items],
          exerciseTypes: vars.types,
        };
        updateModuleState(vars.module, { passages });
      }
      setExerciseWizard((prev) => ({ ...prev, step: 1 }));
      toast({ title: `${items.length} exercises generated` });
    },
    onError: (err: Error) => {
      toast({ variant: "destructive", title: "Generation failed", description: err.message });
    },
  });

  const generateAudioMut = useMutation({
    mutationFn: (params: { text: string; sectionIndex: number }) =>
      mediaService.generateListeningAudio({ text: params.text }),
    onSuccess: (res, vars) => {
      if (activeModule !== "listening") return;
      const st = getModuleState("listening");
      const sections = [...st.listeningSections];
      let url = res.audio_url || "";
      if (!url && res.audio_base64) {
        const ct = res.content_type || "audio/mpeg";
        url = `data:${ct};base64,${res.audio_base64}`;
      }
      sections[vars.sectionIndex] = { ...sections[vars.sectionIndex], audioUrl: url };
      updateModuleState("listening", { listeningSections: sections });
      toast({ title: "Audio generated" });
    },
    onError: (err: Error) => toast({ variant: "destructive", title: "Audio generation failed", description: err.message }),
  });

  const generateWritingMut = useMutation({
    mutationFn: (params: { topic: string; difficulty: string; taskIndex: number }) =>
      generationService.generateWritingInstructions({ topic: params.topic, difficulty: params.difficulty, task_type: "letter" }),
    onSuccess: (res, vars) => {
      const st = getModuleState("writing");
      const tasks = [...st.writingTasks];
      const r = res as Record<string, unknown>;
      const instructions = (r.instructions as string) ?? JSON.stringify(r.questions ?? res);
      tasks[vars.taskIndex] = { ...tasks[vars.taskIndex], instructions };
      updateModuleState("writing", { writingTasks: tasks });
      toast({ title: "Instructions generated" });
    },
    onError: (err: Error) => toast({ variant: "destructive", title: "Generation failed", description: err.message }),
  });

  const generateSpeakingMut = useMutation({
    mutationFn: (params: { topics: string[]; difficulty: string; partIndex: number }) =>
      generationService.generateSpeakingScript({ topics: params.topics.filter(Boolean), difficulty: params.difficulty, part: "speaking_1" }),
    onSuccess: (res, vars) => {
      const r = res as Record<string, unknown>;
      if (r.error) {
        toast({ variant: "destructive", title: "Script generation failed", description: String(r.error) });
        return;
      }
      const st = getModuleState("speaking");
      const parts = [...st.speakingParts];
      const script = (r.script as string) || "";
      if (!script) {
        toast({ variant: "destructive", title: "No script returned", description: "AI returned empty response — try again." });
        return;
      }
      parts[vars.partIndex] = { ...parts[vars.partIndex], script };
      updateModuleState("speaking", { speakingParts: parts });
      toast({ title: "Script generated" });
    },
    onError: (err: Error) => toast({ variant: "destructive", title: "Generation failed", description: err.message }),
  });

  const generateVideoMut = useMutation({
    mutationFn: (params: { script: string; avatarId: string; partIndex: number }) =>
      mediaService.createAvatarVideo({ script: params.script, avatar_id: params.avatarId, title: title || "Speaking Video" }),
    onSuccess: (res, vars) => {
      const st = getModuleState("speaking");
      const parts = [...st.speakingParts];
      parts[vars.partIndex] = { ...parts[vars.partIndex], videoUrl: `pending:${res.video_id}` };
      updateModuleState("speaking", { speakingParts: parts });
      toast({ title: "Video generation started", description: `Job ID: ${res.video_id}` });
    },
    onError: (err: Error) => toast({ variant: "destructive", title: "Video generation failed", description: err.message }),
  });

  const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
  useEffect(() => {
    if (activeModule !== "speaking") return;
    const st = getModuleState("speaking");
    const pendingParts = st.speakingParts
      .map((p, i) => ({ videoUrl: p.videoUrl, index: i }))
      .filter((p) => p.videoUrl.startsWith("pending:"));
    if (pendingParts.length === 0) {
      if (pollTimerRef.current) { clearInterval(pollTimerRef.current); pollTimerRef.current = null; }
      return;
    }
    if (pollTimerRef.current) return;
    pollTimerRef.current = setInterval(async () => {
      const currentSt = getModuleState("speaking");
      let changed = false;
      const updatedParts = [...currentSt.speakingParts];
      for (const pp of pendingParts) {
        const part = updatedParts[pp.index];
        if (!part || !part.videoUrl.startsWith("pending:")) continue;
        const videoId = part.videoUrl.replace("pending:", "");
        try {
          const status = await mediaService.getVideoStatus(videoId);
          if (status.status === "done" || status.status === "completed" || status.video_url) {
            updatedParts[pp.index] = { ...part, videoUrl: status.video_url || status.url || "" };
            changed = true;
            toast({ title: "Video ready!", description: "Avatar video has been generated." });
          } else if (status.status === "error" || status.status === "failed") {
            updatedParts[pp.index] = { ...part, videoUrl: "" };
            changed = true;
            toast({ variant: "destructive", title: "Video generation failed" });
          }
        } catch { /* poll again next interval */ }
      }
      if (changed) updateModuleState("speaking", { speakingParts: updatedParts });
    }, 15000);
    return () => { if (pollTimerRef.current) { clearInterval(pollTimerRef.current); pollTimerRef.current = null; } };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeModule, moduleStates]);

  const submitMut = useMutation({
    mutationFn: (skipApproval: boolean) => {
      const modulesPayload: Record<string, unknown> = {};
      for (const mod of selectedModules) {
        const st = getModuleState(mod);
        modulesPayload[mod] = {
          timer: st.timer,
          difficulty: st.difficulty,
          accessType: st.accessType,
          shuffling: st.shuffling,
          gradingSystem: st.gradingSystem,
          passages: mod === "reading" ? st.passages.map((p) => ({ text: p.text, category: p.category, type: p.type, exercises: p.exercises })) : undefined,
          sections: mod === "listening" ? st.listeningSections.map((s) => ({ type: s.type, context: s.context, audioUrl: s.audioUrl })) : undefined,
          tasks: mod === "writing" ? st.writingTasks.map((t) => ({ instructions: t.instructions, wordLimit: t.wordLimit, marks: t.marks })) : undefined,
          parts: mod === "speaking" ? st.speakingParts.map((p) => ({ type: p.type, script: p.script, videoUrl: p.videoUrl, marks: p.marks })) : undefined,
        };
      }
      return generationService.submitExam({ title, label: examLabel, modules: modulesPayload, skip_approval: skipApproval });
    },
    onSuccess: (res) => toast({
      title: "Exam submitted successfully",
      description: `Exam #${res.exam_id} created with status "${res.status}". ${res.status === "published" ? "The exam is now live." : "Pending approval."}`,
      duration: 8000,
    }),
    onError: (err: Error) => toast({ variant: "destructive", title: "Submit failed", description: err.message }),
  });

  const anyGenerating = generatePassageMut.isPending || generateExercisesMut.isPending ||
    generateAudioMut.isPending || generateWritingMut.isPending ||
    generateSpeakingMut.isPending || generateVideoMut.isPending || submitMut.isPending;

  const renderDifficultyTags = (mod: ModuleKey) => {
    const st = getModuleState(mod);
    return (
      <div className="space-y-1">
        <Label className="text-xs">Difficulty</Label>
        <div className="flex flex-wrap gap-1">
          {st.difficulty.map((d) => (
            <Badge key={d} variant="secondary" className="text-xs gap-1">
              {d}
              <button onClick={() => updateModuleState(mod, { difficulty: st.difficulty.filter((x) => x !== d) })} className="ml-0.5 hover:text-destructive"><X className="h-3 w-3" /></button>
            </Badge>
          ))}
          <Select onValueChange={(v) => { if (!st.difficulty.includes(v)) updateModuleState(mod, { difficulty: [...st.difficulty, v] }); }}>
            <SelectTrigger className="h-6 w-16 text-xs"><Plus className="h-3 w-3" /></SelectTrigger>
            <SelectContent>{CEFR_LEVELS.filter((l) => !st.difficulty.includes(l)).map((l) => <SelectItem key={l} value={l}>{l}</SelectItem>)}</SelectContent>
          </Select>
        </div>
      </div>
    );
  };

  const renderCommonConfig = (mod: ModuleKey) => {
    const st = getModuleState(mod);
    return (
      <div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm">
        <div className="space-y-1">
          <Label className="text-xs">Timer (minutes)</Label>
          <Input type="number" value={st.timer} min={1} onChange={(e) => updateModuleState(mod, { timer: Number(e.target.value) || 1 })} className="h-8 text-xs" />
        </div>
        {renderDifficultyTags(mod)}
        <div className="space-y-1">
          <Label className="text-xs">Access Type</Label>
          <Select value={st.accessType} onValueChange={(v) => updateModuleState(mod, { accessType: v })}>
            <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
            <SelectContent>
              <SelectItem value="private">Private</SelectItem>
              <SelectItem value="public">Public</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div className="space-y-1">
          <Label className="text-xs">Entities</Label>
          <Select value={st.entity} onValueChange={(v) => updateModuleState(mod, { entity: v })}>
            <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select..." /></SelectTrigger>
            <SelectContent><SelectItem value="none">None</SelectItem></SelectContent>
          </Select>
        </div>
        <div className="space-y-1">
          <Label className="text-xs">Approval Workflow</Label>
          <Select value={st.approvalWorkflow} onValueChange={(v) => updateModuleState(mod, { approvalWorkflow: v })}>
            <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select..." /></SelectTrigger>
            <SelectContent><SelectItem value="default">Default</SelectItem><SelectItem value="none">None</SelectItem></SelectContent>
          </Select>
        </div>
        <div className="space-y-1">
          <Label className="text-xs">Grading System</Label>
          <Select value={st.gradingSystem} onValueChange={(v) => updateModuleState(mod, { gradingSystem: v })}>
            <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="System Select" /></SelectTrigger>
            <SelectContent><SelectItem value="ielts">IELTS Band</SelectItem><SelectItem value="percentage">Percentage</SelectItem></SelectContent>
          </Select>
        </div>
        <div className="space-y-1">
          <Label className="text-xs">Total Marks</Label>
          <div className="h-8 flex items-center text-xs font-medium">{st.totalMarks}</div>
        </div>
        <div className="flex items-center gap-2 col-span-2 md:col-span-1">
          <Switch checked={st.shuffling} onCheckedChange={(v) => updateModuleState(mod, { shuffling: v })} />
          <Label className="text-xs">Shuffling Enabled</Label>
        </div>
      </div>
    );
  };

  const renderReadingModule = () => {
    if (!activeModule || activeModule !== "reading") return null;
    const st = getModuleState("reading");
    return (
      <div className="space-y-4">
        {renderCommonConfig("reading")}

        <div className="space-y-1">
          <Label className="text-xs font-medium">Passages</Label>
          <div className="flex gap-2 flex-wrap items-center">
            {st.passages.map((_, i) => (
              <div key={i} className="flex items-center gap-1 bg-muted/50 rounded px-2 py-0.5">
                <Checkbox checked id={`p-${i}`} />
                <Label htmlFor={`p-${i}`} className="text-xs">Passage {i + 1}</Label>
                {st.passages.length > 1 && (
                  <button
                    className="ml-1 text-muted-foreground/60 hover:text-destructive transition-colors"
                    onClick={() => {
                      const passages = st.passages.filter((_, idx) => idx !== i);
                      updateModuleState("reading", { passages });
                    }}
                    title={`Remove Passage ${i + 1}`}
                  ><X className="h-3 w-3" /></button>
                )}
              </div>
            ))}
            <Button variant="ghost" size="sm" className="h-6 text-xs" onClick={() => {
              const newP: PassageState = { text: "", category: "", type: "general", divider: "", exerciseTypes: [], exercises: [], editing: false };
              updateModuleState("reading", { passages: [...st.passages, newP] });
            }}><Plus className="h-3 w-3 mr-1" /> Add</Button>
          </div>
        </div>

        <Button variant="ghost" size="sm" onClick={() => setModuleStates((prev) => ({ ...prev, reading: defaultModuleState("reading") }))} className="text-xs"><RotateCcw className="h-3 w-3 mr-1" /> Reset Module</Button>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          {st.passages.map((passage, pi) => (
            <div key={pi} className="space-y-3">
              <Card className="border-blue-200 bg-blue-50/50">
                <CardContent className="p-4 space-y-3">
                  <h4 className="text-sm font-semibold text-blue-700">Passage {pi + 1} Settings</h4>
                  <Collapsible>
                    <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-blue-100 rounded px-2 py-1">
                      Category <ChevronDown className="h-3 w-3" />
                    </CollapsibleTrigger>
                    <CollapsibleContent className="pt-2">
                      <Input value={passage.category} placeholder="Category" className="h-8 text-xs"
                        onChange={(e) => {
                          const p = [...st.passages]; p[pi] = { ...p[pi], category: e.target.value };
                          updateModuleState("reading", { passages: p });
                        }} />
                    </CollapsibleContent>
                  </Collapsible>
                  <Collapsible>
                    <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-blue-100 rounded px-2 py-1">
                      Type <ChevronDown className="h-3 w-3" />
                    </CollapsibleTrigger>
                    <CollapsibleContent className="pt-2">
                      <Select value={passage.type} onValueChange={(v) => {
                        const p = [...st.passages]; p[pi] = { ...p[pi], type: v };
                        updateModuleState("reading", { passages: p });
                      }}>
                        <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
                        <SelectContent>
                          <SelectItem value="general">General</SelectItem>
                          <SelectItem value="academic">Academic</SelectItem>
                          <SelectItem value="technical">Technical</SelectItem>
                        </SelectContent>
                      </Select>
                    </CollapsibleContent>
                  </Collapsible>
                  <Collapsible>
                    <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-blue-100 rounded px-2 py-1">
                      Generate Passage <ChevronDown className="h-3 w-3" />
                    </CollapsibleTrigger>
                    <CollapsibleContent className="pt-2 space-y-2">
                      <Select><SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Passage Difficulty (Optional)" /></SelectTrigger>
                        <SelectContent>{CEFR_LEVELS.map((l) => <SelectItem key={l} value={l}>{l}</SelectItem>)}</SelectContent>
                      </Select>
                      <Input placeholder="Topic (Optional)" className="h-8 text-xs"
                        value={passage.category || ""}
                        onChange={(e) => {
                          const p = [...st.passages]; p[pi] = { ...p[pi], category: e.target.value };
                          updateModuleState("reading", { passages: p });
                        }} />
                      <Input placeholder="Approximate Word Count (Optional)" className="h-8 text-xs" type="number"
                        value={passage.divider || ""}
                        onChange={(e) => {
                          const p = [...st.passages]; p[pi] = { ...p[pi], divider: e.target.value };
                          updateModuleState("reading", { passages: p });
                        }} />
                      <Button size="sm" className="w-full text-xs" disabled={generatePassageMut.isPending}
                        onClick={() => {
                          generatePassageMut.mutate({ index: pi, topic: passage.category || "", difficulty: st.difficulty[0] || "B2", wordCount: Number(passage.divider) || 300 });
                        }}>
                        {generatePassageMut.isPending ? <Loader2 className="h-3 w-3 mr-1 animate-spin" /> : <Sparkles className="h-3 w-3 mr-1" />}
                        Generate
                      </Button>
                    </CollapsibleContent>
                  </Collapsible>
                  <Button size="sm" className="w-full text-xs" variant="outline" disabled={!passage.text}
                    onClick={() => openExerciseWizard(pi)}>
                    <ListChecks className="h-3 w-3 mr-1" />
                    {passage.exercises.length > 0
                      ? `Exercises (${passage.exercises.length}) — Add More`
                      : "Set Up Exercises"}
                  </Button>
                </CardContent>
              </Card>

              <Card className="border-blue-200">
                <CardContent className="p-4 space-y-2">
                  <div className="flex items-center justify-between">
                    <h4 className="text-sm font-semibold">Reading Passage</h4>
                    <div className="flex gap-1">
                      <Button size="sm" variant="outline" className="h-6 text-xs" disabled={!passage.text}>Save</Button>
                      <Button size="sm" variant="outline" className="h-6 text-xs">Discard</Button>
                      <Button size="sm" variant="outline" className="h-6 text-xs"
                        onClick={() => {
                          const p = [...st.passages]; p[pi] = { ...p[pi], editing: !p[pi].editing };
                          updateModuleState("reading", { passages: p });
                        }}>Edit</Button>
                    </div>
                  </div>
                  <p className="text-xs text-muted-foreground">The reading passage that the exercises will refer to.</p>
                  <Textarea
                    value={passage.text}
                    onChange={(e) => {
                      const p = [...st.passages]; p[pi] = { ...p[pi], text: e.target.value };
                      updateModuleState("reading", { passages: p });
                    }}
                    placeholder="Generate or edit the passage to add exercises!"
                    className="min-h-[150px] text-xs"
                    readOnly={!passage.editing}
                  />
                </CardContent>
              </Card>

              {passage.exercises.length > 0 && (
                <Card className="border-blue-200 bg-blue-50/30">
                  <CardContent className="p-4 space-y-3">
                    <div className="flex items-center justify-between">
                      <h4 className="text-sm font-semibold text-blue-700">Exercises ({passage.exercises.length})</h4>
                      <Button size="sm" variant="ghost" className="h-6 text-xs text-destructive hover:text-destructive"
                        onClick={() => {
                          const p = [...st.passages];
                          p[pi] = { ...p[pi], exercises: [] };
                          updateModuleState("reading", { passages: p });
                        }}>
                        <X className="h-3 w-3 mr-1" /> Clear All
                      </Button>
                    </div>
                    <div className="space-y-4">
                      {(() => {
                        const grouped: Record<string, { exercises: Exercise[]; indices: number[] }> = {};
                        passage.exercises.forEach((ex, ei) => {
                          if (!grouped[ex.type]) grouped[ex.type] = { exercises: [], indices: [] };
                          grouped[ex.type].exercises.push(ex);
                          grouped[ex.type].indices.push(ei);
                        });
                        return Object.entries(grouped).map(([type, group]) => {
                          const typeLabel = READING_EXERCISE_TYPES.find((t) => t.key === type)?.label || type;
                          const sectionInstructions = group.exercises[0]?.instructions;
                          return (
                            <div key={type} className="space-y-2">
                              <div className="border-b border-blue-200 pb-1">
                                <div className="flex items-center justify-between">
                                  <h5 className="text-xs font-semibold text-blue-700 flex items-center gap-1.5">
                                    {typeLabel}
                                    <Badge variant="outline" className="text-[10px] font-normal">{group.exercises.length}</Badge>
                                  </h5>
                                </div>
                                {sectionInstructions && (
                                  <p className="text-[11px] text-muted-foreground italic mt-0.5">{sectionInstructions}</p>
                                )}
                              </div>
                              {group.exercises.map((ex, gi) => {
                                const ei = group.indices[gi];
                                return (
                                  <div key={ei} className="bg-white rounded-lg border p-3 space-y-2">
                                    <div className="flex items-start justify-between gap-2">
                                      <div className="flex-1 min-w-0">
                                        <div className="flex items-center gap-2 mb-1">
                                          <span className="text-[10px] font-medium text-muted-foreground">Q{gi + 1}</span>
                                          <Badge variant="outline" className="text-[10px] shrink-0">{ex.marks} mark{ex.marks !== 1 ? "s" : ""}</Badge>
                                        </div>
                                        <p className="text-xs font-medium leading-relaxed">{ex.prompt}</p>
                                      </div>
                                      <div className="flex gap-1 shrink-0">
                                        <Button size="sm" variant="ghost" className="h-6 w-6 p-0"
                                          title="Edit exercise"
                                          onClick={() => {
                                            setEditingExercise({ passageIndex: pi, exerciseIndex: ei });
                                            setExerciseDraft({ ...ex });
                                          }}>
                                          <PenTool className="h-3 w-3" />
                                        </Button>
                                        <Button size="sm" variant="ghost" className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                                          title="Delete exercise"
                                          onClick={() => {
                                            const p = [...st.passages];
                                            p[pi] = { ...p[pi], exercises: p[pi].exercises.filter((_, idx) => idx !== ei) };
                                            updateModuleState("reading", { passages: p });
                                          }}>
                                          <X className="h-3 w-3" />
                                        </Button>
                                      </div>
                                    </div>
                                    {ex.options.length > 0 && (
                                      <div className="grid grid-cols-2 gap-1">
                                        {ex.options.map((opt, oi) => (
                                          <div key={oi} className={`text-[11px] px-2 py-1 rounded border ${opt === ex.correct_answer ? "bg-green-50 border-green-300 text-green-700 font-medium" : "bg-gray-50 border-gray-200"}`}>
                                            {String.fromCharCode(65 + oi)}. {opt}
                                          </div>
                                        ))}
                                      </div>
                                    )}
                                    {!ex.options.length && ex.correct_answer && (
                                      <p className="text-[11px] text-green-700 bg-green-50 rounded px-2 py-1 border border-green-200">
                                        Answer: {ex.correct_answer}
                                      </p>
                                    )}
                                    {ex.explanation && (
                                      <p className="text-[11px] text-muted-foreground italic">
                                        {ex.explanation}
                                      </p>
                                    )}
                                  </div>
                                );
                              })}
                            </div>
                          );
                        });
                      })()}
                    </div>
                  </CardContent>
                </Card>
              )}
            </div>
          ))}
        </div>
      </div>
    );
  };

  const renderListeningModule = () => {
    if (activeModule !== "listening") return null;
    const st = getModuleState("listening");
    return (
      <div className="space-y-4">
        {renderCommonConfig("listening")}
        <div className="space-y-1">
          <Label className="text-xs font-medium">Sections</Label>
          <div className="flex gap-2 flex-wrap items-center">
            {st.listeningSections.map((sec, i) => (
              <div key={i} className="flex items-center gap-1 bg-muted/50 rounded px-2 py-0.5">
                <Checkbox checked id={`ls-${i}`} />
                <Label htmlFor={`ls-${i}`} className="text-xs">{LISTENING_SECTION_TYPES.find((t) => t.key === sec.type)?.label || sec.type}</Label>
                {st.listeningSections.length > 1 && (
                  <button
                    className="ml-1 text-muted-foreground/60 hover:text-destructive transition-colors"
                    onClick={() => {
                      const sections = st.listeningSections.filter((_, idx) => idx !== i);
                      updateModuleState("listening", { listeningSections: sections });
                    }}
                    title={`Remove Section ${i + 1}`}
                  ><X className="h-3 w-3" /></button>
                )}
              </div>
            ))}
            <Button variant="ghost" size="sm" className="h-6 text-xs" onClick={() => {
              const newS: ListeningSectionState = { type: "social_monologue", category: "", divider: "", context: "", audioUrl: "", exerciseTypes: [], exercises: [], editing: false };
              updateModuleState("listening", { listeningSections: [...st.listeningSections, newS] });
            }}><Plus className="h-3 w-3 mr-1" /> Add</Button>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          {st.listeningSections.map((sec, si) => (
            <div key={si} className="space-y-3">
              <Card className="border-orange-200 bg-orange-50/50">
                <CardContent className="p-4 space-y-3">
                  <h4 className="text-sm font-semibold text-orange-700">{LISTENING_SECTION_TYPES.find((t) => t.key === sec.type)?.label} Settings</h4>
                  <Collapsible>
                    <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-orange-100 rounded px-2 py-1">
                      Audio Context <ChevronDown className="h-3 w-3" />
                    </CollapsibleTrigger>
                    <CollapsibleContent className="pt-2 space-y-2">
                      <Input placeholder="Topic" className="h-8 text-xs"
                        value={sec.category || ""}
                        onChange={(e) => {
                          const sections = [...st.listeningSections]; sections[si] = { ...sections[si], category: e.target.value };
                          updateModuleState("listening", { listeningSections: sections });
                        }} />
                      <div className="flex gap-2">
                        <Button size="sm" className="flex-1 text-xs" onClick={() => {
                          generationService.generateListeningContext({ topic: sec.category || "general conversation", section_type: sec.type })
                            .then((res) => {
                              const r = res as Record<string, unknown>;
                              const sections = [...st.listeningSections];
                              sections[si] = { ...sections[si], context: (r.context as string) ?? JSON.stringify(r) };
                              updateModuleState("listening", { listeningSections: sections });
                              toast({ title: "Context generated" });
                            }).catch((err) => toast({ variant: "destructive", title: "Failed", description: String(err) }));
                        }}><Sparkles className="h-3 w-3 mr-1" /> Generate</Button>
                        <Button size="sm" variant="outline" className="text-xs"><Upload className="h-3 w-3 mr-1" /> Upload</Button>
                      </div>
                    </CollapsibleContent>
                  </Collapsible>
                  <Collapsible>
                    <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-orange-100 rounded px-2 py-1">
                      Add Exercises <ChevronDown className="h-3 w-3" />
                    </CollapsibleTrigger>
                    <CollapsibleContent className="pt-2 space-y-1">
                      {LISTENING_EXERCISE_TYPES.map((et) => (
                        <div key={et.key} className="flex items-center gap-2">
                          <Checkbox id={`lex-${si}-${et.key}`} disabled={!sec.context}
                            checked={sec.exerciseTypes.includes(et.key)}
                            onCheckedChange={(checked) => {
                              const sections = [...st.listeningSections];
                              const types = checked ? [...sections[si].exerciseTypes, et.key] : sections[si].exerciseTypes.filter((t) => t !== et.key);
                              sections[si] = { ...sections[si], exerciseTypes: types };
                              updateModuleState("listening", { listeningSections: sections });
                            }} />
                          <Label htmlFor={`lex-${si}-${et.key}`} className="text-xs">Section {si + 1} - {et.label}</Label>
                        </div>
                      ))}
                    </CollapsibleContent>
                  </Collapsible>
                  <Collapsible>
                    <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-orange-100 rounded px-2 py-1">
                      Generate Audio <ChevronDown className="h-3 w-3" />
                    </CollapsibleTrigger>
                    <CollapsibleContent className="pt-2">
                      <Button size="sm" className="w-full text-xs" disabled={!sec.context || generateAudioMut.isPending}
                        onClick={() => generateAudioMut.mutate({ text: sec.context, sectionIndex: si })}>
                        {generateAudioMut.isPending ? <Loader2 className="h-3 w-3 mr-1 animate-spin" /> : <Play className="h-3 w-3 mr-1" />}
                        Generate Audio
                      </Button>
                      {sec.audioUrl && (
                        <div className="mt-2 space-y-1">
                          <p className="text-xs text-green-600">Audio ready</p>
                          <audio controls src={sec.audioUrl} className="w-full h-8" />
                        </div>
                      )}
                    </CollapsibleContent>
                  </Collapsible>
                </CardContent>
              </Card>

              <Card className="border-orange-200">
                <CardContent className="p-4 space-y-2">
                  <h4 className="text-sm font-semibold">{LISTENING_SECTION_TYPES.find((t) => t.key === sec.type)?.label}</h4>
                  <p className="text-xs text-muted-foreground">Enter the section's conversation or import your own</p>
                  <Textarea value={sec.context} placeholder="Generate or type the conversation context..."
                    onChange={(e) => {
                      const sections = [...st.listeningSections]; sections[si] = { ...sections[si], context: e.target.value };
                      updateModuleState("listening", { listeningSections: sections });
                    }} className="min-h-[120px] text-xs" />
                </CardContent>
              </Card>
            </div>
          ))}
        </div>
      </div>
    );
  };

  const renderWritingModule = () => {
    if (activeModule !== "writing") return null;
    const st = getModuleState("writing");
    return (
      <div className="space-y-4">
        {renderCommonConfig("writing")}
        <div className="space-y-1">
          <Label className="text-xs font-medium">Tasks</Label>
          <div className="flex gap-2 flex-wrap items-center">
            {st.writingTasks.map((_, i) => (
              <div key={i} className="flex items-center gap-1 bg-muted/50 rounded px-2 py-0.5">
                <Checkbox checked id={`wt-${i}`} />
                <Label htmlFor={`wt-${i}`} className="text-xs">Task {i + 1}</Label>
                {st.writingTasks.length > 1 && (
                  <button
                    className="ml-1 text-muted-foreground/60 hover:text-destructive transition-colors"
                    onClick={() => {
                      const tasks = st.writingTasks.filter((_, idx) => idx !== i);
                      updateModuleState("writing", { writingTasks: tasks });
                    }}
                    title={`Remove Task ${i + 1}`}
                  ><X className="h-3 w-3" /></button>
                )}
              </div>
            ))}
            {st.writingTasks.length < 2 && (
              <Button variant="ghost" size="sm" className="h-6 text-xs" onClick={() => {
                const newT: WritingTaskState = { instructions: "", category: "", type: "", divider: "", wordLimit: 250, marks: 0, editing: false };
                updateModuleState("writing", { writingTasks: [...st.writingTasks, newT] });
              }}><Plus className="h-3 w-3 mr-1" /> Add Task 2</Button>
            )}
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          {st.writingTasks.map((task, ti) => (
            <div key={ti} className="space-y-3">
              <Card className="border-green-200 bg-green-50/50">
                <CardContent className="p-4 space-y-3">
                  <h4 className="text-sm font-semibold text-green-700">Task {ti + 1} Settings</h4>
                  <Collapsible>
                    <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-green-100 rounded px-2 py-1">
                      Generate Instructions <ChevronDown className="h-3 w-3" />
                    </CollapsibleTrigger>
                    <CollapsibleContent className="pt-2 space-y-2">
                      <Input placeholder="Topic" className="h-8 text-xs"
                        value={task.category || ""}
                        onChange={(e) => {
                          const tasks = [...st.writingTasks]; tasks[ti] = { ...tasks[ti], category: e.target.value };
                          updateModuleState("writing", { writingTasks: tasks });
                        }} />
                      <Select><SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Difficulty (Optional)" /></SelectTrigger>
                        <SelectContent>{CEFR_LEVELS.map((l) => <SelectItem key={l} value={l}>{l}</SelectItem>)}</SelectContent>
                      </Select>
                      <Button size="sm" className="w-full text-xs" disabled={generateWritingMut.isPending}
                        onClick={() => {
                          generateWritingMut.mutate({ topic: task.category || "general", difficulty: st.difficulty[0] || "A1", taskIndex: ti });
                        }}>
                        {generateWritingMut.isPending ? <Loader2 className="h-3 w-3 mr-1 animate-spin" /> : <Sparkles className="h-3 w-3 mr-1" />}
                        Generate
                      </Button>
                    </CollapsibleContent>
                  </Collapsible>
                </CardContent>
              </Card>

              <Card className="border-green-200">
                <CardContent className="p-4 space-y-2">
                  <div className="flex items-center justify-between">
                    <h4 className="text-sm font-semibold">{ti === 0 ? "Letter Instructions" : "Essay Instructions"}</h4>
                    <div className="flex gap-1">
                      <Button size="sm" variant="outline" className="h-6 text-xs">Save</Button>
                      <Button size="sm" variant="outline" className="h-6 text-xs">Edit</Button>
                      <Button size="sm" variant="outline" className="h-6 text-xs">Graded</Button>
                    </div>
                  </div>
                  <Textarea value={task.instructions} placeholder="Instructions ..." className="min-h-[120px] text-xs"
                    onChange={(e) => {
                      const tasks = [...st.writingTasks]; tasks[ti] = { ...tasks[ti], instructions: e.target.value };
                      updateModuleState("writing", { writingTasks: tasks });
                    }} />
                  <div className="flex gap-4">
                    <div className="space-y-1">
                      <Label className="text-xs">Word Limit</Label>
                      <Input type="number" value={task.wordLimit} className="h-8 text-xs w-24"
                        onChange={(e) => {
                          const tasks = [...st.writingTasks]; tasks[ti] = { ...tasks[ti], wordLimit: Number(e.target.value) };
                          updateModuleState("writing", { writingTasks: tasks });
                        }} />
                    </div>
                    <div className="space-y-1">
                      <Label className="text-xs">Marks</Label>
                      <Input type="number" value={task.marks} className="h-8 text-xs w-24"
                        onChange={(e) => {
                          const tasks = [...st.writingTasks]; tasks[ti] = { ...tasks[ti], marks: Number(e.target.value) };
                          updateModuleState("writing", { writingTasks: tasks });
                        }} />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          ))}
        </div>
      </div>
    );
  };

  const renderSpeakingModule = () => {
    if (activeModule !== "speaking") return null;
    const st = getModuleState("speaking");
    const partTypes = [
      { key: "speaking_1", label: "Speaking 1" },
      { key: "speaking_2", label: "Speaking 2" },
      { key: "interactive", label: "Interactive Speaking" },
    ];
    return (
      <div className="space-y-4">
        {renderCommonConfig("speaking")}
        <div className="space-y-1">
          <Label className="text-xs font-medium">Speaking Parts</Label>
          <div className="flex gap-2 flex-wrap items-center">
            {st.speakingParts.map((part, i) => (
              <div key={i} className="flex items-center gap-1 bg-muted/50 rounded px-2 py-0.5">
                <Checkbox checked id={`sp-${i}`} />
                <Label htmlFor={`sp-${i}`} className="text-xs">{partTypes.find((t) => t.key === part.type)?.label || part.type}</Label>
                {st.speakingParts.length > 1 && (
                  <button
                    className="ml-1 text-muted-foreground/60 hover:text-destructive transition-colors"
                    onClick={() => {
                      const parts = st.speakingParts.filter((_, idx) => idx !== i);
                      updateModuleState("speaking", { speakingParts: parts });
                    }}
                    title={`Remove ${partTypes.find((t) => t.key === part.type)?.label || part.type}`}
                  ><X className="h-3 w-3" /></button>
                )}
              </div>
            ))}
            <Button variant="ghost" size="sm" className="h-6 text-xs" onClick={() => {
              const usedTypes = st.speakingParts.map((p) => p.type);
              const nextType = partTypes.find((t) => !usedTypes.includes(t.key));
              if (nextType) {
                const newP: SpeakingPartState = { type: nextType.key, category: "", divider: "", script: "", videoUrl: "", avatarId: "", marks: 0, topics: ["", ""], editing: false };
                updateModuleState("speaking", { speakingParts: [...st.speakingParts, newP] });
              }
            }}><Plus className="h-3 w-3 mr-1" /> Add</Button>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          {st.speakingParts.map((part, pi) => (
            <div key={pi} className="space-y-3">
              <Card className="border-pink-200 bg-pink-50/50">
                <CardContent className="p-4 space-y-3">
                  <h4 className="text-sm font-semibold text-pink-700">{partTypes.find((t) => t.key === part.type)?.label} Settings</h4>
                  <Collapsible>
                    <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-pink-100 rounded px-2 py-1">
                      Generate Script <ChevronDown className="h-3 w-3" />
                    </CollapsibleTrigger>
                    <CollapsibleContent className="pt-2 space-y-2">
                      <Input placeholder="First Topic (Optional)" className="h-8 text-xs"
                        value={part.topics[0] || ""} onChange={(e) => {
                          const parts = [...st.speakingParts]; parts[pi] = { ...parts[pi], topics: [e.target.value, parts[pi].topics[1] || ""] };
                          updateModuleState("speaking", { speakingParts: parts });
                        }} />
                      <Input placeholder="Second Topic (Optional)" className="h-8 text-xs"
                        value={part.topics[1] || ""} onChange={(e) => {
                          const parts = [...st.speakingParts]; parts[pi] = { ...parts[pi], topics: [parts[pi].topics[0] || "", e.target.value] };
                          updateModuleState("speaking", { speakingParts: parts });
                        }} />
                      <Button size="sm" className="w-full text-xs" disabled={generateSpeakingMut.isPending}
                        onClick={() => generateSpeakingMut.mutate({ topics: part.topics, difficulty: st.difficulty[0] || "B1", partIndex: pi })}>
                        {generateSpeakingMut.isPending ? <Loader2 className="h-3 w-3 mr-1 animate-spin" /> : <Sparkles className="h-3 w-3 mr-1" />}
                        Generate
                      </Button>
                    </CollapsibleContent>
                  </Collapsible>
                  <Collapsible>
                    <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-pink-100 rounded px-2 py-1">
                      Generate Video <ChevronDown className="h-3 w-3" />
                    </CollapsibleTrigger>
                    <CollapsibleContent className="pt-2 space-y-2">
                      <Select value={part.avatarId} onValueChange={(v) => {
                        const parts = [...st.speakingParts]; parts[pi] = { ...parts[pi], avatarId: v };
                        updateModuleState("speaking", { speakingParts: parts });
                      }}>
                        <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select an avatar (Optional)" /></SelectTrigger>
                        <SelectContent>
                          {DEFAULT_AVATARS.map((a) => <SelectItem key={String(a.id)} value={String(a.id)}>{a.name} ({a.gender})</SelectItem>)}
                        </SelectContent>
                      </Select>
                      <Button size="sm" className="w-full text-xs" disabled={!part.script || !part.avatarId || generateVideoMut.isPending}
                        onClick={() => generateVideoMut.mutate({ script: part.script, avatarId: part.avatarId, partIndex: pi })}>
                        {generateVideoMut.isPending ? <Loader2 className="h-3 w-3 mr-1 animate-spin" /> : <Video className="h-3 w-3 mr-1" />}
                        Generate Video
                      </Button>
                      {part.videoUrl && part.videoUrl.startsWith("pending:") && (
                        <div className="flex items-center gap-1 mt-1">
                          <Loader2 className="h-3 w-3 animate-spin text-orange-500" />
                          <p className="text-xs text-orange-600">Video processing... (polling every 15s)</p>
                        </div>
                      )}
                      {part.videoUrl && !part.videoUrl.startsWith("pending:") && (
                        <div className="mt-2 space-y-1">
                          <p className="text-xs text-green-600">Video ready</p>
                          <video controls src={part.videoUrl} className="w-full rounded max-h-48" />
                        </div>
                      )}
                    </CollapsibleContent>
                  </Collapsible>
                </CardContent>
              </Card>

              <Card className="border-pink-200">
                <CardContent className="p-4 space-y-2">
                  <div className="flex items-center justify-between">
                    <h4 className="text-sm font-semibold">{partTypes.find((t) => t.key === part.type)?.label} Script</h4>
                    <div className="flex gap-1">
                      <Button size="sm" variant="outline" className="h-6 text-xs">Save</Button>
                      <Button size="sm" variant="outline" className="h-6 text-xs">Edit</Button>
                      <Button size="sm" variant="outline" className="h-6 text-xs">Graded</Button>
                    </div>
                  </div>
                  <p className="text-xs text-muted-foreground">Generate or write the scripts for the videos.</p>
                  <Textarea value={part.script} placeholder="Generate or edit the questions!" className="min-h-[120px] text-xs"
                    onChange={(e) => {
                      const parts = [...st.speakingParts]; parts[pi] = { ...parts[pi], script: e.target.value };
                      updateModuleState("speaking", { speakingParts: parts });
                    }} />
                  <div className="space-y-1">
                    <Label className="text-xs">Marks</Label>
                    <Input type="number" value={part.marks} className="h-8 text-xs w-24"
                      onChange={(e) => {
                        const parts = [...st.speakingParts]; parts[pi] = { ...parts[pi], marks: Number(e.target.value) };
                        updateModuleState("speaking", { speakingParts: parts });
                      }} />
                  </div>
                </CardContent>
              </Card>
            </div>
          ))}
        </div>
      </div>
    );
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight flex items-center gap-2">
            <Wand2 className="h-6 w-6 text-primary" /> Generation
          </h1>
        </div>
      </div>

      <AiTipBanner context="generation" variant="recommendation" />

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="space-y-1">
          <Label>Title <span className="text-destructive">*</span></Label>
          <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Insert title" />
        </div>
        <div className="space-y-1">
          <Label>Exam Label</Label>
          <Input value={examLabel} onChange={(e) => setExamLabel(e.target.value)} placeholder="Exam Label" />
        </div>
        <div className="space-y-1">
          <Label>Exam Structure</Label>
          <Select value={examStructure} onValueChange={(val) => {
            setExamStructure(val);
            const s = structures.find((st) => String(st.id) === val);
            if (s) {
              const mods = (s as Record<string, unknown>).modules as string[] | undefined;
              if (Array.isArray(mods) && mods.length) {
                const next = new Set<ModuleKey>();
                mods.forEach((m) => { if (MODULE_KEYS.includes(m as ModuleKey)) next.add(m as ModuleKey); });
                setSelectedModules(next);
                if (next.size > 0) setActiveModule([...next][0]);
              }
            }
          }}>
            <SelectTrigger><SelectValue placeholder="Select an exam structure" /></SelectTrigger>
            <SelectContent>
              {structures.map((s) => (
                <SelectItem key={s.id} value={String(s.id)}>{s.name}</SelectItem>
              ))}
              {structures.length === 0 && (
                <SelectItem value="_none" disabled>No structures available</SelectItem>
              )}
            </SelectContent>
          </Select>
        </div>
      </div>

      <div>
        <p className="text-sm text-muted-foreground mb-3">Please select which subjects the exam is about</p>
        <div className="flex flex-wrap gap-3">
          {MODULES.map((m) => (
            <button key={m.key}
              className={`flex items-center gap-2 rounded-lg border-2 px-4 py-3 transition-all ${
                selectedModules.has(m.key) ? `${m.bgColor} border-current ${m.color} shadow-sm` : "border-muted bg-background hover:bg-muted/50"
              }`}
              onClick={() => toggleModule(m.key)}>
              <span className={m.color}>{m.icon}</span>
              <span className="text-sm font-medium">{m.label}</span>
              {selectedModules.has(m.key) && (
                <Badge variant="default" className="ml-1 h-5 text-[10px]">Select</Badge>
              )}
            </button>
          ))}
        </div>
      </div>

      {activeModule && selectedModules.has(activeModule) && (
        <div className="flex gap-3">
          {MODULES.filter((m) => selectedModules.has(m.key)).map((m) => (
            <Button key={m.key} variant={activeModule === m.key ? "default" : "outline"} size="sm"
              onClick={() => setActiveModule(m.key)} className="text-xs">
              {m.icon} <span className="ml-1">{m.label}</span>
            </Button>
          ))}
        </div>
      )}

      {!activeModule && selectedModules.size > 0 && (
        <Card className="border-dashed">
          <CardContent className="p-8 text-center space-y-4">
            <div className="grid grid-cols-2 gap-4 max-w-md mx-auto">
              <Card className="cursor-pointer hover:shadow-md transition-shadow border-2 hover:border-primary"
                onClick={() => setActiveModule(Array.from(selectedModules)[0])}>
                <CardContent className="p-6 text-center">
                  <FileText className="h-8 w-8 mx-auto mb-2 text-primary" />
                  <p className="text-sm font-medium">Start from Scratch</p>
                </CardContent>
              </Card>
              <Card className="cursor-pointer hover:shadow-md transition-shadow border-2 hover:border-primary">
                <CardContent className="p-6 text-center">
                  <Upload className="h-8 w-8 mx-auto mb-2 text-primary" />
                  <p className="text-sm font-medium">Upload Exam</p>
                </CardContent>
              </Card>
            </div>
          </CardContent>
        </Card>
      )}

      {activeModule === "reading" && renderReadingModule()}
      {activeModule === "listening" && renderListeningModule()}
      {activeModule === "writing" && renderWritingModule()}
      {activeModule === "speaking" && renderSpeakingModule()}

      {selectedModules.size > 0 && activeModule && (
        <div className="flex flex-wrap gap-3 pt-4 border-t">
          <Button variant="outline" disabled={anyGenerating || !title} onClick={() => submitMut.mutate(false)}>
            {submitMut.isPending ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Send className="h-4 w-4 mr-2" />}
            Submit module as exam for approval
          </Button>
          <Button variant="outline" disabled={anyGenerating || !title} onClick={() => submitMut.mutate(true)}>
            <SkipForward className="h-4 w-4 mr-2" /> Submit module as exam and skip approval
          </Button>
          <Button variant="outline" disabled={!activeModule} onClick={() => setPreviewOpen(true)}>
            <Eye className="h-4 w-4 mr-2" /> Preview module
          </Button>
        </div>
      )}

      <Dialog open={previewOpen} onOpenChange={setPreviewOpen}>
        <DialogContent className="max-w-3xl max-h-[85vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{title || "Untitled Exam"} — Preview</DialogTitle>
            <DialogDescription>
              Read-only preview of all configured modules and their content.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-6 pt-2">
            {[...selectedModules].map((mod) => {
              const st = getModuleState(mod);
              return (
                <div key={mod} className="border rounded-lg p-4 space-y-3">
                  <div className="flex items-center justify-between">
                    <h3 className="font-semibold text-lg capitalize">{mod}</h3>
                    <div className="flex gap-2">
                      <Badge variant="outline">{st.timer} min</Badge>
                      {st.difficulty.map((d) => <Badge key={d} variant="secondary">{d}</Badge>)}
                      <Badge variant={st.accessType === "public" ? "default" : "outline"}>{st.accessType}</Badge>
                    </div>
                  </div>

                  {mod === "reading" && st.passages.map((p, i) => (
                    <div key={i} className="bg-muted/50 rounded p-3 space-y-2">
                      <h4 className="font-medium text-sm">Passage {i + 1} {p.category && `(${p.category})`}</h4>
                      {p.text ? (
                        <p className="text-sm whitespace-pre-wrap leading-relaxed">{p.text.slice(0, 500)}{p.text.length > 500 ? "…" : ""}</p>
                      ) : (
                        <p className="text-sm text-muted-foreground italic">No passage text yet</p>
                      )}
                      {p.exercises.length > 0 && (
                        <div className="space-y-2 mt-2">
                          <p className="text-xs font-medium text-blue-700">{p.exercises.length} exercise(s)</p>
                          {p.exercises.map((ex, ei) => (
                            <div key={ei} className="bg-white rounded border p-2 space-y-1">
                              <div className="flex items-center gap-2">
                                <Badge variant="secondary" className="text-[10px]">
                                  {READING_EXERCISE_TYPES.find((t) => t.key === ex.type)?.label || ex.type}
                                </Badge>
                                <Badge variant="outline" className="text-[10px]">{ex.marks} mark{ex.marks !== 1 ? "s" : ""}</Badge>
                              </div>
                              <p className="text-xs">{ex.prompt}</p>
                              {ex.options.length > 0 && (
                                <div className="grid grid-cols-2 gap-1">
                                  {ex.options.map((opt, oi) => (
                                    <span key={oi} className={`text-[10px] px-1.5 py-0.5 rounded ${opt === ex.correct_answer ? "bg-green-100 text-green-700 font-medium" : "text-muted-foreground"}`}>
                                      {String.fromCharCode(65 + oi)}. {opt}
                                    </span>
                                  ))}
                                </div>
                              )}
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  ))}

                  {mod === "listening" && st.listeningSections.map((s, i) => (
                    <div key={i} className="bg-muted/50 rounded p-3 space-y-2">
                      <h4 className="font-medium text-sm">Section {i + 1}: {s.type.replace(/_/g, " ")}</h4>
                      {s.context ? (
                        <p className="text-sm whitespace-pre-wrap leading-relaxed">{s.context.slice(0, 500)}{s.context.length > 500 ? "…" : ""}</p>
                      ) : (
                        <p className="text-sm text-muted-foreground italic">No context yet</p>
                      )}
                      {s.audioUrl && <p className="text-xs text-green-600">Audio generated</p>}
                      {s.exercises.length > 0 && (
                        <p className="text-xs text-muted-foreground">{s.exercises.length} exercise(s) generated</p>
                      )}
                    </div>
                  ))}

                  {mod === "writing" && st.writingTasks.map((t, i) => (
                    <div key={i} className="bg-muted/50 rounded p-3 space-y-2">
                      <div className="flex items-center justify-between">
                        <h4 className="font-medium text-sm">Task {i + 1}</h4>
                        <span className="text-xs text-muted-foreground">{t.wordLimit} words · {t.marks} marks</span>
                      </div>
                      {t.instructions ? (
                        <p className="text-sm whitespace-pre-wrap leading-relaxed">{t.instructions}</p>
                      ) : (
                        <p className="text-sm text-muted-foreground italic">No instructions yet</p>
                      )}
                    </div>
                  ))}

                  {mod === "speaking" && st.speakingParts.map((p, i) => (
                    <div key={i} className="bg-muted/50 rounded p-3 space-y-2">
                      <div className="flex items-center justify-between">
                        <h4 className="font-medium text-sm">Part {i + 1}: {p.type.replace(/_/g, " ")}</h4>
                        <span className="text-xs text-muted-foreground">{p.marks} marks</span>
                      </div>
                      {p.script ? (
                        <p className="text-sm whitespace-pre-wrap leading-relaxed">{p.script.slice(0, 600)}{p.script.length > 600 ? "…" : ""}</p>
                      ) : (
                        <p className="text-sm text-muted-foreground italic">No script yet</p>
                      )}
                      {p.videoUrl && !p.videoUrl.startsWith("pending:") && (
                        <p className="text-xs text-green-600">Video ready</p>
                      )}
                      {p.videoUrl && p.videoUrl.startsWith("pending:") && (
                        <p className="text-xs text-orange-600">Video processing…</p>
                      )}
                    </div>
                  ))}

                  {st.shuffling && <p className="text-xs text-muted-foreground">Shuffling enabled</p>}
                </div>
              );
            })}
            {selectedModules.size === 0 && (
              <p className="text-muted-foreground text-center py-8">No modules selected yet.</p>
            )}
          </div>
        </DialogContent>
      </Dialog>

      <Dialog open={exerciseWizard.open} onOpenChange={(open) => {
        if (!open) setExerciseWizard((prev) => ({ ...prev, open: false, step: 0 }));
      }}>
        <DialogContent className="max-w-lg max-h-[85vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Settings2 className="h-5 w-5 text-blue-600" />
              {exerciseWizard.step === 0 ? "Configure Exercises" : "Exercises Generated"}
            </DialogTitle>
            <DialogDescription>
              {exerciseWizard.step === 0
                ? "Choose exercise types, set how many of each, and customize difficulty."
                : "Exercises have been generated and added to your passage."}
            </DialogDescription>
          </DialogHeader>

          {exerciseWizard.step === 0 && (
            <div className="space-y-3 pt-2">
              {READING_EXERCISE_TYPES.map((et) => {
                const cfg = exerciseWizard.types[et.key];
                if (!cfg) return null;
                return (
                  <div key={et.key} className={`rounded-lg border p-3 transition-colors ${cfg.enabled ? "bg-blue-50/60 border-blue-200" : "bg-muted/30 border-muted"}`}>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <Checkbox
                          checked={cfg.enabled}
                          onCheckedChange={(checked) =>
                            setExerciseWizard((prev) => ({
                              ...prev,
                              types: { ...prev.types, [et.key]: { ...prev.types[et.key], enabled: !!checked } },
                            }))
                          }
                        />
                        <div>
                          <p className={`text-sm font-medium ${cfg.enabled ? "text-foreground" : "text-muted-foreground"}`}>{et.label}</p>
                        </div>
                      </div>
                      {cfg.enabled && (
                        <div className="flex items-center gap-2">
                          <Label className="text-[10px] text-muted-foreground whitespace-nowrap">Questions</Label>
                          <div className="flex items-center border rounded-md">
                            <button className="px-1.5 py-0.5 hover:bg-muted transition-colors rounded-l-md"
                              onClick={() => setExerciseWizard((prev) => ({
                                ...prev,
                                types: { ...prev.types, [et.key]: { ...prev.types[et.key], count: Math.max(1, prev.types[et.key].count - 1) } },
                              }))}>
                              <Minus className="h-3 w-3" />
                            </button>
                            <span className="px-2 text-xs font-medium min-w-[24px] text-center">{cfg.count}</span>
                            <button className="px-1.5 py-0.5 hover:bg-muted transition-colors rounded-r-md"
                              onClick={() => setExerciseWizard((prev) => ({
                                ...prev,
                                types: { ...prev.types, [et.key]: { ...prev.types[et.key], count: Math.min(20, prev.types[et.key].count + 1) } },
                              }))}>
                              <Plus className="h-3 w-3" />
                            </button>
                          </div>
                        </div>
                      )}
                    </div>
                    {cfg.enabled && (
                      <div className="mt-2 ml-8 space-y-2">
                        <div className="flex items-center gap-2">
                          <Label className="text-[10px] text-muted-foreground">Difficulty</Label>
                          <Select value={cfg.difficulty} onValueChange={(v) =>
                            setExerciseWizard((prev) => ({
                              ...prev,
                              types: { ...prev.types, [et.key]: { ...prev.types[et.key], difficulty: v } },
                            }))
                          }>
                            <SelectTrigger className="h-6 w-16 text-[11px]"><SelectValue /></SelectTrigger>
                            <SelectContent>
                              {CEFR_LEVELS.map((l) => <SelectItem key={l} value={l}>{l}</SelectItem>)}
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="space-y-1">
                          <Label className="text-[10px] text-muted-foreground">Instructions for students</Label>
                          <Textarea
                            value={cfg.instructions}
                            onChange={(e) =>
                              setExerciseWizard((prev) => ({
                                ...prev,
                                types: { ...prev.types, [et.key]: { ...prev.types[et.key], instructions: e.target.value } },
                              }))
                            }
                            placeholder={`Instructions for ${et.label} section...`}
                            className="min-h-[48px] text-[11px] resize-none"
                          />
                        </div>
                      </div>
                    )}
                  </div>
                );
              })}

              <div className="rounded-lg bg-muted/50 p-3 flex items-center justify-between">
                <span className="text-xs text-muted-foreground">Total questions to generate</span>
                <Badge variant="secondary" className="text-sm font-bold">{wizardTotalQuestions}</Badge>
              </div>

              <div className="flex items-center gap-2 text-xs text-muted-foreground">
                <button className="underline hover:text-foreground" onClick={() => {
                  setExerciseWizard((prev) => {
                    const types = { ...prev.types };
                    for (const key of Object.keys(types)) types[key] = { ...types[key], enabled: true };
                    return { ...prev, types };
                  });
                }}>Select All</button>
                <span>·</span>
                <button className="underline hover:text-foreground" onClick={() => {
                  setExerciseWizard((prev) => {
                    const types = { ...prev.types };
                    for (const key of Object.keys(types)) types[key] = { ...types[key], enabled: false };
                    return { ...prev, types };
                  });
                }}>Deselect All</button>
                <span>·</span>
                <button className="underline hover:text-foreground" onClick={() => {
                  setExerciseWizard((prev) => {
                    const types = { ...prev.types };
                    for (const key of Object.keys(types)) types[key] = { ...types[key], count: 5 };
                    return { ...prev, types };
                  });
                }}>Reset to Default (5 each)</button>
              </div>
            </div>
          )}

          {exerciseWizard.step === 1 && (
            <div className="space-y-3 pt-2">
              <div className="flex items-center justify-center py-6">
                <div className="text-center space-y-2">
                  <div className="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center mx-auto">
                    <ListChecks className="h-6 w-6 text-green-600" />
                  </div>
                  <p className="text-sm font-medium">Exercises added successfully!</p>
                  <p className="text-xs text-muted-foreground">
                    You can now edit, delete, or preview individual exercises below the passage.
                  </p>
                </div>
              </div>
            </div>
          )}

          <DialogFooter className="gap-2">
            {exerciseWizard.step === 0 && (
              <>
                <Button variant="outline" size="sm" onClick={() => setExerciseWizard((prev) => ({ ...prev, open: false }))}>
                  Cancel
                </Button>
                <Button size="sm" disabled={wizardEnabledTypes.length === 0 || generateExercisesMut.isPending}
                  onClick={() => {
                    const st = getModuleState("reading");
                    const passage = st.passages[exerciseWizard.passageIndex];
                    if (!passage?.text) return;
                    const types = wizardEnabledTypes.map(([key]) => key);
                    const typeCounts: Record<string, number> = {};
                    const typeInstructions: Record<string, string> = {};
                    for (const [key, cfg] of wizardEnabledTypes) {
                      typeCounts[key] = cfg.count;
                      if (cfg.instructions.trim()) typeInstructions[key] = cfg.instructions.trim();
                    }
                    const difficulty = wizardEnabledTypes[0]?.[1]?.difficulty || st.difficulty[0] || "B2";
                    generateExercisesMut.mutate({
                      module: "reading",
                      passageIndex: exerciseWizard.passageIndex,
                      types,
                      typeCounts,
                      typeInstructions,
                      passageText: passage.text,
                      difficulty,
                    });
                  }}>
                  {generateExercisesMut.isPending ? (
                    <><Loader2 className="h-3 w-3 mr-1 animate-spin" /> Generating...</>
                  ) : (
                    <><Sparkles className="h-3 w-3 mr-1" /> Generate {wizardTotalQuestions} Exercises</>
                  )}
                </Button>
              </>
            )}
            {exerciseWizard.step === 1 && (
              <Button size="sm" onClick={() => setExerciseWizard((prev) => ({ ...prev, open: false, step: 0 }))}>
                Done
              </Button>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={!!editingExercise} onOpenChange={(open) => { if (!open) { setEditingExercise(null); setExerciseDraft(null); } }}>
        <DialogContent className="max-w-lg max-h-[85vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Edit Exercise</DialogTitle>
            <DialogDescription>Modify the exercise details below.</DialogDescription>
          </DialogHeader>
          {exerciseDraft && (
            <div className="space-y-4 pt-2">
              <div className="space-y-1">
                <Label className="text-xs font-medium">Exercise Type</Label>
                <Select value={exerciseDraft.type} onValueChange={(v) => setExerciseDraft({ ...exerciseDraft, type: v })}>
                  <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    {READING_EXERCISE_TYPES.map((et) => (
                      <SelectItem key={et.key} value={et.key}>{et.label}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-1">
                <Label className="text-xs font-medium">Section Instructions</Label>
                <Textarea value={exerciseDraft.instructions} className="min-h-[40px] text-xs"
                  placeholder="Instructions shown to the student for this section..."
                  onChange={(e) => setExerciseDraft({ ...exerciseDraft, instructions: e.target.value })} />
              </div>

              <div className="space-y-1">
                <Label className="text-xs font-medium">Question / Prompt</Label>
                <Textarea value={exerciseDraft.prompt} className="min-h-[60px] text-xs"
                  onChange={(e) => setExerciseDraft({ ...exerciseDraft, prompt: e.target.value })} />
              </div>

              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label className="text-xs font-medium">Options</Label>
                  <Button size="sm" variant="ghost" className="h-6 text-xs"
                    onClick={() => setExerciseDraft({ ...exerciseDraft, options: [...exerciseDraft.options, ""] })}>
                    <Plus className="h-3 w-3 mr-1" /> Add
                  </Button>
                </div>
                {exerciseDraft.options.map((opt, oi) => (
                  <div key={oi} className="flex gap-2 items-center">
                    <span className="text-xs font-medium w-5 text-center shrink-0">{String.fromCharCode(65 + oi)}.</span>
                    <Input value={opt} className="h-8 text-xs flex-1"
                      onChange={(e) => {
                        const opts = [...exerciseDraft.options];
                        opts[oi] = e.target.value;
                        setExerciseDraft({ ...exerciseDraft, options: opts });
                      }} />
                    <button className={`shrink-0 h-6 w-6 rounded-full border-2 flex items-center justify-center text-xs transition-colors ${
                      opt === exerciseDraft.correct_answer ? "bg-green-500 border-green-500 text-white" : "border-gray-300 hover:border-green-400"
                    }`}
                      title="Set as correct answer"
                      onClick={() => setExerciseDraft({ ...exerciseDraft, correct_answer: opt })}>
                      {opt === exerciseDraft.correct_answer ? "✓" : ""}
                    </button>
                    {exerciseDraft.options.length > 2 && (
                      <button className="shrink-0 text-muted-foreground/60 hover:text-destructive transition-colors"
                        onClick={() => {
                          const opts = exerciseDraft.options.filter((_, idx) => idx !== oi);
                          const corrected = opts.includes(exerciseDraft.correct_answer) ? exerciseDraft.correct_answer : "";
                          setExerciseDraft({ ...exerciseDraft, options: opts, correct_answer: corrected });
                        }}>
                        <X className="h-3 w-3" />
                      </button>
                    )}
                  </div>
                ))}
                {exerciseDraft.options.length === 0 && (
                  <div className="space-y-1">
                    <Label className="text-xs font-medium">Correct Answer</Label>
                    <Input value={exerciseDraft.correct_answer} className="h-8 text-xs"
                      onChange={(e) => setExerciseDraft({ ...exerciseDraft, correct_answer: e.target.value })} />
                  </div>
                )}
              </div>

              <div className="space-y-1">
                <Label className="text-xs font-medium">Explanation</Label>
                <Textarea value={exerciseDraft.explanation} className="min-h-[40px] text-xs"
                  onChange={(e) => setExerciseDraft({ ...exerciseDraft, explanation: e.target.value })} />
              </div>

              <div className="flex gap-4">
                <div className="space-y-1">
                  <Label className="text-xs font-medium">Marks</Label>
                  <Input type="number" value={exerciseDraft.marks} className="h-8 text-xs w-20"
                    onChange={(e) => setExerciseDraft({ ...exerciseDraft, marks: Number(e.target.value) || 1 })} />
                </div>
              </div>

              <div className="flex gap-2 justify-end pt-2">
                <Button variant="outline" size="sm" onClick={() => { setEditingExercise(null); setExerciseDraft(null); }}>
                  Cancel
                </Button>
                <Button size="sm" onClick={() => {
                  if (!editingExercise || !exerciseDraft) return;
                  const st = getModuleState("reading");
                  const passages = [...st.passages];
                  const exercises = [...passages[editingExercise.passageIndex].exercises];
                  exercises[editingExercise.exerciseIndex] = exerciseDraft;
                  passages[editingExercise.passageIndex] = { ...passages[editingExercise.passageIndex], exercises };
                  updateModuleState("reading", { passages });
                  setEditingExercise(null);
                  setExerciseDraft(null);
                  toast({ title: "Exercise updated" });
                }}>
                  Save Changes
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}
