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, upsertFaq, deleteFaq } 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/faqs")({
  loader: ({ context }) => context.queryClient.ensureQueryData(q),
  component: AdminFaqs,
});

type Draft = { id?: string; question: string; answer: string; position: number; is_published: boolean };

function AdminFaqs() {
  const { data } = useSuspenseQuery(q);
  const qc = useQueryClient();
  const saveFn = useServerFn(upsertFaq);
  const delFn = useServerFn(deleteFaq);
  const [drafts, setDrafts] = useState<Draft[]>(data.faqs.map((f) => ({ id: f.id, question: f.question, answer: f.answer, position: f.position, is_published: f.is_published })));

  const add = () => setDrafts([...drafts, { question: "", answer: "", position: drafts.length + 1, is_published: true }]);
  const save = async (d: Draft) => {
    try { await saveFn({ data: d }); 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?")) return;
    if (d.id) await delFn({ data: { id: d.id } });
    setDrafts(drafts.filter((_, i) => i !== idx));
    qc.invalidateQueries({ queryKey: ["landing"] });
  };

  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <h1 className="font-display text-3xl font-bold">FAQs</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"><Plus className="h-4 w-4" /> Add</button>
      </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="flex items-center gap-2">
              <input type="number" value={d.position} onChange={(e) => setDrafts(drafts.map((x, j) => j === i ? { ...x, position: Number(e.target.value) } : x))} className="w-20 rounded-lg border border-border bg-input px-2 py-2 text-sm" />
              <input placeholder="Question" value={d.question} onChange={(e) => setDrafts(drafts.map((x, j) => j === i ? { ...x, question: e.target.value } : x))} className="flex-1 rounded-lg border border-border bg-input px-3 py-2 text-sm" />
              <button onClick={() => save(drafts[i])} className="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="rounded-lg bg-destructive/15 px-3 py-2 text-xs font-semibold text-destructive"><Trash2 className="h-3 w-3" /></button>
            </div>
            <textarea value={d.answer} onChange={(e) => setDrafts(drafts.map((x, j) => j === i ? { ...x, answer: e.target.value } : x))} className="mt-2 w-full rounded-lg border border-border bg-input px-3 py-2 text-sm" rows={2} placeholder="Answer" />
            <label className="mt-2 inline-flex items-center gap-2 text-xs">
              <input type="checkbox" checked={d.is_published} onChange={(e) => setDrafts(drafts.map((x, j) => j === i ? { ...x, is_published: e.target.checked } : x))} /> Published
            </label>
          </div>
        ))}
      </div>
    </div>
  );
}