encoach_frontend_v4/src/pages/admin/wizards/CoursePlanWizard.tsx

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

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 { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { coursePlanService } from "@/services/coursePlan.service";
import { describeApiError } from "@/lib/api-client";
import type { CoursePlanGenerateBrief } from "@/types";

/**
 * AI course-plan generation wizard.
 *
 * Four steps:
 *   1. Basics         — title, CEFR level, total weeks, contact hours.
 *   2. Coverage       — skills division (e.g. "10 hrs Reading+Writing /
 *                       8 hrs Listening+Speaking"), learner profile.
 *   3. Scope          — grammar focus chips, resource citations chips,
 *                       optional free-form notes.
 *   4. Review         — finish → POST /api/ai/course-plan which triggers
 *                       the OpenAI call, persists the plan, and returns
 *                       the finished record; we navigate to the detail
 *                       page so the user can start generating Week 1
 *                       materials immediately.
 */

interface CoursePlanWizardState {
  title: string;
  cefr_level: string;
  total_weeks: number;
  contact_hours_per_week: number;
  skills_division: string;
  learner_profile: string;
  grammar_focus: string[];
  resources: string[];
  notes: string;
}

const CEFR_OPTIONS = [
  { 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" },
];

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

  const mutation = useMutation({
    mutationFn: (brief: CoursePlanGenerateBrief) =>
      coursePlanService.generate(brief),
    onSuccess: (resp) => {
      qc.invalidateQueries({ queryKey: ["course-plans"] });
      toast.success(t("coursePlan.generateSuccess"));
      const id = resp?.data?.id;
      if (id) navigate(`/admin/course-plans/${id}`);
      else navigate("/admin/course-plans");
    },
    onError: (err) => {
      toast.error(describeApiError(err, t("coursePlan.generateFailed")));
    },
  });

  const steps: WizardStepDef<CoursePlanWizardState>[] = [
    {
      id: "basics",
      titleKey: "coursePlan.wizard.steps.basics",
      descriptionKey: "coursePlan.wizard.steps.basicsDesc",
      validate: (s) => {
        if (!s.title.trim()) return t("coursePlan.wizard.errors.titleRequired");
        if (!s.cefr_level) return t("coursePlan.wizard.errors.cefrRequired");
        if (!s.total_weeks || s.total_weeks < 1)
          return t("coursePlan.wizard.errors.weeksRange");
        return null;
      },
      render: ({ state, update }) => (
        <div className="grid gap-4 sm:grid-cols-2">
          <div className="sm:col-span-2">
            <Label htmlFor="title">{t("coursePlan.wizard.fields.title")}</Label>
            <Input
              id="title"
              placeholder="General English 1"
              value={state.title}
              onChange={(e) => update({ title: e.target.value })}
            />
          </div>
          <div>
            <Label>{t("coursePlan.wizard.fields.cefr")}</Label>
            <Select
              value={state.cefr_level}
              onValueChange={(v) => update({ cefr_level: v })}
            >
              <SelectTrigger>
                <SelectValue placeholder={t("coursePlan.wizard.fields.cefrPlaceholder")} />
              </SelectTrigger>
              <SelectContent>
                {CEFR_OPTIONS.map((o) => (
                  <SelectItem key={o.value} value={o.value}>
                    {o.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div>
            <Label htmlFor="weeks">{t("coursePlan.wizard.fields.totalWeeks")}</Label>
            <Input
              id="weeks"
              type="number"
              min={1}
              max={30}
              value={state.total_weeks}
              onChange={(e) => update({ total_weeks: Number(e.target.value) || 0 })}
            />
          </div>
          <div>
            <Label htmlFor="hours">{t("coursePlan.wizard.fields.contactHours")}</Label>
            <Input
              id="hours"
              type="number"
              min={1}
              max={40}
              value={state.contact_hours_per_week}
              onChange={(e) =>
                update({ contact_hours_per_week: Number(e.target.value) || 0 })
              }
            />
          </div>
        </div>
      ),
    },
    {
      id: "coverage",
      titleKey: "coursePlan.wizard.steps.coverage",
      descriptionKey: "coursePlan.wizard.steps.coverageDesc",
      render: ({ state, update }) => (
        <div className="grid gap-4">
          <div>
            <Label htmlFor="skills">
              {t("coursePlan.wizard.fields.skillsDivision")}
            </Label>
            <Input
              id="skills"
              placeholder="10 hrs/wk Reading & Writing + 8 hrs/wk Listening & Speaking"
              value={state.skills_division}
              onChange={(e) => update({ skills_division: e.target.value })}
            />
            <p className="mt-1 text-xs text-muted-foreground">
              {t("coursePlan.wizard.fields.skillsDivisionHint")}
            </p>
          </div>
          <div>
            <Label htmlFor="profile">
              {t("coursePlan.wizard.fields.learnerProfile")}
            </Label>
            <Textarea
              id="profile"
              rows={3}
              placeholder={t("coursePlan.wizard.fields.learnerProfilePlaceholder")}
              value={state.learner_profile}
              onChange={(e) => update({ learner_profile: e.target.value })}
            />
          </div>
        </div>
      ),
    },
    {
      id: "scope",
      titleKey: "coursePlan.wizard.steps.scope",
      descriptionKey: "coursePlan.wizard.steps.scopeDesc",
      render: ({ state, update }) => (
        <div className="grid gap-4">
          <ChipInput
            label={t("coursePlan.wizard.fields.grammarFocus")}
            placeholder={t("coursePlan.wizard.fields.grammarFocusPlaceholder")}
            values={state.grammar_focus}
            onChange={(next) => update({ grammar_focus: next })}
          />
          <ChipInput
            label={t("coursePlan.wizard.fields.resources")}
            placeholder={t("coursePlan.wizard.fields.resourcesPlaceholder")}
            values={state.resources}
            onChange={(next) => update({ resources: next })}
          />
          <div>
            <Label htmlFor="notes">{t("coursePlan.wizard.fields.notes")}</Label>
            <Textarea
              id="notes"
              rows={3}
              placeholder={t("coursePlan.wizard.fields.notesPlaceholder")}
              value={state.notes}
              onChange={(e) => update({ notes: e.target.value })}
            />
          </div>
        </div>
      ),
    },
    {
      id: "review",
      titleKey: "coursePlan.wizard.steps.review",
      descriptionKey: "coursePlan.wizard.steps.reviewDesc",
      render: ({ state }) => (
        <div className="space-y-3 text-sm">
          <ReviewRow label={t("coursePlan.wizard.fields.title")} value={state.title} />
          <ReviewRow
            label={t("coursePlan.wizard.fields.cefr")}
            value={
              CEFR_OPTIONS.find((o) => o.value === state.cefr_level)?.label ||
              state.cefr_level ||
              "—"
            }
          />
          <ReviewRow
            label={t("coursePlan.wizard.fields.totalWeeks")}
            value={String(state.total_weeks || "—")}
          />
          <ReviewRow
            label={t("coursePlan.wizard.fields.contactHours")}
            value={String(state.contact_hours_per_week || "—")}
          />
          <ReviewRow
            label={t("coursePlan.wizard.fields.skillsDivision")}
            value={state.skills_division || "—"}
          />
          <ReviewRow
            label={t("coursePlan.wizard.fields.learnerProfile")}
            value={state.learner_profile || "—"}
          />
          <ReviewRow
            label={t("coursePlan.wizard.fields.grammarFocus")}
            value={state.grammar_focus.join(", ") || "—"}
          />
          <ReviewRow
            label={t("coursePlan.wizard.fields.resources")}
            value={state.resources.join(", ") || "—"}
          />
          <ReviewRow
            label={t("coursePlan.wizard.fields.notes")}
            value={state.notes || "—"}
          />
          <div className="rounded-md border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
            {t("coursePlan.wizard.reviewHint")}
          </div>
        </div>
      ),
    },
  ];

  return (
    <StepWizard<CoursePlanWizardState>
      titleKey="coursePlan.wizard.title"
      subtitleKey="coursePlan.wizard.subtitle"
      backTo="/admin/smart-wizard"
      steps={steps}
      submitting={mutation.isPending}
      finishLabelKey="coursePlan.wizard.finish"
      initialState={{
        title: "",
        cefr_level: "a2",
        total_weeks: 12,
        contact_hours_per_week: 18,
        skills_division: "",
        learner_profile: "",
        grammar_focus: [],
        resources: [],
        notes: "",
      }}
      onFinish={async (state) => {
        await mutation.mutateAsync({
          title: state.title.trim(),
          cefr_level: state.cefr_level,
          total_weeks: state.total_weeks,
          contact_hours_per_week: state.contact_hours_per_week,
          skills_division: state.skills_division.trim() || undefined,
          learner_profile: state.learner_profile.trim() || undefined,
          grammar_focus: state.grammar_focus.length
            ? state.grammar_focus
            : undefined,
          resources: state.resources.length ? state.resources : undefined,
          notes: state.notes.trim() || undefined,
        });
      }}
    />
  );
}

function ReviewRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="grid grid-cols-3 gap-2">
      <div className="col-span-1 text-muted-foreground">{label}</div>
      <div className="col-span-2 font-medium break-words">{value}</div>
    </div>
  );
}

/**
 * Tiny chip input: press Enter (or comma) to commit a value. Used for
 * grammar focus items and resource citations. Kept local because it's
 * not worth promoting to a reusable component yet.
 */
function ChipInput({
  label,
  placeholder,
  values,
  onChange,
}: {
  label: string;
  placeholder?: string;
  values: string[];
  onChange: (next: string[]) => void;
}) {
  const [draft, setDraft] = useState("");
  const commit = () => {
    const clean = draft.trim();
    if (!clean) return;
    if (!values.includes(clean)) onChange([...values, clean]);
    setDraft("");
  };
  return (
    <div>
      <Label>{label}</Label>
      <div className="mt-1 flex flex-wrap items-center gap-1.5 rounded-md border px-2 py-2">
        {values.map((v, i) => (
          <Badge key={`${v}-${i}`} variant="secondary" className="gap-1">
            {v}
            <button
              type="button"
              className="ml-1 rounded-sm hover:bg-destructive/20"
              onClick={() => onChange(values.filter((_, idx) => idx !== i))}
              aria-label={`Remove ${v}`}
            >
              <X className="h-3 w-3" />
            </button>
          </Badge>
        ))}
        <Input
          placeholder={placeholder}
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === ",") {
              e.preventDefault();
              commit();
            } else if (e.key === "Backspace" && !draft && values.length) {
              onChange(values.slice(0, -1));
            }
          }}
          onBlur={commit}
          className="flex-1 border-0 shadow-none focus-visible:ring-0 h-8 min-w-[8rem] px-1"
        />
      </div>
    </div>
  );
}