export const dynamic = "force-dynamic";
export const revalidate = 0;

import { prisma } from "@/lib/prisma";
import Link from "next/link";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { ArrowLeftIcon } from "lucide-react";

type SimpleArtwork = {
  id: string;
  name: string;
  sortKey: number | null;
};

function sortBySortIndexName<T extends { sortIndex: number; name: string }>(a: T, b: T) {
  return a.sortIndex - b.sortIndex || a.name.localeCompare(b.name);
}

function sortArtworks(a: SimpleArtwork, b: SimpleArtwork) {
  const ak = a.sortKey ?? 999999;
  const bk = b.sortKey ?? 999999;
  return ak - bk || a.name.localeCompare(b.name) || a.id.localeCompare(b.id);
}

export default async function AnimalListPage() {
  /**
   * We fetch all "animal page" tags and only artworks that are:
   * - published
   * - in "Animal Studies" category
   *
   * This makes the list reflect exactly what the user sees on the Animal Studies page.
   */
  const tags = await prisma.artTag.findMany({
    where: { showOnAnimalPage: true },
    select: {
      id: true,
      name: true,
      slug: true,
      sortIndex: true,
      parentId: true,

      // artworks tagged with THIS tag
      artworks: {
        where: {
          published: true,
          categories: { some: { name: "Animal Studies" } },
        },
        select: { id: true, name: true, sortKey: true },
        orderBy: [{ sortKey: "asc" }, { name: "asc" }, { id: "asc" }],
      },
    },
    orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
  });

  // Build maps to render a robust parent/child hierarchy (no reliance on Prisma nested children)
  const byId = new Map(tags.map((t) => [t.id, t]));
  const childrenByParentId = new Map<string, typeof tags>();

  for (const t of tags) {
    if (!t.parentId) continue;
    const arr = childrenByParentId.get(t.parentId) ?? [];
    arr.push(t);
    childrenByParentId.set(t.parentId, arr);
  }

  for (const [pid, arr] of childrenByParentId) {
    childrenByParentId.set(pid, arr.slice().sort(sortBySortIndexName));
  }

  const parents = tags
    .filter((t) => t.parentId === null)
    .slice()
    .sort(sortBySortIndexName);

  // Orphans: child references a parentId that isn't present (or isn't showOnAnimalPage)
  const orphans = tags
    .filter((t) => t.parentId !== null && !byId.has(t.parentId))
    .slice()
    .sort(sortBySortIndexName);

  // Small helper to render artworks list (linked)
  const ArtworkList = ({ items }: { items: SimpleArtwork[] }) => {
    const list = items.slice().sort(sortArtworks);
    if (list.length === 0) {
      return <p className="text-sm text-muted-foreground italic">No artworks found.</p>;
    }

    return (
      <ul className="space-y-1.5">
        {list.map((a) => (
          <li key={a.id}>
            <Link
              href={`/artworks/single/${a.id}`}
              className="
  inline-flex items-center gap-2
  rounded-md px-2 py-1
  text-sm font-medium
  hover:bg-muted
"
            >
              <span
                aria-hidden
                className="
            text-muted-foreground
            transition-transform
            group-hover:translate-x-0.5
          "
              >
                →
              </span>

              <span className="leading-snug">{a.name}</span>
            </Link>
          </li>
        ))}
      </ul>
    );
  };

  // Count helper for badges
  const countArtworks = (tagId: string) => {
    const t = byId.get(tagId);
    return t?.artworks?.length ?? 0;
  };

  const countArtworksInChildren = (tagId: string) => {
    const children = childrenByParentId.get(tagId) ?? [];
    let sum = 0;
    for (const c of children) sum += c.artworks.length;
    return sum;
  };

  return (
    <div className="mx-auto w-full max-w-5xl px-4 py-6">
      <header className="mb-6 space-y-3">
        <Button
          asChild
          variant="ghost"
          className="w-fit gap-2 px-0 text-muted-foreground hover:text-foreground"
        >
          <Link href="/artworks/animalstudies">
            <ArrowLeftIcon className="h-4 w-4" />
            Back to Animal studies
          </Link>
        </Button>

        <div className="space-y-1">
          <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">
            Animal index
          </h1>
          {/* <p className="text-sm text-muted-foreground">
            Click to expand and browse linked artworks.
          </p> */}
        </div>
      </header>

      <div className="space-y-6">
        <Card>
          <CardHeader className="space-y-1">
            <CardTitle className="text-base">Grouped animals</CardTitle>
            {/* <p className="text-sm text-muted-foreground">
              Parent tags expand into children; standalone tags appear as single entries.
            </p> */}
            <p className="text-sm text-muted-foreground">
              Click to expand and browse linked artworks.
            </p>
          </CardHeader>

          <CardContent>
            {parents.length === 0 ? (
              <p className="text-sm text-muted-foreground italic">No parent tags found.</p>
            ) : (
              <Accordion type="multiple" className="w-full">
                {parents.map((p) => {
                  const children = childrenByParentId.get(p.id) ?? [];
                  const parentDirectCount = p.artworks.length;
                  const childrenCount = countArtworksInChildren(p.id);

                  // Standalone root tag: no children
                  const isStandalone = children.length === 0;

                  return (
                    <AccordionItem key={p.id} value={p.id} className="border-b">
                      <AccordionTrigger className="py-4">
                        <div className="flex w-full items-center justify-between pr-2">
                          <div className="flex min-w-0 items-center gap-2">
                            <span className="truncate font-medium">{p.name}</span>
                            {isStandalone ? (
                              <Badge variant="secondary">single</Badge>
                            ) : (
                              <Badge variant="secondary">{children.length} sub</Badge>
                            )}
                          </div>

                          <div className="flex items-center gap-2">
                            {parentDirectCount > 0 ? (
                              <Badge variant="outline">{parentDirectCount} direct</Badge>
                            ) : null}
                            {!isStandalone ? (
                              <Badge variant="outline">{childrenCount} in sub</Badge>
                            ) : (
                              <Badge variant="outline">{parentDirectCount} artworks</Badge>
                            )}
                          </div>
                        </div>
                      </AccordionTrigger>

                      <AccordionContent className="pb-5">
                        {/* If standalone root: just list its artworks */}
                        {isStandalone ? (
                          <div className="rounded-md border p-4">
                            <div className="mb-3 flex items-center justify-between">
                              <div className="text-sm font-medium">Artworks</div>
                              <Badge variant="outline">{p.artworks.length}</Badge>
                            </div>
                            <ArtworkList items={p.artworks} />
                          </div>
                        ) : (
                          <div className="space-y-4">
                            {/* Optional: artworks directly on the parent */}
                            <div className="rounded-md border p-4">
                              <div className="mb-3 flex items-center justify-between">
                                <div className="text-sm font-medium">Directly tagged</div>
                                <Badge variant="outline">{p.artworks.length}</Badge>
                              </div>
                              <ArtworkList items={p.artworks} />
                            </div>

                            <Separator />

                            {/* Children blocks */}
                            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                              {children.map((c) => (
                                <div key={c.id} className="rounded-md border p-4">
                                  <div className="mb-3 flex items-center justify-between">
                                    <div className="min-w-0">
                                      <div className="truncate text-sm font-medium">{c.name}</div>
                                      <div className="text-xs text-muted-foreground">
                                        Sub-tag of {p.name}
                                      </div>
                                    </div>
                                    <Badge variant="outline">{c.artworks.length}</Badge>
                                  </div>

                                  <ArtworkList items={c.artworks} />
                                </div>
                              ))}
                            </div>
                          </div>
                        )}
                      </AccordionContent>
                    </AccordionItem>
                  );
                })}
              </Accordion>
            )}
          </CardContent>
        </Card>

        {orphans.length ? (
          <Card>
            <CardHeader className="space-y-1">
              <CardTitle className="text-base">Ungrouped animals</CardTitle>
              {/* <p className="text-sm text-muted-foreground">
                Tags whose parent is not visible (or not configured for the animal page).
              </p> */}
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                {orphans.map((t) => (
                  <div key={t.id} className="rounded-md border p-4">
                    <div className="mb-3 flex items-center justify-between">
                      <div className="truncate text-sm font-medium">{t.name}</div>
                      <Badge variant="outline">{t.artworks.length}</Badge>
                    </div>
                    <ArtworkList items={t.artworks} />
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        ) : null}
      </div>
    </div>
  );
}