import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import { ArrowLeft, Camera, Plus, Trash2, LogOut, ShieldCheck } from "lucide-react";
import { deletePhotoshoot, listPhotoshoots } from "@/lib/photoshoot.functions";
import { supabase } from "@/integrations/supabase/client";
import { useIsAdmin } from "@/hooks/use-is-admin";
import { toast } from "sonner";

export const Route = createFileRoute("/_authenticated/library")({
  head: () => ({
    meta: [
      { title: "Library — Personal Photoshoot Studio™" },
      { name: "description", content: "Your saved photoshoot plans." },
    ],
  }),
  component: LibraryPage,
});

type Row = {
  id: string;
  title: string;
  event_type: string;
  emotion: string;
  style: string;
  shoot_date: string | null;
  created_at: string;
};

function LibraryPage() {
  const navigate = useNavigate();
  const listFn = useServerFn(listPhotoshoots);
  const delFn = useServerFn(deletePhotoshoot);
  const isAdmin = useIsAdmin();
  const [rows, setRows] = useState<Row[] | null>(null);

  async function refresh() {
    try {
      const data = await listFn();
      setRows(data as Row[]);
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Failed to load");
    }
  }

  useEffect(() => {
    refresh();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  async function handleDelete(id: string) {
    if (!confirm("Delete this photoshoot plan?")) return;
    try {
      await delFn({ data: { id } });
      setRows((r) => r?.filter((x) => x.id !== id) ?? null);
      toast.success("Deleted");
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Failed to delete");
    }
  }

  async function signOut() {
    await supabase.auth.signOut();
    navigate({ to: "/" });
  }

  return (
    <div className="min-h-screen bg-background">
      <header className="border-b border-border">
        <div className="mx-auto max-w-6xl px-6 h-16 flex items-center justify-between">
          <Link to="/" className="flex items-center gap-2">
            <div className="h-8 w-8 rounded-full bg-gradient-gold flex items-center justify-center">
              <Camera className="h-4 w-4 text-primary" />
            </div>
            <span className="font-display text-lg font-semibold">
              Personal Photoshoot Studio<span className="text-gold">™</span>
            </span>
          </Link>
          <div className="flex items-center gap-3">
            {isAdmin && (
              <Link
                to="/admin/prompts"
                className="hidden sm:inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
              >
                <ShieldCheck className="h-4 w-4" /> Admin
              </Link>
            )}
            <Link
              to="/create"
              className="inline-flex items-center gap-1.5 rounded-full bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
            >
              <Plus className="h-4 w-4" /> New plan
            </Link>
            <button
              onClick={signOut}
              className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
            >
              <LogOut className="h-4 w-4" /> Sign out
            </button>
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-6xl px-6 py-12">
        <Link to="/" className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground mb-6">
          <ArrowLeft className="h-4 w-4" /> Home
        </Link>
        <p className="text-xs uppercase tracking-[0.3em] text-gold mb-2">Library</p>
        <h1 className="font-display text-5xl mb-10">Your photoshoot plans</h1>

        {rows === null ? (
          <p className="text-muted-foreground">Loading…</p>
        ) : rows.length === 0 ? (
          <div className="rounded-2xl border border-dashed border-border p-16 text-center">
            <p className="font-display text-2xl mb-2">Nothing here yet</p>
            <p className="text-muted-foreground mb-6">Create your first emotionally intentional photoshoot.</p>
            <Link
              to="/create"
              className="inline-flex items-center gap-2 rounded-full bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground hover:opacity-90"
            >
              <Plus className="h-4 w-4" /> New plan
            </Link>
          </div>
        ) : (
          <ul className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {rows.map((r) => (
              <li
                key={r.id}
                className="group rounded-2xl border border-border bg-card p-6 shadow-soft hover:shadow-elegant transition relative"
              >
                <Link to="/plan" search={{ id: r.id }} className="block">
                  <p className="text-[10px] uppercase tracking-[0.25em] text-gold mb-2">{r.event_type}</p>
                  <p className="font-display text-2xl leading-tight mb-3 pr-8">{r.title}</p>
                  <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
                    <span className="rounded-full bg-secondary px-2.5 py-1">{r.emotion}</span>
                    <span className="rounded-full bg-secondary px-2.5 py-1">{r.style}</span>
                  </div>
                  <p className="mt-4 text-[11px] uppercase tracking-wider text-muted-foreground">
                    {new Date(r.created_at).toLocaleDateString()}
                  </p>
                </Link>
                <button
                  onClick={() => handleDelete(r.id)}
                  className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition text-muted-foreground hover:text-destructive"
                  aria-label="Delete"
                >
                  <Trash2 className="h-4 w-4" />
                </button>
              </li>
            ))}
          </ul>
        )}
      </main>
    </div>
  );
}