From 1d7ebea2af392db7dfc399af0641b7716350b50e Mon Sep 17 00:00:00 2001
From: Yamen Ahmad <yamenahmad@Yamens-MacBook-Pro.local>
Date: Mon, 13 Apr 2026 12:27:18 +0400
Subject: [PATCH] feat(generation): add Listening section selector, exercise
 wizard, and edit/preview support

- Replace section list with checkbox-based section type selector (Social Conversation, Social Monologue, Academic Discussion, Academic Monologue) matching old platform
- Add Set Up Exercises wizard for Listening sections with listening-specific exercise types
- Add exercise display with edit/delete/clear-all for each listening section
- Add Save/Discard/Edit buttons and read-only mode for listening context textarea
- Generalize exercise wizard and edit dialog to work with both Reading and Listening modules

Made-with: Cursor
---
 src/pages/GenerationPage.tsx | 1026 ++++++++++++++++++++++++++++++----
 1 file changed, 911 insertions(+), 115 deletions(-)

diff --git a/src/pages/GenerationPage.tsx b/src/pages/GenerationPage.tsx
index f49a81c..bfe4814 100644
--- a/src/pages/GenerationPage.tsx
+++ b/src/pages/GenerationPage.tsx
@@ -104,6 +104,31 @@ const LISTENING_EXERCISE_TYPES = [
   { key: "write_blanks_form", label: "Write Blanks: Form" },
 ];
 
+const WRITING_TYPES = [
+  { key: "general", label: "General" },
+  { key: "letter", label: "Letter" },
+  { key: "essay", label: "Essay" },
+  { key: "report", label: "Report" },
+];
+
+const LEVEL_EXERCISE_TYPES = [
+  { key: "mc_blank", label: "Multiple Choice: Blank Space" },
+  { key: "mc_underline", label: "Multiple Choice: Underlined" },
+  { key: "fill_blanks", label: "Fill Blanks" },
+  { key: "fill_blanks_mc", label: "Fill Blanks: Multiple Choice" },
+  { key: "verb_tense", label: "Verb Tense" },
+];
+
+const INDUSTRY_EXERCISE_TYPES = [
+  { key: "mc_blank_space", label: "Multiple Choice: Blank Space" },
+  { key: "mc_normal", label: "Multiple Choice: Normal" },
+  { key: "fill_blanks", label: "Fill Blanks" },
+  { key: "true_false", label: "True/False" },
+  { key: "technical_writing", label: "Technical Writing" },
+];
+
+const INDUSTRY_DIFFICULTY_LEVELS = ["Beginner", "Intermediate", "Advanced"];
+
 const DEFAULT_AVATARS: Avatar[] = [
   { id: "gia", name: "Gia", gender: "female" },
   { id: "vadim", name: "Vadim", gender: "male" },
@@ -153,6 +178,8 @@ interface WritingTaskState {
   divider: string;
   wordLimit: number;
   marks: number;
+  graded: boolean;
+  images: string[];
   editing: boolean;
 }
 
@@ -168,6 +195,25 @@ interface SpeakingPartState {
   editing: boolean;
 }
 
+interface LevelPartState {
+  category: string;
+  divider: string;
+  levelExerciseTypes: string[];
+  levelExercises: Exercise[];
+  readingPassages: PassageState[];
+  listeningSections: ListeningSectionState[];
+  writingTasks: WritingTaskState[];
+  speakingParts: SpeakingPartState[];
+}
+
+interface IndustryPartState {
+  category: string;
+  divider: string;
+  exerciseTypes: string[];
+  exercises: Exercise[];
+  attachments: string[];
+}
+
 interface ModuleState {
   timer: number;
   difficulty: string[];
@@ -179,16 +225,49 @@ interface ModuleState {
   totalMarks: number;
   gradingSystem: string;
   shuffling: boolean;
+  numberOfParts: number;
   passages: PassageState[];
   listeningSections: ListeningSectionState[];
   writingTasks: WritingTaskState[];
   speakingParts: SpeakingPartState[];
+  levelParts: LevelPartState[];
+  industryParts: IndustryPartState[];
+}
+
+function defaultPassage(): PassageState {
+  return { text: "", category: "", type: "general", divider: "", exerciseTypes: [], exercises: [], editing: false };
+}
+function defaultListeningSection(): ListeningSectionState {
+  return { type: "social_conversation", category: "", divider: "", context: "", audioUrl: "", exerciseTypes: [], exercises: [], editing: false };
+}
+function defaultWritingTask(): WritingTaskState {
+  return { instructions: "", category: "", type: "general", divider: "", wordLimit: 150, marks: 0, graded: true, images: [], editing: false };
+}
+function defaultSpeakingPart(type = "speaking_1"): SpeakingPartState {
+  return { type, category: "", divider: "", script: "", videoUrl: "", avatarId: "", marks: 0, topics: ["", ""], editing: false };
+}
+function defaultLevelPart(): LevelPartState {
+  return {
+    category: "", divider: "",
+    levelExerciseTypes: [], levelExercises: [],
+    readingPassages: [defaultPassage(), defaultPassage(), defaultPassage()],
+    listeningSections: [defaultListeningSection(), defaultListeningSection(), defaultListeningSection(), defaultListeningSection()],
+    writingTasks: [defaultWritingTask(), { ...defaultWritingTask(), type: "essay", wordLimit: 250 }],
+    speakingParts: [defaultSpeakingPart("speaking_1"), defaultSpeakingPart("speaking_2"), defaultSpeakingPart("interactive")],
+  };
+}
+function defaultIndustryPart(): IndustryPartState {
+  return { category: "", divider: "", exerciseTypes: [], exercises: [], attachments: [] };
 }
 
 function defaultModuleState(mod: ModuleKey): ModuleState {
+  const diffMap: Record<string, string[]> = {
+    reading: ["B2"], listening: ["A2"], writing: ["B2"], speaking: ["B1"],
+    level: ["A2"], industry: ["Intermediate"],
+  };
   return {
     timer: 5,
-    difficulty: [mod === "reading" ? "B2" : mod === "listening" ? "A2" : mod === "writing" ? "A1" : "B1"],
+    difficulty: diffMap[mod] || ["B2"],
     accessType: "private",
     entity: "",
     approvalWorkflow: "",
@@ -197,10 +276,13 @@ function defaultModuleState(mod: ModuleKey): ModuleState {
     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 }],
+    numberOfParts: 1,
+    passages: [defaultPassage()],
+    listeningSections: [defaultListeningSection()],
+    writingTasks: [defaultWritingTask()],
+    speakingParts: [defaultSpeakingPart()],
+    levelParts: [defaultLevelPart()],
+    industryParts: [defaultIndustryPart()],
   };
 }
 
@@ -213,17 +295,19 @@ export default function GenerationPage() {
   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 [editingExercise, setEditingExercise] = useState<{ module: "reading" | "listening"; itemIndex: 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
+    module: "reading" | "listening";
+    itemIndex: number;
+    step: number;
     types: Record<string, { enabled: boolean; count: number; difficulty: string; instructions: string }>;
   }>({
     open: false,
-    passageIndex: 0,
+    module: "reading",
+    itemIndex: 0,
     step: 0,
     types: {},
   });
@@ -234,13 +318,19 @@ export default function GenerationPage() {
     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.",
+    write_blanks_questions: "Listen to the audio and write the correct answers to the questions.",
+    write_blanks_fill: "Listen to the audio and fill in the missing words.",
+    write_blanks_form: "Listen to the audio and complete the form with the correct information.",
   };
 
-  const openExerciseWizard = (pi: number) => {
-    const st = getModuleState("reading");
-    const existing = st.passages[pi]?.exerciseTypes ?? [];
+  const openExerciseWizard = (pi: number, mod: "reading" | "listening" = "reading") => {
+    const st = getModuleState(mod);
+    const exerciseTypeList = mod === "listening" ? LISTENING_EXERCISE_TYPES : READING_EXERCISE_TYPES;
+    const existing = mod === "listening"
+      ? st.listeningSections[pi]?.exerciseTypes ?? []
+      : st.passages[pi]?.exerciseTypes ?? [];
     const types: Record<string, { enabled: boolean; count: number; difficulty: string; instructions: string }> = {};
-    for (const et of READING_EXERCISE_TYPES) {
+    for (const et of exerciseTypeList) {
       types[et.key] = {
         enabled: existing.includes(et.key) || existing.length === 0,
         count: 5,
@@ -248,7 +338,7 @@ export default function GenerationPage() {
         instructions: DEFAULT_INSTRUCTIONS[et.key] || "",
       };
     }
-    setExerciseWizard({ open: true, passageIndex: pi, step: 0, types });
+    setExerciseWizard({ open: true, module: mod, itemIndex: pi, step: 0, types });
   };
 
   const wizardTotalQuestions = Object.values(exerciseWizard.types).reduce(
@@ -352,6 +442,14 @@ export default function GenerationPage() {
           exerciseTypes: vars.types,
         };
         updateModuleState(vars.module, { passages });
+      } else if (vars.module === "listening") {
+        const sections = [...st.listeningSections];
+        sections[vars.passageIndex] = {
+          ...sections[vars.passageIndex],
+          exercises: [...sections[vars.passageIndex].exercises, ...items],
+          exerciseTypes: vars.types,
+        };
+        updateModuleState(vars.module, { listeningSections: sections });
       }
       setExerciseWizard((prev) => ({ ...prev, step: 1 }));
       toast({ title: `${items.length} exercises generated` });
@@ -675,7 +773,7 @@ export default function GenerationPage() {
                     </CollapsibleContent>
                   </Collapsible>
                   <Button size="sm" className="w-full text-xs" variant="outline" disabled={!passage.text}
-                    onClick={() => openExerciseWizard(pi)}>
+                    onClick={() => openExerciseWizard(pi, "reading")}>
                     <ListChecks className="h-3 w-3 mr-1" />
                     {passage.exercises.length > 0
                       ? `Exercises (${passage.exercises.length}) — Add More`
@@ -766,7 +864,7 @@ export default function GenerationPage() {
                                         <Button size="sm" variant="ghost" className="h-6 w-6 p-0"
                                           title="Edit exercise"
                                           onClick={() => {
-                                            setEditingExercise({ passageIndex: pi, exerciseIndex: ei });
+                                            setEditingExercise({ module: "reading", itemIndex: pi, exerciseIndex: ei });
                                             setExerciseDraft({ ...ex });
                                           }}>
                                           <PenTool className="h-3 w-3" />
@@ -822,41 +920,90 @@ export default function GenerationPage() {
   const renderListeningModule = () => {
     if (activeModule !== "listening") return null;
     const st = getModuleState("listening");
+    const activeSectionTypes = new Set(st.listeningSections.map((s) => s.type));
     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>
-                )}
+          <Label className="text-xs font-medium">Section</Label>
+          <div className="flex gap-3 flex-wrap items-center">
+            {LISTENING_SECTION_TYPES.map((sType) => (
+              <div key={sType.key} className="flex items-center gap-1.5">
+                <Checkbox
+                  id={`lst-${sType.key}`}
+                  checked={activeSectionTypes.has(sType.key)}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      const newS = defaultListeningSection();
+                      newS.type = sType.key;
+                      updateModuleState("listening", { listeningSections: [...st.listeningSections, newS] });
+                    } else {
+                      const filtered = st.listeningSections.filter((s) => s.type !== sType.key);
+                      if (filtered.length === 0) return;
+                      updateModuleState("listening", { listeningSections: filtered });
+                    }
+                  }}
+                />
+                <Label htmlFor={`lst-${sType.key}`} className="text-xs cursor-pointer">{sType.label}</Label>
               </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 };
+              const usedTypes = st.listeningSections.map((s) => s.type);
+              const next = LISTENING_SECTION_TYPES.find((t) => !usedTypes.includes(t.key)) || LISTENING_SECTION_TYPES[0];
+              const newS = defaultListeningSection();
+              newS.type = next.key;
               updateModuleState("listening", { listeningSections: [...st.listeningSections, newS] });
             }}><Plus className="h-3 w-3 mr-1" /> Add</Button>
           </div>
         </div>
 
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" className="text-xs text-orange-700 border-orange-300 hover:bg-orange-50">
+            <Headphones className="h-3 w-3 mr-1" /> Audio Instructions
+          </Button>
+          <Button variant="ghost" size="sm" onClick={() => setModuleStates((prev) => ({ ...prev, listening: defaultModuleState("listening") }))} className="text-xs">
+            <RotateCcw className="h-3 w-3 mr-1" /> Reset Module
+          </Button>
+        </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">
+                      Category <ChevronDown className="h-3 w-3" />
+                    </CollapsibleTrigger>
+                    <CollapsibleContent className="pt-2">
+                      <Input value={sec.category} placeholder="Category" className="h-8 text-xs"
+                        onChange={(e) => {
+                          const sections = [...st.listeningSections]; sections[si] = { ...sections[si], category: e.target.value };
+                          updateModuleState("listening", { listeningSections: sections });
+                        }} />
+                    </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">
+                      Divider <ChevronDown className="h-3 w-3" />
+                    </CollapsibleTrigger>
+                    <CollapsibleContent className="pt-2">
+                      <Select value={sec.divider} onValueChange={(v) => {
+                        const sections = [...st.listeningSections]; sections[si] = { ...sections[si], divider: v };
+                        updateModuleState("listening", { listeningSections: sections });
+                      }}>
+                        <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select divider..." /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="none">None</SelectItem>
+                          <SelectItem value="line">Line</SelectItem>
+                          <SelectItem value="space">Space</SelectItem>
+                          <SelectItem value="page_break">Page Break</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </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">
                       Audio Context <ChevronDown className="h-3 w-3" />
@@ -883,26 +1030,6 @@ export default function GenerationPage() {
                       </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" />
@@ -921,20 +1048,139 @@ export default function GenerationPage() {
                       )}
                     </CollapsibleContent>
                   </Collapsible>
+                  <Button size="sm" className="w-full text-xs" variant="outline" disabled={!sec.context}
+                    onClick={() => openExerciseWizard(si, "listening")}>
+                    <ListChecks className="h-3 w-3 mr-1" />
+                    {sec.exercises.length > 0
+                      ? `Exercises (${sec.exercises.length}) — Add More`
+                      : "Set Up Exercises"}
+                  </Button>
                 </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>
+                  <div className="flex items-center justify-between">
+                    <h4 className="text-sm font-semibold">{LISTENING_SECTION_TYPES.find((t) => t.key === sec.type)?.label}</h4>
+                    <div className="flex gap-1">
+                      <Button size="sm" variant="outline" className="h-6 text-xs" disabled={!sec.context}>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 sections = [...st.listeningSections]; sections[si] = { ...sections[si], editing: !sections[si].editing };
+                          updateModuleState("listening", { listeningSections: sections });
+                        }}>Edit</Button>
+                    </div>
+                  </div>
                   <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" />
+                    }} className="min-h-[120px] text-xs" readOnly={!sec.editing} />
                 </CardContent>
               </Card>
+
+              {sec.exercises.length > 0 && (
+                <Card className="border-orange-200 bg-orange-50/30">
+                  <CardContent className="p-4 space-y-3">
+                    <div className="flex items-center justify-between">
+                      <h4 className="text-sm font-semibold text-orange-700">Exercises ({sec.exercises.length})</h4>
+                      <Button size="sm" variant="ghost" className="h-6 text-xs text-destructive hover:text-destructive"
+                        onClick={() => {
+                          const sections = [...st.listeningSections];
+                          sections[si] = { ...sections[si], exercises: [] };
+                          updateModuleState("listening", { listeningSections: sections });
+                        }}>
+                        <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[] }> = {};
+                        sec.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 = LISTENING_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-orange-200 pb-1">
+                                <div className="flex items-center justify-between">
+                                  <h5 className="text-xs font-semibold text-orange-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({ module: "listening", itemIndex: si, 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 sections = [...st.listeningSections];
+                                            sections[si] = { ...sections[si], exercises: sections[si].exercises.filter((_, idx) => idx !== ei) };
+                                            updateModuleState("listening", { listeningSections: sections });
+                                          }}>
+                                          <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>
@@ -969,19 +1215,72 @@ export default function GenerationPage() {
             ))}
             {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 };
+                const newT = defaultWritingTask();
+                newT.type = "essay";
+                newT.wordLimit = 250;
                 updateModuleState("writing", { writingTasks: [...st.writingTasks, newT] });
               }}><Plus className="h-3 w-3 mr-1" /> Add Task 2</Button>
             )}
           </div>
         </div>
 
+        <Button variant="ghost" size="sm" onClick={() => setModuleStates((prev) => ({ ...prev, writing: defaultModuleState("writing") }))} 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.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">
+                      Category <ChevronDown className="h-3 w-3" />
+                    </CollapsibleTrigger>
+                    <CollapsibleContent className="pt-2">
+                      <Input value={task.category} placeholder="Category" className="h-8 text-xs"
+                        onChange={(e) => {
+                          const tasks = [...st.writingTasks]; tasks[ti] = { ...tasks[ti], category: e.target.value };
+                          updateModuleState("writing", { writingTasks: tasks });
+                        }} />
+                    </CollapsibleContent>
+                  </Collapsible>
+                  <Collapsible>
+                    <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-green-100 rounded px-2 py-1">
+                      Type <ChevronDown className="h-3 w-3" />
+                    </CollapsibleTrigger>
+                    <CollapsibleContent className="pt-2">
+                      <Select value={task.type} onValueChange={(v) => {
+                        const tasks = [...st.writingTasks]; tasks[ti] = { ...tasks[ti], type: v };
+                        updateModuleState("writing", { writingTasks: tasks });
+                      }}>
+                        <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          {WRITING_TYPES.map((wt) => <SelectItem key={wt.key} value={wt.key}>{wt.label}</SelectItem>)}
+                        </SelectContent>
+                      </Select>
+                    </CollapsibleContent>
+                  </Collapsible>
+                  <Collapsible>
+                    <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-green-100 rounded px-2 py-1">
+                      Divider <ChevronDown className="h-3 w-3" />
+                    </CollapsibleTrigger>
+                    <CollapsibleContent className="pt-2">
+                      <Select value={task.divider} onValueChange={(v) => {
+                        const tasks = [...st.writingTasks]; tasks[ti] = { ...tasks[ti], divider: v };
+                        updateModuleState("writing", { writingTasks: tasks });
+                      }}>
+                        <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select divider..." /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="none">None</SelectItem>
+                          <SelectItem value="line">Line</SelectItem>
+                          <SelectItem value="space">Space</SelectItem>
+                          <SelectItem value="page_break">Page Break</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </CollapsibleContent>
+                  </Collapsible>
                   <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" />
@@ -1009,37 +1308,90 @@ export default function GenerationPage() {
               </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>
+                <CardContent className="p-4 space-y-3">
+                  <div className="flex items-center justify-between flex-wrap gap-2">
+                    <div>
+                      <h4 className="text-sm font-semibold">{WRITING_TYPES.find((wt) => wt.key === task.type)?.label || "Letter"} Instructions</h4>
+                      <p className="text-xs text-muted-foreground">Generate or edit the instructions for the task</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className="flex items-center gap-1">
+                        <Label className="text-xs">Marks</Label>
+                        <Input type="number" value={task.marks} className="h-7 text-xs w-16"
+                          onChange={(e) => {
+                            const tasks = [...st.writingTasks]; tasks[ti] = { ...tasks[ti], marks: Number(e.target.value) };
+                            updateModuleState("writing", { writingTasks: tasks });
+                          }} />
+                      </div>
+                      <Button size="sm" variant="outline" className="h-7 text-xs">Save</Button>
+                      <Button size="sm" variant="outline" className="h-7 text-xs">Discard</Button>
+                      <Button size="sm" variant="outline" className="h-7 text-xs"
+                        onClick={() => {
+                          const tasks = [...st.writingTasks]; tasks[ti] = { ...tasks[ti], editing: !tasks[ti].editing };
+                          updateModuleState("writing", { writingTasks: tasks });
+                        }}>Edit</Button>
                     </div>
                   </div>
-                  <Textarea value={task.instructions} placeholder="Instructions ..." className="min-h-[120px] text-xs"
+                  <div className="flex justify-end">
+                    <Button size="sm" variant={task.graded ? "default" : "outline"}
+                      className={`h-7 text-xs ${task.graded ? "bg-orange-500 hover:bg-orange-600" : ""}`}
+                      onClick={() => {
+                        const tasks = [...st.writingTasks]; tasks[ti] = { ...tasks[ti], graded: !tasks[ti].graded };
+                        updateModuleState("writing", { writingTasks: tasks });
+                      }}>
+                      Graded
+                    </Button>
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-xs font-medium">Exercise Images</Label>
+                    <div className="flex gap-2 flex-wrap">
+                      {task.images.map((img, ii) => (
+                        <div key={ii} className="relative w-20 h-20 rounded border border-dashed border-green-300 bg-green-50 flex items-center justify-center">
+                          <img src={img} alt={`img-${ii}`} className="w-full h-full object-cover rounded" />
+                          <button className="absolute -top-1 -right-1 bg-white rounded-full shadow"
+                            onClick={() => {
+                              const tasks = [...st.writingTasks];
+                              tasks[ti] = { ...tasks[ti], images: tasks[ti].images.filter((_, idx) => idx !== ii) };
+                              updateModuleState("writing", { writingTasks: tasks });
+                            }}><X className="h-3 w-3 text-destructive" /></button>
+                        </div>
+                      ))}
+                      <button className="w-20 h-20 rounded border-2 border-dashed border-green-300 bg-green-50/50 flex flex-col items-center justify-center text-green-600 hover:bg-green-100 transition-colors"
+                        onClick={() => {
+                          const input = document.createElement("input");
+                          input.type = "file";
+                          input.accept = "image/*";
+                          input.onchange = (e) => {
+                            const file = (e.target as HTMLInputElement).files?.[0];
+                            if (!file) return;
+                            const reader = new FileReader();
+                            reader.onload = () => {
+                              const tasks = [...st.writingTasks];
+                              tasks[ti] = { ...tasks[ti], images: [...tasks[ti].images, reader.result as string] };
+                              updateModuleState("writing", { writingTasks: tasks });
+                            };
+                            reader.readAsDataURL(file);
+                          };
+                          input.click();
+                        }}>
+                        <Plus className="h-4 w-4" />
+                        <span className="text-[10px]">Add Image</span>
+                      </button>
+                    </div>
+                  </div>
+                  <Textarea value={task.instructions} placeholder="Instructions ..." className="min-h-[100px] text-xs"
+                    readOnly={!task.editing}
                     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 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>
                 </CardContent>
               </Card>
@@ -1084,19 +1436,53 @@ export default function GenerationPage() {
               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] });
+                updateModuleState("speaking", { speakingParts: [...st.speakingParts, defaultSpeakingPart(nextType.key)] });
               }
             }}><Plus className="h-3 w-3 mr-1" /> Add</Button>
           </div>
         </div>
 
+        <Button variant="ghost" size="sm" onClick={() => setModuleStates((prev) => ({ ...prev, speaking: defaultModuleState("speaking") }))} 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.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">
+                      Category <ChevronDown className="h-3 w-3" />
+                    </CollapsibleTrigger>
+                    <CollapsibleContent className="pt-2">
+                      <Input value={part.category} placeholder="Category" className="h-8 text-xs"
+                        onChange={(e) => {
+                          const parts = [...st.speakingParts]; parts[pi] = { ...parts[pi], category: e.target.value };
+                          updateModuleState("speaking", { speakingParts: parts });
+                        }} />
+                    </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">
+                      Divider <ChevronDown className="h-3 w-3" />
+                    </CollapsibleTrigger>
+                    <CollapsibleContent className="pt-2">
+                      <Select value={part.divider} onValueChange={(v) => {
+                        const parts = [...st.speakingParts]; parts[pi] = { ...parts[pi], divider: v };
+                        updateModuleState("speaking", { speakingParts: parts });
+                      }}>
+                        <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select divider..." /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="none">None</SelectItem>
+                          <SelectItem value="line">Line</SelectItem>
+                          <SelectItem value="space">Space</SelectItem>
+                          <SelectItem value="page_break">Page Break</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </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 Script <ChevronDown className="h-3 w-3" />
@@ -1158,27 +1544,39 @@ export default function GenerationPage() {
               <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>
+                      <h4 className="text-sm font-semibold">{partTypes.find((t) => t.key === part.type)?.label} Script</h4>
+                      <p className="text-xs text-muted-foreground">Generate or write the scripts for the videos.</p>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <div className="flex items-center gap-1 mr-2">
+                        <Label className="text-xs">Marks</Label>
+                        <Input type="number" value={part.marks} className="h-7 text-xs w-16"
+                          onChange={(e) => {
+                            const parts = [...st.speakingParts]; parts[pi] = { ...parts[pi], marks: Number(e.target.value) };
+                            updateModuleState("speaking", { speakingParts: parts });
+                          }} />
+                      </div>
+                      <Button size="sm" variant="outline" className="h-7 text-xs">Save</Button>
+                      <Button size="sm" variant="outline" className="h-7 text-xs">Discard</Button>
+                      <Button size="sm" variant="outline" className="h-7 text-xs"
+                        onClick={() => {
+                          const parts = [...st.speakingParts]; parts[pi] = { ...parts[pi], editing: !parts[pi].editing };
+                          updateModuleState("speaking", { speakingParts: parts });
+                        }}>Edit</Button>
                     </div>
                   </div>
-                  <p className="text-xs text-muted-foreground">Generate or write the scripts for the videos.</p>
+                  <div className="flex justify-end">
+                    <Button size="sm" variant="default" className="h-7 text-xs bg-orange-500 hover:bg-orange-600">
+                      Graded
+                    </Button>
+                  </div>
                   <Textarea value={part.script} placeholder="Generate or edit the questions!" className="min-h-[120px] text-xs"
+                    readOnly={!part.editing}
                     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>
@@ -1188,6 +1586,366 @@ export default function GenerationPage() {
     );
   };
 
+  const renderLevelModule = () => {
+    if (activeModule !== "level") return null;
+    const st = getModuleState("level");
+    const renderLevelDifficulty = () => (
+      <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("level", { 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("level", { 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>
+    );
+    return (
+      <div className="space-y-4">
+        <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("level", { timer: Number(e.target.value) || 1 })} className="h-8 text-xs" />
+          </div>
+          {renderLevelDifficulty()}
+          <div className="space-y-1">
+            <Label className="text-xs">Number of Parts</Label>
+            <Input type="number" value={st.numberOfParts} min={1} max={5} className="h-8 text-xs"
+              onChange={(e) => {
+                const n = Math.max(1, Math.min(5, Number(e.target.value) || 1));
+                const parts = [...st.levelParts];
+                while (parts.length < n) parts.push(defaultLevelPart());
+                updateModuleState("level", { numberOfParts: n, levelParts: parts.slice(0, n) });
+              }} />
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">Access Type</Label>
+            <Select value={st.accessType} onValueChange={(v) => updateModuleState("level", { 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("level", { entity: v })}>
+              <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select..." /></SelectTrigger>
+              <SelectContent><SelectItem value="none">None</SelectItem></SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-2 col-span-2 md:col-span-1">
+            <Switch checked={st.shuffling} onCheckedChange={(v) => updateModuleState("level", { shuffling: v })} />
+            <Label className="text-xs">Shuffling Enabled</Label>
+          </div>
+        </div>
+
+        <Button variant="ghost" size="sm" onClick={() => setModuleStates((prev) => ({ ...prev, level: defaultModuleState("level") }))} className="text-xs">
+          <RotateCcw className="h-3 w-3 mr-1" /> Reset Module
+        </Button>
+
+        {st.levelParts.map((part, partIdx) => (
+          <Card key={partIdx} className="border-purple-200 bg-purple-50/30">
+            <CardContent className="p-4 space-y-3">
+              <h4 className="text-sm font-semibold text-purple-700 text-center">Part {partIdx + 1} Settings</h4>
+
+              <Collapsible>
+                <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-purple-200 text-purple-800 rounded px-2 py-1.5">
+                  Category <ChevronDown className="h-3 w-3" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="pt-2">
+                  <Input value={part.category} placeholder="Category" className="h-8 text-xs"
+                    onChange={(e) => {
+                      const parts = [...st.levelParts]; parts[partIdx] = { ...parts[partIdx], category: e.target.value };
+                      updateModuleState("level", { levelParts: parts });
+                    }} />
+                </CollapsibleContent>
+              </Collapsible>
+
+              <Collapsible>
+                <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-purple-200 text-purple-800 rounded px-2 py-1.5">
+                  Divider <ChevronDown className="h-3 w-3" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="pt-2">
+                  <Select value={part.divider} onValueChange={(v) => {
+                    const parts = [...st.levelParts]; parts[partIdx] = { ...parts[partIdx], divider: v };
+                    updateModuleState("level", { levelParts: parts });
+                  }}>
+                    <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select divider..." /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none">None</SelectItem><SelectItem value="line">Line</SelectItem>
+                      <SelectItem value="space">Space</SelectItem><SelectItem value="page_break">Page Break</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </CollapsibleContent>
+              </Collapsible>
+
+              <Collapsible>
+                <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-purple-300 text-purple-900 rounded px-2 py-1.5">
+                  Add Level Exercises <ChevronDown className="h-3 w-3" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="pt-2 space-y-1">
+                  {LEVEL_EXERCISE_TYPES.map((et) => (
+                    <div key={et.key} className="flex items-center gap-2">
+                      <Checkbox id={`lvl-${partIdx}-${et.key}`}
+                        checked={part.levelExerciseTypes.includes(et.key)}
+                        onCheckedChange={(checked) => {
+                          const parts = [...st.levelParts];
+                          const types = checked ? [...parts[partIdx].levelExerciseTypes, et.key] : parts[partIdx].levelExerciseTypes.filter((t) => t !== et.key);
+                          parts[partIdx] = { ...parts[partIdx], levelExerciseTypes: types };
+                          updateModuleState("level", { levelParts: parts });
+                        }} />
+                      <Label htmlFor={`lvl-${partIdx}-${et.key}`} className="text-xs">{et.label}</Label>
+                    </div>
+                  ))}
+                  <Button size="sm" variant="outline" className="w-full text-xs mt-2" disabled={part.levelExerciseTypes.length === 0}>
+                    <Settings2 className="h-3 w-3 mr-1" /> Set Up Exercises ({part.levelExercises.length})
+                  </Button>
+                </CollapsibleContent>
+              </Collapsible>
+
+              <Collapsible>
+                <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-blue-200 text-blue-800 rounded px-2 py-1.5">
+                  Add Reading Exercises <ChevronDown className="h-3 w-3" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="pt-2 space-y-2">
+                  <div className="flex gap-1 flex-wrap">
+                    {part.readingPassages.map((_, pi) => (
+                      <Badge key={pi} variant="outline" className="text-[10px]">
+                        <Checkbox className="mr-1 h-3 w-3" checked />
+                        Passage {pi + 1}
+                      </Badge>
+                    ))}
+                  </div>
+                  <p className="text-[10px] text-muted-foreground">Reading exercises: Multiple Choice, Fill Blanks, Write Blanks, True False, Paragraph Match</p>
+                </CollapsibleContent>
+              </Collapsible>
+
+              <Collapsible>
+                <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-orange-200 text-orange-800 rounded px-2 py-1.5">
+                  Add Listening Exercises <ChevronDown className="h-3 w-3" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="pt-2 space-y-2">
+                  <div className="flex gap-1 flex-wrap">
+                    {part.listeningSections.map((_, si) => (
+                      <Badge key={si} variant="outline" className="text-[10px]">
+                        <Checkbox className="mr-1 h-3 w-3" checked />
+                        Section {si + 1}
+                      </Badge>
+                    ))}
+                  </div>
+                  <p className="text-[10px] text-muted-foreground">Listening exercises: MC, Write Blanks, True False, Fill, Form</p>
+                </CollapsibleContent>
+              </Collapsible>
+
+              <Collapsible>
+                <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-green-200 text-green-800 rounded px-2 py-1.5">
+                  Add Writing Exercises <ChevronDown className="h-3 w-3" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="pt-2 space-y-1">
+                  <div className="flex items-center gap-2">
+                    <Checkbox checked />
+                    <Label className="text-xs">Task 1 - Letter</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Checkbox checked />
+                    <Label className="text-xs">Task 2 - Essay</Label>
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+
+              <Collapsible>
+                <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-pink-200 text-pink-800 rounded px-2 py-1.5">
+                  Add Speaking Exercises <ChevronDown className="h-3 w-3" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="pt-2 space-y-1">
+                  <div className="flex items-center gap-2">
+                    <Checkbox checked />
+                    <Label className="text-xs">Exercise 1</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Checkbox checked />
+                    <Label className="text-xs">Exercise 2</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Checkbox checked />
+                    <Label className="text-xs">Interactive</Label>
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    );
+  };
+
+  const renderIndustryModule = () => {
+    if (activeModule !== "industry") return null;
+    const st = getModuleState("industry");
+    return (
+      <div className="space-y-4">
+        <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("industry", { timer: Number(e.target.value) || 1 })} className="h-8 text-xs" />
+          </div>
+          <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("industry", { 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("industry", { difficulty: [...st.difficulty, v] }); }}>
+                <SelectTrigger className="h-6 w-16 text-xs"><Plus className="h-3 w-3" /></SelectTrigger>
+                <SelectContent>{INDUSTRY_DIFFICULTY_LEVELS.filter((l) => !st.difficulty.includes(l)).map((l) => <SelectItem key={l} value={l}>{l}</SelectItem>)}</SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">Number of Parts</Label>
+            <Input type="number" value={st.numberOfParts} min={1} max={5} className="h-8 text-xs"
+              onChange={(e) => {
+                const n = Math.max(1, Math.min(5, Number(e.target.value) || 1));
+                const parts = [...st.industryParts];
+                while (parts.length < n) parts.push(defaultIndustryPart());
+                updateModuleState("industry", { numberOfParts: n, industryParts: parts.slice(0, n) });
+              }} />
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">Access Type</Label>
+            <Select value={st.accessType} onValueChange={(v) => updateModuleState("industry", { 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("industry", { entity: v })}>
+              <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select..." /></SelectTrigger>
+              <SelectContent><SelectItem value="none">None</SelectItem></SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-2 col-span-2 md:col-span-1">
+            <Switch checked={st.shuffling} onCheckedChange={(v) => updateModuleState("industry", { shuffling: v })} />
+            <Label className="text-xs">Shuffling Enabled</Label>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label className="text-xs font-medium">Attachments for context</Label>
+          <div className="flex gap-2 flex-wrap">
+            {st.industryParts[0]?.attachments.map((att, ai) => (
+              <Badge key={ai} variant="secondary" className="text-xs gap-1">
+                <FileText className="h-3 w-3" /> {att.split("/").pop() || `File ${ai + 1}`}
+                <button onClick={() => {
+                  const parts = [...st.industryParts];
+                  parts[0] = { ...parts[0], attachments: parts[0].attachments.filter((_, idx) => idx !== ai) };
+                  updateModuleState("industry", { industryParts: parts });
+                }} className="ml-0.5 hover:text-destructive"><X className="h-3 w-3" /></button>
+              </Badge>
+            ))}
+            <Button variant="outline" size="sm" className="text-xs" onClick={() => {
+              const input = document.createElement("input");
+              input.type = "file";
+              input.onchange = (e) => {
+                const file = (e.target as HTMLInputElement).files?.[0];
+                if (!file) return;
+                const parts = [...st.industryParts];
+                parts[0] = { ...parts[0], attachments: [...parts[0].attachments, file.name] };
+                updateModuleState("industry", { industryParts: parts });
+                toast({ title: "Attachment added", description: file.name });
+              };
+              input.click();
+            }}>
+              <Plus className="h-3 w-3 mr-1" /> Add Attachment
+            </Button>
+          </div>
+        </div>
+
+        <Button variant="ghost" size="sm" onClick={() => setModuleStates((prev) => ({ ...prev, industry: defaultModuleState("industry") }))} className="text-xs">
+          <RotateCcw className="h-3 w-3 mr-1" /> Reset Module
+        </Button>
+
+        {st.industryParts.map((part, partIdx) => (
+          <Card key={partIdx} className="border-amber-300 bg-amber-50/30">
+            <CardContent className="p-4 space-y-3">
+              <h4 className="text-sm font-semibold text-amber-800 text-center">Part {partIdx + 1} Settings</h4>
+
+              <Collapsible>
+                <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-amber-200 text-amber-800 rounded px-2 py-1.5">
+                  Category <ChevronDown className="h-3 w-3" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="pt-2">
+                  <Input value={part.category} placeholder="Category" className="h-8 text-xs"
+                    onChange={(e) => {
+                      const parts = [...st.industryParts]; parts[partIdx] = { ...parts[partIdx], category: e.target.value };
+                      updateModuleState("industry", { industryParts: parts });
+                    }} />
+                </CollapsibleContent>
+              </Collapsible>
+
+              <Collapsible>
+                <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-amber-200 text-amber-800 rounded px-2 py-1.5">
+                  Divider <ChevronDown className="h-3 w-3" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="pt-2">
+                  <Select value={part.divider} onValueChange={(v) => {
+                    const parts = [...st.industryParts]; parts[partIdx] = { ...parts[partIdx], divider: v };
+                    updateModuleState("industry", { industryParts: parts });
+                  }}>
+                    <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select divider..." /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none">None</SelectItem><SelectItem value="line">Line</SelectItem>
+                      <SelectItem value="space">Space</SelectItem><SelectItem value="page_break">Page Break</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </CollapsibleContent>
+              </Collapsible>
+
+              <Collapsible>
+                <CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium w-full justify-between bg-amber-300 text-amber-900 rounded px-2 py-1.5">
+                  Add Industry Exercises <ChevronDown className="h-3 w-3" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="pt-2 space-y-1">
+                  {INDUSTRY_EXERCISE_TYPES.map((et) => (
+                    <div key={et.key} className="flex items-center gap-2">
+                      <Checkbox id={`ind-${partIdx}-${et.key}`}
+                        checked={part.exerciseTypes.includes(et.key)}
+                        onCheckedChange={(checked) => {
+                          const parts = [...st.industryParts];
+                          const types = checked ? [...parts[partIdx].exerciseTypes, et.key] : parts[partIdx].exerciseTypes.filter((t) => t !== et.key);
+                          parts[partIdx] = { ...parts[partIdx], exerciseTypes: types };
+                          updateModuleState("industry", { industryParts: parts });
+                        }} />
+                      <Label htmlFor={`ind-${partIdx}-${et.key}`} className="text-xs">{et.label}</Label>
+                    </div>
+                  ))}
+                  <Button size="sm" variant="outline" className="w-full text-xs mt-2" disabled={part.exerciseTypes.length === 0}>
+                    <Settings2 className="h-3 w-3 mr-1" /> Set Up Exercises ({part.exercises.length})
+                  </Button>
+                </CollapsibleContent>
+              </Collapsible>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    );
+  };
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
@@ -1293,6 +2051,8 @@ export default function GenerationPage() {
       {activeModule === "listening" && renderListeningModule()}
       {activeModule === "writing" && renderWritingModule()}
       {activeModule === "speaking" && renderSpeakingModule()}
+      {activeModule === "level" && renderLevelModule()}
+      {activeModule === "industry" && renderIndustryModule()}
 
       {selectedModules.size > 0 && activeModule && (
         <div className="flex flex-wrap gap-3 pt-4 border-t">
@@ -1416,6 +2176,30 @@ export default function GenerationPage() {
                     </div>
                   ))}
 
+                  {mod === "level" && st.levelParts.map((lp, i) => (
+                    <div key={i} className="bg-muted/50 rounded p-3 space-y-2">
+                      <h4 className="font-medium text-sm">Part {i + 1}</h4>
+                      {lp.levelExerciseTypes.length > 0 && (
+                        <p className="text-xs text-purple-600">Level exercises: {lp.levelExerciseTypes.join(", ")}</p>
+                      )}
+                      <p className="text-xs text-muted-foreground">
+                        {lp.readingPassages.length} passages · {lp.listeningSections.length} listening sections · {lp.writingTasks.length} writing tasks · {lp.speakingParts.length} speaking parts
+                      </p>
+                    </div>
+                  ))}
+
+                  {mod === "industry" && st.industryParts.map((ip, i) => (
+                    <div key={i} className="bg-muted/50 rounded p-3 space-y-2">
+                      <h4 className="font-medium text-sm">Part {i + 1}</h4>
+                      {ip.exerciseTypes.length > 0 && (
+                        <p className="text-xs text-amber-700">Industry exercises: {ip.exerciseTypes.map((t) => INDUSTRY_EXERCISE_TYPES.find((et) => et.key === t)?.label || t).join(", ")}</p>
+                      )}
+                      {ip.attachments.length > 0 && (
+                        <p className="text-xs text-muted-foreground">{ip.attachments.length} attachment(s)</p>
+                      )}
+                    </div>
+                  ))}
+
                   {st.shuffling && <p className="text-xs text-muted-foreground">Shuffling enabled</p>}
                 </div>
               );
@@ -1433,23 +2217,23 @@ export default function GenerationPage() {
         <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" />
+              <Settings2 className={`h-5 w-5 ${exerciseWizard.module === "listening" ? "text-orange-600" : "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."}
+                ? `Choose exercise types, set how many of each, and customize difficulty for ${exerciseWizard.module}.`
+                : `Exercises have been generated and added to your ${exerciseWizard.module === "listening" ? "section" : "passage"}.`}
             </DialogDescription>
           </DialogHeader>
 
           {exerciseWizard.step === 0 && (
             <div className="space-y-3 pt-2">
-              {READING_EXERCISE_TYPES.map((et) => {
+              {(exerciseWizard.module === "listening" ? LISTENING_EXERCISE_TYPES : 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 key={et.key} className={`rounded-lg border p-3 transition-colors ${cfg.enabled ? (exerciseWizard.module === "listening" ? "bg-orange-50/60 border-orange-200" : "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
@@ -1581,9 +2365,12 @@ export default function GenerationPage() {
                 </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 mod = exerciseWizard.module;
+                    const st = getModuleState(mod);
+                    const text = mod === "listening"
+                      ? st.listeningSections[exerciseWizard.itemIndex]?.context
+                      : st.passages[exerciseWizard.itemIndex]?.text;
+                    if (!text) return;
                     const types = wizardEnabledTypes.map(([key]) => key);
                     const typeCounts: Record<string, number> = {};
                     const typeInstructions: Record<string, string> = {};
@@ -1593,12 +2380,12 @@ export default function GenerationPage() {
                     }
                     const difficulty = wizardEnabledTypes[0]?.[1]?.difficulty || st.difficulty[0] || "B2";
                     generateExercisesMut.mutate({
-                      module: "reading",
-                      passageIndex: exerciseWizard.passageIndex,
+                      module: mod,
+                      passageIndex: exerciseWizard.itemIndex,
                       types,
                       typeCounts,
                       typeInstructions,
-                      passageText: passage.text,
+                      passageText: text,
                       difficulty,
                     });
                   }}>
@@ -1632,7 +2419,7 @@ export default function GenerationPage() {
                 <Select value={exerciseDraft.type} onValueChange={(v) => setExerciseDraft({ ...exerciseDraft, type: v })}>
                   <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
                   <SelectContent>
-                    {READING_EXERCISE_TYPES.map((et) => (
+                    {(editingExercise?.module === "listening" ? LISTENING_EXERCISE_TYPES : READING_EXERCISE_TYPES).map((et) => (
                       <SelectItem key={et.key} value={et.key}>{et.label}</SelectItem>
                     ))}
                   </SelectContent>
@@ -1717,12 +2504,21 @@ export default function GenerationPage() {
                 </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 });
+                  const mod = editingExercise.module;
+                  const st = getModuleState(mod);
+                  if (mod === "listening") {
+                    const sections = [...st.listeningSections];
+                    const exercises = [...sections[editingExercise.itemIndex].exercises];
+                    exercises[editingExercise.exerciseIndex] = exerciseDraft;
+                    sections[editingExercise.itemIndex] = { ...sections[editingExercise.itemIndex], exercises };
+                    updateModuleState(mod, { listeningSections: sections });
+                  } else {
+                    const passages = [...st.passages];
+                    const exercises = [...passages[editingExercise.itemIndex].exercises];
+                    exercises[editingExercise.exerciseIndex] = exerciseDraft;
+                    passages[editingExercise.itemIndex] = { ...passages[editingExercise.itemIndex], exercises };
+                    updateModuleState(mod, { passages });
+                  }
                   setEditingExercise(null);
                   setExerciseDraft(null);
                   toast({ title: "Exercise updated" });