"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

import { api } from "@/lib/api/client";
import type { components } from "@/lib/api/schema";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";

type Tree = components["schemas"]["PublicTreeRead"];

// Public directory of trees. The backend returns `public` to everyone and adds
// `site_members` trees when the request carries a valid session — so signed-in
// users see more here without any client-side branching.
export default function ExplorePage() {
  const [trees, setTrees] = useState<Tree[]>([]);
  const [search, setSearch] = useState("");
  const [ready, setReady] = useState(false);

  useEffect(() => {
    const q = search.trim();
    const t = setTimeout(async () => {
      const { data } = await api.GET("/api/v1/public/trees", {
        params: { query: q ? { q } : {} },
      });
      setTrees(data ?? []);
      setReady(true);
    }, 200);
    return () => clearTimeout(t);
  }, [search]);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="font-serif text-3xl font-semibold">Explore public trees</h1>
        <p className="mt-1 text-[var(--muted)]">
          Browse family trees shared on this site. Living people are always hidden.
        </p>
      </div>

      <Input
        className="w-72"
        placeholder="Search trees by name…"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />

      {!ready ? (
        <p className="text-[var(--muted)]">Loading…</p>
      ) : trees.length === 0 ? (
        <p className="text-[var(--muted)]">No public trees{search.trim() ? " match that search" : " yet"}.</p>
      ) : (
        <ul className="grid gap-3 sm:grid-cols-2">
          {trees.map((t) => (
            <li key={t.id}>
              <Link href={`/p/${t.id}`}>
                <Card className="h-full transition-colors hover:border-bronze/50">
                  <CardContent className="p-4">
                    <div className="flex items-center justify-between gap-2">
                      <span className="truncate font-medium">{t.name}</span>
                      <span className="shrink-0 text-xs uppercase tracking-wide text-[var(--muted)]">
                        {t.visibility === "site_members" ? "Members" : "Public"}
                      </span>
                    </div>
                    {t.description && (
                      <p className="mt-1 line-clamp-2 text-sm text-[var(--muted)]">{t.description}</p>
                    )}
                  </CardContent>
                </Card>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}