import { createFileRoute } from "@tanstack/react-router";
import { queryOptions, useSuspenseQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import { getAdminCourse, upsertModule, deleteModule } from "@/lib/admin.functions";
import { toast } from "sonner";
import { Plus, Trash2, Save } from "lucide-react";

const q = queryOptions({ queryKey: ["admin-course"], queryFn: () => getAdminCourse() });

export const Route = createFileRoute("/_authenticated/admin/modules")({
  loader: ({ context }) => context.queryClient.ensureQueryData(q),
  component: AdminModules,
});

type ModDraft = { id?: string; course_id: string; title: string; description: string; position: number };

function AdminModules() {
  const { data } = useSuspenseQuery(q);
  const qc = useQueryClient();
  const saveFn = useServerFn(upsertModule);
  const delFn = useServerFn(deleteModule);
  const course = data.courses[0];
  const [drafts, setDrafts] = useState<ModDraft[]>(
    data.modules.filter((m) => m.course_id === course?.id).map((m) => ({ id: m.id, course_id: m.course_id, title: m.title, description: m.description ?? "", position: m.position }))
  );

  if (!course) return <div>No course yet.</div>;

  const add = () => setDrafts([...drafts, { course_id: course.id, title: "New module", description: "", position: drafts.length + 1 }]);
  const save = async (m: ModDraft) => {
    try { await saveFn({ data: m }); toast.success("Saved"); qc.invalidateQueries({ queryKey: ["admin-course"] }); qc.invalidateQueries({ queryKey: ["landing"] }); }
    catch (e: any) { toast.error(e.message); }
  };
  const remove = async (m: ModDraft, idx: number) => {
    if (!confirm("Delete this module and all its lessons?")) return;
    if (m.id) await delFn({ data: { id: m.id } });
    setDrafts(drafts.filter((_, i) => i !== idx));
    qc.invalidateQueries({ queryKey: ["admin-course"] });
    qc.invalidateQueries({ queryKey: ["landing"] });
  };

  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <h1 className="font-display text-3xl font-bold">Modules</h1>
        <button onClick={add} className="inline-flex items-center gap-1 rounded-lg bg-gradient-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-glow"><Plus className="h-4 w-4" /> Add</button>
      </div>
      <div className="space-y-4">
        {drafts.map((d, i) => (
          <div key={d.id ?? `new-${i}`} className="rounded-2xl border border-border bg-card p-5">
            <div className="grid gap-3 sm:grid-cols-[80px_1fr_auto]">
              <input type="number" value={d.position} onChange={(e) => setDrafts(drafts.map((x, j) => j === i ? { ...x, position: Number(e.target.value) } : x))} className="rounded-lg border border-border bg-input px-3 py-2 text-sm" />
              <input value={d.title} onChange={(e) => setDrafts(drafts.map((x, j) => j === i ? { ...x, title: e.target.value } : x))} className="rounded-lg border border-border bg-input px-3 py-2 text-sm" />
              <div className="flex gap-2">
                <button onClick={() => save(drafts[i])} className="inline-flex items-center gap-1 rounded-lg bg-success px-3 py-2 text-xs font-semibold text-success-foreground"><Save className="h-3 w-3" /> Save</button>
                <button onClick={() => remove(d, i)} className="inline-flex items-center gap-1 rounded-lg bg-destructive/15 px-3 py-2 text-xs font-semibold text-destructive"><Trash2 className="h-3 w-3" /></button>
              </div>
            </div>
            <textarea placeholder="Description (optional)" value={d.description} onChange={(e) => setDrafts(drafts.map((x, j) => j === i ? { ...x, description: e.target.value } : x))} className="mt-3 w-full rounded-lg border border-border bg-input px-3 py-2 text-sm" />
          </div>
        ))}
      </div>
    </div>
  );
}