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, upsertTestimonial, deleteTestimonial } 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/testimonials")({
  loader: ({ context }) => context.queryClient.ensureQueryData(q),
  component: AdminTestimonials,
});

type Draft = { id?: string; student_name: string; content: string; rating: number; avatar_url: string; position: number; is_published: boolean };

function AdminTestimonials() {
  const { data } = useSuspenseQuery(q);
  const qc = useQueryClient();
  const saveFn = useServerFn(upsertTestimonial);
  const delFn = useServerFn(deleteTestimonial);
  const [drafts, setDrafts] = useState<Draft[]>(data.testimonials.map((t) => ({ id: t.id, student_name: t.student_name, content: t.content, rating: t.rating, avatar_url: t.avatar_url ?? "", position: t.position, is_published: t.is_published })));

  const add = () => setDrafts([...drafts, { student_name: "", content: "", rating: 5, avatar_url: "", position: drafts.length + 1, is_published: true }]);
  const save = async (d: Draft) => {
    try { await saveFn({ data: { ...d, avatar_url: d.avatar_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?")) 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">Testimonials</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="grid gap-2 sm:grid-cols-[1fr_80px_60px_auto]">
              <input placeholder="Student name" value={d.student_name} onChange={(e) => setDrafts(drafts.map((x, j) => j === i ? { ...x, student_name: e.target.value } : x))} className="rounded-lg border border-border bg-input px-3 py-2 text-sm" />
              <input type="number" min={1} max={5} value={d.rating} onChange={(e) => setDrafts(drafts.map((x, j) => j === i ? { ...x, rating: Number(e.target.value) } : x))} className="rounded-lg border border-border bg-input px-2 py-2 text-sm" />
              <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" />
              <div className="flex gap-2">
                <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>
            </div>
            <textarea value={d.content} onChange={(e) => setDrafts(drafts.map((x, j) => j === i ? { ...x, content: 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="Review content" />
            <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>
  );
}