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, upsertLesson, deleteLesson } 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/lessons")({
  loader: ({ context }) => context.queryClient.ensureQueryData(q),
  component: AdminLessons,
});

type Draft = { id?: string; module_id: string; title: string; description: string; video_url: string; duration_seconds: number; position: number; is_free_preview: boolean };

function AdminLessons() {
  const { data } = useSuspenseQuery(q);
  const qc = useQueryClient();
  const saveFn = useServerFn(upsertLesson);
  const delFn = useServerFn(deleteLesson);
  const [selectedModule, setSelectedModule] = useState(data.modules[0]?.id ?? "");

  const moduleLessons = data.lessons.filter((l) => l.module_id === selectedModule);
  const [drafts, setDrafts] = useState<Draft[]>(
    moduleLessons.map((l) => ({ id: l.id, module_id: l.module_id, title: l.title, description: l.description ?? "", video_url: l.video_url ?? "", duration_seconds: l.duration_seconds, position: l.position, is_free_preview: l.is_free_preview }))
  );

  // Re-init when module changes
  const switchModule = (mid: string) => {
    setSelectedModule(mid);
    const ml = data.lessons.filter((l) => l.module_id === mid);
    setDrafts(ml.map((l) => ({ id: l.id, module_id: l.module_id, title: l.title, description: l.description ?? "", video_url: l.video_url ?? "", duration_seconds: l.duration_seconds, position: l.position, is_free_preview: l.is_free_preview })));
  };

  const add = () => setDrafts([...drafts, { module_id: selectedModule, title: "New lesson", description: "", video_url: "", duration_seconds: 600, position: drafts.length + 1, is_free_preview: false }]);
  const save = async (d: Draft) => {
    try {
      await saveFn({ data: { ...d, description: d.description || null, video_url: d.video_url || null } });
      toast.success("Saved");
      qc.invalidateQueries({ queryKey: ["admin-course"] });
      qc.invalidateQueries({ queryKey: ["landing"] });
    } catch (e: any) { toast.error(e.message); }
  };
  const remove = async (d: Draft, idx: number) => {
    if (!confirm("Delete this lesson?")) return;
    if (d.id) await delFn({ data: { id: d.id } });
    setDrafts(drafts.filter((_, i) => i !== idx));
    qc.invalidateQueries({ queryKey: ["admin-course"] });
    qc.invalidateQueries({ queryKey: ["landing"] });
  };

  return (
    <div>
      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
        <h1 className="font-display text-3xl font-bold">Lessons</h1>
        <div className="flex items-center gap-2">
          <select value={selectedModule} onChange={(e) => switchModule(e.target.value)} className="rounded-lg border border-border bg-input px-3 py-2 text-sm">
            {data.modules.map((m) => <option key={m.id} value={m.id}>{m.title}</option>)}
          </select>
          <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>

      <div className="space-y-3">
        {drafts.map((d, i) => (
          <div key={d.id ?? `new-${i}`} className="rounded-2xl border border-border bg-card p-4">
            <div className="grid gap-2 sm:grid-cols-[60px_1fr_120px_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-2 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" placeholder="Lesson title" />
              <input type="number" value={d.duration_seconds} onChange={(e) => setDrafts(drafts.map((x, j) => j === i ? { ...x, duration_seconds: Number(e.target.value) } : x))} className="rounded-lg border border-border bg-input px-2 py-2 text-sm" placeholder="seconds" />
              <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" /></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>
            <input value={d.video_url} onChange={(e) => setDrafts(drafts.map((x, j) => j === i ? { ...x, video_url: e.target.value } : x))} placeholder="Video URL (YouTube / Vimeo / .mp4)" className="mt-2 w-full rounded-lg border border-border bg-input px-3 py-2 text-sm" />
            <div className="mt-2 flex items-center justify-between gap-3">
              <textarea value={d.description} onChange={(e) => setDrafts(drafts.map((x, j) => j === i ? { ...x, description: e.target.value } : x))} placeholder="Description (optional)" className="flex-1 rounded-lg border border-border bg-input px-3 py-2 text-sm" rows={2} />
              <label className="inline-flex shrink-0 items-center gap-2 text-xs">
                <input type="checkbox" checked={d.is_free_preview} onChange={(e) => setDrafts(drafts.map((x, j) => j === i ? { ...x, is_free_preview: e.target.checked } : x))} /> Free preview
              </label>
            </div>
          </div>
        ))}
        {drafts.length === 0 && <p className="text-sm text-muted-foreground">No lessons in this module. Click Add.</p>}
      </div>
    </div>
  );
}