Title *

Description

</div>

<div className="space-y-1.5">
        <Label>Subscription</Label>
        <Select
          value={watchedSubscr || "__open"}
          onValueChange={(val) => setValue("subscription", val === "__open" ? "" : val, { shouldDirty: true })}
        >
          <SelectTrigger>
            <SelectValue placeholder="No tier gate" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="__open">No tier gate (open)</SelectItem>
            {tierCategories.map((c) => (
              <SelectItem key={c.slug} value={c.slug}>
                {c.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <p className="text-xs text-muted-foreground">
          Optional. Gates this unit directly, independent of any course it may later be attached to.
        </p>
      </div>
    </div>
  );
}

// ─── Step 2 — Lessons ──────────────────────────────────────────────────────────
function LessonObjectives({ control, register, lessonIndex }) {
  const { fields, append, remove, insert, update } = useFieldArray({ control, name: `lessons.${lessonIndex}.objectives` });

return (
    <div className="space-y-2">
      <Label className="text-xs text-muted-foreground uppercase tracking-wide">Objectives</Label>
      {fields.map((f, oi) => (
        <div key={f.id} className="flex items-center gap-2">
          <Input
            {...register(`lessons.${lessonIndex}.objectives.${oi}.value`)}
            placeholder="Learning objective"
            onPaste={(e) => handleObjectivePaste(e, oi)}
          />
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="text-destructive shrink-0"
            onClick={() => remove(oi)}
          >
            <Trash2 className="h-4 w-4" />
          </Button>
        </div>
      ))}
      <Button type="button" variant="outline" size="sm" onClick={() => append({ value: "" })}>
        <Plus className="h-3.5 w-3.5 mr-1" /> Add Objective
      </Button>
    </div>
  );
}

function StepLessons({ control, register, errors }) {
  const { fields, append, remove } = useFieldArray({ control, name: "lessons" });

return (
    <div className="space-y-4">
      {fields.length === 0 && (
        <p className="text-sm text-muted-foreground">
          No lessons yet. A unit can be created without any, but add one now if you'd like to build its content in this wizard.
        </p>
      )}

{fields.map((f, i) => (
        <div key={f.id} className="border border-border rounded-lg p-4 space-y-3">
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium text-muted-foreground">Lesson {i + 1}</span>
            <Button
              type="button"
              variant="ghost"
              size="sm"
              className="text-destructive h-7 px-2"
              onClick={() => remove(i)}
            >
              Remove
            </Button>
          </div>

<div className="space-y-1.5">
            <Label>Title <span className="text-destructive">*</span></Label>
            <Input {...register(`lessons.${i}.title`)} placeholder="Lesson title" />
            <FieldError message={errors.lessons?.[i]?.title?.message} />
          </div>

<div className="space-y-1.5">
            <Label>Description</Label>
            <Textarea rows={2} {...register(`lessons.${i}.description`)} placeholder="Optional description" />
          </div>

<LessonObjectives control={control} register={register} lessonIndex={i} />
        </div>
      ))}

<Button
        type="button"
        variant="outline"
        className="w-full"
        onClick={() => append({ title: "", description: "", objectives: [], blocks: [] })}
      >
        <Plus className="h-4 w-4 mr-1" /> Add Lesson
      </Button>
    </div>
  );
}

// ─── Step 3 — Page Builder ─────────────────────────────────────────────────────
function StepPageBuilder({ control, setValue }) {
  const lessons = useWatch({ control, name: "lessons" }) ?? [];
  const [rawIndex, setActiveIndex] = useState(0);
  const [drawerOpen, setDrawerOpen] = useState(false);

if (lessons.length === 0) {
    return (
      <p className="text-sm text-muted-foreground">
        Add at least one lesson in the previous step to build its page content here.
      </p>
    );
  }

// Clamp instead of syncing via effect — a removed lesson (from the previous
  // step) can leave rawIndex pointing past the end of the array.
  const activeIndex = Math.min(rawIndex, lessons.length - 1);
  const activeLesson = lessons[activeIndex];
  const blocks = activeLesson?.blocks ?? [];

const setBlocks = (updater) => {
    const next = typeof updater === "function" ? updater(blocks) : updater;
    setValue(`lessons.${activeIndex}.blocks`, next, { shouldDirty: true });
  };

const addBlock    = (type) => setBlocks((prev) => [...prev, makeBlock(type)]);
  const updateBlock = (id, content) => setBlocks((prev) => prev.map((b) => (b.id === id ? { ...b, content } : b)));
  const deleteBlock = (id) => setBlocks((prev) => prev.filter((b) => b.id !== id));
  const moveBlock   = (id, direction) => setBlocks((prev) => {
    const index = prev.findIndex((b) => b.id === id);
    const swapIndex = direction === "up" ? index - 1 : index + 1;
    if (swapIndex < 0 || swapIndex >= prev.length) return prev;
    const next = [...prev];
    [next[index], next[swapIndex]] = [next[swapIndex], next[index]];
    return next;
  });

return (
    <div className="space-y-3">
      {lessons.map((l, i) => (
        <div key={i} className="flex items-center justify-between border border-border rounded-lg p-4">
          <div>
            <p className="text-sm font-medium">{l.title || `Lesson ${i + 1}`}</p>
            <p className="text-xs text-muted-foreground">
              {(l.blocks?.length ?? 0)} block{(l.blocks?.length ?? 0) !== 1 ? "s" : ""}
            </p>
          </div>
          <Button
            type="button"
            variant="outline"
            size="sm"
            onClick={() => { setActiveIndex(i); setDrawerOpen(true); }}
          >
            <LayoutTemplate className="h-4 w-4 mr-1.5" />
            Open Page Builder
          </Button>
        </div>
      ))}

<Drawer open={drawerOpen} onOpenChange={setDrawerOpen} shouldScaleBackground>
        <DrawerContent className="data-[vaul-drawer-direction=bottom]:max-h-[90vh]">
          <DrawerHeader className="border-b text-left">
            <DrawerTitle>Page Builder</DrawerTitle>
            <DrawerDescription>{activeLesson?.title || `Lesson ${activeIndex + 1}`}</DrawerDescription>
          </DrawerHeader>

<div className="px-4 pt-3">
            <Tabs value={String(activeIndex)} onValueChange={(v) => setActiveIndex(Number(v))}>
              <TabsList className="flex-wrap h-auto">
                {lessons.map((l, i) => (
                  <TabsTrigger key={i} value={String(i)} className="gap-1.5">
                    {l.title || `Lesson ${i + 1}`}
                    {l.blocks?.length > 0 && (
                      <Badge variant="secondary" className="text-[10px] px-1.5">{l.blocks.length}</Badge>
                    )}
                  </TabsTrigger>
                ))}
              </TabsList>
            </Tabs>
          </div>

<div className="flex-1 overflow-y-auto p-4">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
              <div className="space-y-3">
                <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
                  Editor
                  {blocks.length > 0 && (
                    <span className="text-xs font-normal">· {blocks.length} block{blocks.length !== 1 ? "s" : ""}</span>
                  )}
                </div>
                <BlockList blocks={blocks} onUpdate={updateBlock} onMove={moveBlock} onDelete={deleteBlock} />
                <AddBlockMenu onAdd={addBlock} />
              </div>

<div className="space-y-3">
                <div className="text-sm font-medium text-muted-foreground">Live Preview</div>
                <PreviewChrome title={activeLesson.title}>
                  <div className="p-6 space-y-5 min-h-[300px]">
                    <PreviewContent
                      lesson={{
                        title: activeLesson.title,
                        description: activeLesson.description,
                        objectives: (activeLesson.objectives ?? []).map((o, oi) => ({ objective_id: oi, text: o.value })),
                      }}
                      blocks={blocks}
                      empty="Your content will appear here as you build."
                    />
                  </div>
                </PreviewChrome>
              </div>
            </div>
          </div>

<DrawerFooter className="border-t flex-row justify-end">
            <DrawerClose asChild>
              <Button type="button">Done</Button>
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </div>
  );
}

// ─── Step 4 — Review ───────────────────────────────────────────────────────────
function SummaryRow({ label, value }) {
  if (!value) return null;
  return (
    <div className="flex justify-between py-1.5 text-sm">
      <span className="text-muted-foreground min-w-[140px]">{label}</span>
      <span className="text-foreground text-right">{value}</span>
    </div>
  );
}

function StepReview({ data, tierCategories, requirements }) {
  const tierName = tierCategories.find((c) => c.slug === data.subscription)?.name;

return (
    <div className="space-y-4">
      <div className="border border-border rounded-lg p-4 space-y-1">
        <div className="flex items-center gap-2 mb-3">
          <FileText className="h-4 w-4 text-muted-foreground" />
          <span className="text-sm font-medium">Unit</span>
        </div>
        <SummaryRow label="Title" value={data.title} />
        <SummaryRow label="Description" value={data.description} />
        <SummaryRow label="Subscription" value={tierName || "No tier gate (open)"} />
      </div>

{(data.lessons ?? []).length === 0 ? (
        <p className="text-sm text-muted-foreground">No lessons will be created with this unit.</p>
      ) : (
        <div className="border border-border rounded-lg p-4 space-y-3">
          <div className="flex items-center gap-2">
            <BookOpen className="h-4 w-4 text-muted-foreground" />
            <span className="text-sm font-medium">Lessons ({data.lessons.length})</span>
          </div>
          {data.lessons.map((l, i) => (
            <div key={i} className="flex items-center justify-between text-sm border-t border-border pt-2 first:border-t-0 first:pt-0">
              <span>{i + 1}. {l.title}</span>
              <span className="text-muted-foreground text-xs">
                {(l.objectives ?? []).filter((o) => o.value).length} objective(s) · {(l.blocks ?? []).length} block(s)
              </span>
            </div>
          ))}
        </div>
      )}

<DraftRequirementsSummary entityType="unit" items={requirements} />
    </div>
  );
}

// ─── Step 5 — Requirements ──────────────────────────────────────────────────────
function StepRequirements({ requirements, setRequirements }) {
  return (
    <div className="space-y-4">
      <p className="text-sm text-muted-foreground">
        Configure how learners complete this unit — optional, sensible defaults apply automatically. This is created together with the rest of the unit when you finish.
      </p>
      <DraftRequirementsEditor entityType="unit" items={requirements} onChange={setRequirements} />
    </div>
  );
}

// ─── Main Page ──────────────────────────────────────────────────────────────
export default function AddLibraryUnit() {
  const navigate = useNavigate();
  const { createUnitFull, loading } = useLibrary();
  const { user } = useAuth();

const { syncUnitRequirements } = useCourses();

const [step, setStep] = useState(0);
  const [requirements, setRequirements] = useState([]);
  const [tierCategories, setTierCategories] = useState([]);

useEffect(() => {
    api.get("/admin/tiers/categories")
      .then(({ data }) => setTierCategories((data.data ?? []).filter((c) => c.is_active)))
      .catch(() => {});
  }, []);

const {
    register, control, trigger, getValues, setValue,
    formState: { errors, isDirty },
  } = useForm({
    resolver: zodResolver(schema),
    defaultValues: DEFAULT_VALUES,
    mode: "onTouched",
  });

const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty || requirements.length > 0);

const handleNext = async () => {
    const fields = STEP_FIELDS[step];
    const valid = await trigger(fields.length ? fields : undefined);
    if (valid) setStep((s) => Math.min(s + 1, STEPS.length - 1));
  };

const handleBack = () => {
    if (step === 0) navigate("/admin/units");
    else setStep((s) => s - 1);
  };

// The one and only persistence point — nothing is created until this final
  // click at Review, so Requirements (the step before it) is purely a draft
  // form. No <form> tag wraps the wizard, so this is invoked manually.
  const handleCreate = async () => {
    const valid = await trigger();
    if (!valid) return;

const data = getValues();
    const payload = {
      title: data.title,
      description: data.description || null,
      subscription: data.subscription || null,
      lessons: (data.lessons ?? []).map((l) => ({
        title: l.title,
        description: l.description || null,
        objectives: (l.objectives ?? []).map((o) => o.value).filter(Boolean),
        blocks: l.blocks ?? [],
      })),
      createdBy: user?.user_id,
    };

// Single request creates the unit, its lessons, objectives, and page
    // content in one transaction — no per-lesson/per-page follow-up calls.
    const result = await createUnitFull(payload);
    const newUnitId = result?.data?.data?.unit_id;
    if (!newUnitId) return;

if (requirements.length > 0) {
      const clean = requirements.map(({ _key, ...r }) => r);
      await syncUnitRequirements(null, newUnitId, clean);
    }

bypassOnce();
    navigate("/admin/units");
  };

return (
    <section className="bg-muted min-h-full">
      <PageMeta title="Add Unit - STARR" />
      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4 py-10">
        <div className="w-full max-w-3xl mx-auto space-y-6">

<div className="flex items-center gap-3">
            <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/admin/units")}>
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <div>
              <h1 className="text-xl font-semibold">Create Unit</h1>
              <p className="text-sm text-muted-foreground">
                Units are standalone — attach this one to any course later, or run it on its own.
              </p>
            </div>
          </div>

{/* Stepper */}
          <div className="flex items-center gap-0">
            {STEPS.map((s, i) => {
              const Icon = s.icon;
              const isActive = step === i;
              const isDone = step > i;

return (
                <div key={s.id} className="flex items-center flex-1 last:flex-none">
                  <div className="flex flex-col items-center gap-1">
                    <div className={cn(
                      "h-8 w-8 rounded-full flex items-center justify-center border transition-colors",
                      isDone   && "bg-emerald-600 border-emerald-600 text-white",
                      isActive && "border-primary bg-primary text-primary-foreground",
                      !isActive && !isDone && "border-border bg-background text-muted-foreground"
                    )}>
                      {isDone ? <Check className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
                    </div>
                    <span className={cn(
                      "text-[11px] font-medium whitespace-nowrap hidden sm:block",
                      isActive ? "text-foreground"  : "text-muted-foreground",
                      isDone   ? "text-emerald-600" : ""
                    )}>
                      {s.label}
                    </span>
                  </div>
                  {i < STEPS.length - 1 && (
                    <div className={cn(
                      "flex-1 h-px mx-2 mb-4 transition-colors",
                      step > i ? "bg-emerald-600" : "bg-border"
                    )} />
                  )}
                </div>
              );
            })}
          </div>

{/* Step content */}
          <div className="rounded-lg border bg-card p-6 min-h-[320px]">
            <h2 className="text-base font-medium mb-4">{STEPS[step].label}</h2>

{step === 0 && (
              <StepUnit
                register={register}
                errors={errors}
                control={control}
                setValue={setValue}
                tierCategories={tierCategories}
              />
            )}
            {step === 1 && (
              <StepLessons control={control} register={register} errors={errors} />
            )}
            {step === 2 && (
              <StepPageBuilder control={control} setValue={setValue} />
            )}
            {step === 3 && (
              <StepRequirements requirements={requirements} setRequirements={setRequirements} />
            )}
            {step === 4 && (
              <StepReview data={getValues()} tierCategories={tierCategories} requirements={requirements} />
            )}
          </div>

{/* Navigation */}
          <div className="flex items-center justify-between gap-3">
            <Button type="button" variant="outline" onClick={handleBack} disabled={loading}>
              <ChevronLeft className="h-4 w-4 mr-1" />
              {step === 0 ? "Cancel" : "Back"}
            </Button>

{step < STEPS.length - 1 ? (
              <Button type="button" onClick={handleNext}>
                Next
                <ChevronRight className="h-4 w-4 ml-1" />
              </Button>
            ) : (
              // Only the true final step (Review) actually persists anything —
              // the unit, its lessons/page content, and any draft requirements
              // are all created together in one shot here.
              <Button type="button" onClick={handleCreate} disabled={loading}>
                {loading && <Spinner className="h-4 w-4 mr-2" />}
                Create Unit
              </Button>
            )}
          </div>

</div>
      </div>

{unsavedChangesDialog}
    </section>
  );
}