"use client";

import { useTranslation } from "@/components/i18n/locale-provider";
import { searchItems } from "@/lib/search";

import Image from "next/image";
import Link from "next/link";
import { SearchIcon, UsersIcon } from "lucide-react";
import { useState } from "react";

import {
  Card,
  CardAction,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from "@/components/ui/empty";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { useVisitorPresence } from "@/hooks/use-presence";

type GuideCard = {
  id: string;
  slug: string;
  name: string;
  overview: string;
  coverUrl: string;
  version: number;
  aliases: string[];
};

export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
  const { t } = useTranslation();
  const [query, setQuery] = useState("");
  const presence = useVisitorPresence(null);
  const search = searchItems(guides, query,
    (guide) => `${guide.name} ${guide.overview} ${guide.aliases.join(" ")}`,
    (guide) => [guide.name, ...guide.aliases]);
  const filtered = search.items;
  return (
    <div className="flex flex-col gap-8">
      <InputGroup className="h-11 max-w-2xl">
        <InputGroupAddon>
          <SearchIcon />
        </InputGroupAddon>
        <InputGroupInput
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder={t("ค้นหาไกด์…")}
          aria-label={t("ค้นหาไกด์")}
        />
      </InputGroup>

      {filtered.length ? (
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {filtered.map((guide, index) => (
            <Link
              key={guide.id}
              href={`/${guide.slug}`}
              prefetch={false}
              className="group rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              <Card className="h-full overflow-hidden py-0 transition-transform group-hover:-translate-y-0.5">
                <div className="relative aspect-square bg-muted">
                  <Image
                    src={guide.coverUrl}
                    alt={t("ไกด์ {name}", { name: guide.name })}
                    fill
                    fetchPriority={index === 0 ? "high" : undefined}
                    sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
                    className="object-cover"
                  />
                </div>
                <CardHeader className="pt-5">
                  <CardTitle>{guide.name}</CardTitle>
                  <CardAction
                    className={(presence?.byGuide[guide.id] ?? 0) > 0 ? undefined : "invisible"}
                  >
                    <Badge variant="secondary" className="min-w-14 tabular-nums">
                      <UsersIcon data-icon="inline-start" />
                      {presence?.byGuide[guide.id] ?? 0} {t("คน")}</Badge>
                  </CardAction>
                  <CardDescription className="line-clamp-3">
                    {guide.overview}
                  </CardDescription>
                </CardHeader>
              </Card>
            </Link>
          ))}
        </div>
      ) : (
        <Empty className="border">
          <EmptyHeader>
            <EmptyTitle>{t("ไม่พบไกด์")}</EmptyTitle>
            <EmptyDescription>{t("ลองค้นหาด้วยชื่อตัวละครอื่น")}</EmptyDescription>
          </EmptyHeader>
        </Empty>
      )}
    </div>
  );
}