encoach_frontend_new_v2/src/pages/admin/wizards/CourseWizard.tsx

import { useNavigate } from "react-router-dom";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";

import { StepWizard, type WizardStepDef } from "@/components/wizard/StepWizard";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { lmsService } from "@/services/lms.service";
import { describeApiError } from "@/lib/api-client";
import type { CourseCreateRequest } from "@/types";

/**
 * Course creation wizard (3 steps).
 *
 * 1. Basics — title, code (auto-derived from title by default), description
 * 2. Level & capacity — difficulty, CEFR level, max capacity
 * 3. Review → Finish posts to lmsService.createCourse
 *
 * Mirrors the fields of the existing AdminCourses "New course" dialog but
 * surfaced as a guided flow. Fields the admin normally leaves blank
 * (topic_ids, tag_ids, subject_id) are omitted here; they can be refined
 * on the full course page after the course is created.
 */

interface CourseWizardState {
  title: string;
  code: string;
  description: string;
  difficulty_level: "beginner" | "intermediate" | "advanced" | "";
  cefr_level: string;
  max_capacity: number;
}

const INITIAL: CourseWizardState = {
  title: "",
  code: "",
  description: "",
  difficulty_level: "",
  cefr_level: "",
  max_capacity: 30,
};

/**
 * Odoo `op.course.cefr_level` is a Selection field with lowercase keys
 * (`pre_a1`, `a1`, `a2`, …). Sending `"A2"` raises
 * `Wrong value for op.course.cefr_level` (HTTP 500). We display the
 * uppercase label but always submit the lowercase key.
 */
const CEFR_LEVELS: { value: string; label: string }[] = [
  { value: "pre_a1", label: "Pre-A1" },
  { value: "a1", label: "A1" },
  { value: "a2", label: "A2" },
  { value: "b1", label: "B1" },
  { value: "b2", label: "B2" },
  { value: "c1", label: "C1" },
  { value: "c2", label: "C2" },
];

function deriveCode(title: string): string {
  return title.trim().toUpperCase().replace(/\s+/g, "-").slice(0, 16);
}

export default function CourseWizard() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const qc = useQueryClient();

  const createMut = useMutation({
    mutationFn: (data: CourseCreateRequest) => lmsService.createCourse(data),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["lms", "courses"] });
      toast.success(t("wizard.course.toastSuccess"));
      navigate("/admin/courses");
    },
    onError: (err: unknown) => {
      toast.error(describeApiError(err, t("wizard.course.toastError")));
    },
  });

  const steps: WizardStepDef<CourseWizardState>[] = [
    {
      id: "basics",
      titleKey: "wizard.course.step1.title",
      descriptionKey: "wizard.course.step1.description",
      validate: (s) => {
        if (!s.title.trim()) return t("wizard.course.errors.titleRequired");
        return null;
      },
      render: ({ state, update }) => (
        <div className="space-y-4">
          <div className="space-y-1.5">
            <Label htmlFor="course-title">{t("wizard.course.labels.title")}</Label>
            <Input
              id="course-title"
              value={state.title}
              onChange={(e) => update({ title: e.target.value })}
              placeholder={t("wizard.course.placeholders.title")}
            />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="course-code">{t("wizard.course.labels.code")}</Label>
            <Input
              id="course-code"
              value={state.code}
              onChange={(e) => update({ code: e.target.value })}
              placeholder={deriveCode(state.title) || t("wizard.course.placeholders.code")}
            />
            <p className="text-xs text-muted-foreground">{t("wizard.course.codeHint")}</p>
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="course-desc">{t("wizard.course.labels.description")}</Label>
            <Textarea
              id="course-desc"
              value={state.description}
              onChange={(e) => update({ description: e.target.value })}
              placeholder={t("wizard.course.placeholders.description")}
              rows={4}
            />
          </div>
        </div>
      ),
    },

    {
      id: "level",
      titleKey: "wizard.course.step2.title",
      descriptionKey: "wizard.course.step2.description",
      validate: (s) => {
        if (s.max_capacity < 1) return t("wizard.course.errors.capacityRequired");
        return null;
      },
      render: ({ state, update }) => (
        <div className="space-y-4">
          <div className="space-y-1.5">
            <Label>{t("wizard.course.labels.difficulty")}</Label>
            <Select
              value={state.difficulty_level || undefined}
              onValueChange={(v) =>
                update({ difficulty_level: v as CourseWizardState["difficulty_level"] })
              }
            >
              <SelectTrigger>
                <SelectValue placeholder={t("wizard.course.placeholders.difficulty")} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="beginner">{t("wizard.course.difficulty.beginner")}</SelectItem>
                <SelectItem value="intermediate">
                  {t("wizard.course.difficulty.intermediate")}
                </SelectItem>
                <SelectItem value="advanced">{t("wizard.course.difficulty.advanced")}</SelectItem>
              </SelectContent>
            </Select>
            <p className="text-xs text-muted-foreground">{t("wizard.course.difficultyHint")}</p>
          </div>

          <div className="space-y-1.5">
            <Label>{t("wizard.course.labels.cefrLevel")}</Label>
            <Select
              value={state.cefr_level || undefined}
              onValueChange={(v) => update({ cefr_level: v })}
            >
              <SelectTrigger>
                <SelectValue placeholder={t("wizard.course.placeholders.cefr")} />
              </SelectTrigger>
              <SelectContent>
                {CEFR_LEVELS.map((lvl) => (
                  <SelectItem key={lvl.value} value={lvl.value}>
                    {lvl.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <p className="text-xs text-muted-foreground">{t("wizard.course.cefrHint")}</p>
          </div>

          <div className="space-y-1.5">
            <Label htmlFor="course-capacity">{t("wizard.course.labels.capacity")}</Label>
            <Input
              id="course-capacity"
              type="number"
              min={1}
              value={state.max_capacity}
              onChange={(e) => update({ max_capacity: Number(e.target.value) || 0 })}
            />
          </div>
        </div>
      ),
    },

    {
      id: "review",
      titleKey: "wizard.course.step3.title",
      descriptionKey: "wizard.course.step3.description",
      render: ({ state }) => (
        <div className="space-y-4 text-sm">
          <ReviewRow label={t("wizard.course.labels.title")} value={state.title} />
          <ReviewRow
            label={t("wizard.course.labels.code")}
            value={state.code || deriveCode(state.title)}
          />
          {state.description && (
            <ReviewRow
              label={t("wizard.course.labels.description")}
              value={state.description}
              wrap
            />
          )}
          <ReviewRow
            label={t("wizard.course.labels.difficulty")}
            value={
              state.difficulty_level
                ? t(`wizard.course.difficulty.${state.difficulty_level}`)
                : "—"
            }
          />
          <ReviewRow
            label={t("wizard.course.labels.cefrLevel")}
            value={
              CEFR_LEVELS.find((l) => l.value === state.cefr_level)?.label || "—"
            }
          />
          <ReviewRow
            label={t("wizard.course.labels.capacity")}
            value={String(state.max_capacity)}
          />
        </div>
      ),
    },
  ];

  return (
    <StepWizard<CourseWizardState>
      titleKey="wizard.course.title"
      subtitleKey="wizard.course.subtitle"
      backTo="/admin/smart-wizard"
      steps={steps}
      initialState={INITIAL}
      submitting={createMut.isPending}
      finishLabelKey="wizard.course.finish"
      onFinish={async (state) => {
        const payload: Partial<CourseCreateRequest> = {
          title: state.title.trim(),
          code: state.code.trim() || deriveCode(state.title),
          description: state.description,
          max_capacity: state.max_capacity,
          difficulty_level: state.difficulty_level || undefined,
          cefr_level: state.cefr_level || undefined,
        };
        await createMut.mutateAsync(payload as CourseCreateRequest);
      }}
    />
  );
}

function ReviewRow({ label, value, wrap }: { label: string; value: string; wrap?: boolean }) {
  return (
    <div className="grid grid-cols-[140px_1fr] gap-2">
      <div className="text-muted-foreground">{label}</div>
      <div className={wrap ? "whitespace-pre-wrap" : ""}>{value || "—"}</div>
    </div>
  );
}