explorer/src/app/zxdb/labels/LabelsSearch.tsx

"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";

type Label = { id: number; name: string; labeltypeId: string | null };
type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };

export default function LabelsSearch({ initial, initialQ }: { initial?: Paged<Label>; initialQ?: string }) {
  const router = useRouter();
  const [q, setQ] = useState(initialQ ?? "");
  const [data, setData] = useState<Paged<Label> | null>(initial ?? null);
  const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);

  // Sync incoming SSR payload on navigation (e.g., when clicking Prev/Next Links)
  useEffect(() => {
    if (initial) setData(initial);
  }, [initial]);

  // Keep input in sync with URL q on navigation
  useEffect(() => {
    setQ(initialQ ?? "");
  }, [initialQ]);

  function submit(e: React.FormEvent) {
    e.preventDefault();
    const params = new URLSearchParams();
    if (q) params.set("q", q);
    params.set("page", "1");
    router.push(`/zxdb/labels?${params.toString()}`);
  }

  return (
    <div>
      <ZxdbBreadcrumbs
        items={[
          { label: "ZXDB", href: "/zxdb" },
          { label: "Labels" },
        ]}
      />

      <div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
        <div>
          <h1 className="mb-1">Labels</h1>
          <div className="text-secondary">{data?.total.toLocaleString() ?? "0"} results</div>
        </div>
      </div>

      <div className="row g-3">
        <div className="col-lg-3">
          <div className="card shadow-sm">
            <div className="card-body">
              <form className="d-flex flex-column gap-2" onSubmit={submit}>
                <div>
                  <label className="form-label small text-secondary">Search</label>
                  <input className="form-control" placeholder="Search labels…" value={q} onChange={(e) => setQ(e.target.value)} />
                </div>
                <div className="d-grid">
                  <button className="btn btn-primary">Search</button>
                </div>
              </form>
            </div>
          </div>
        </div>

        <div className="col-lg-9">
          {data && data.items.length === 0 && <div className="alert alert-warning">No labels found.</div>}
          {data && data.items.length > 0 && (
            <div className="table-responsive">
              <table className="table table-striped table-hover align-middle">
                <thead>
                  <tr>
                    <th style={{ width: 100 }}>ID</th>
                    <th>Name</th>
                    <th style={{ width: 120 }}>Type</th>
                  </tr>
                </thead>
                <tbody>
                  {data.items.map((l) => (
                    <tr key={l.id}>
                      <td>#{l.id}</td>
                      <td>
                        <Link href={`/zxdb/labels/${l.id}`}>{l.name}</Link>
                      </td>
                      <td>
                        <span className="badge text-bg-light">{l.labeltypeId ?? "?"}</span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>

      <div className="d-flex align-items-center gap-2 mt-2">
        <span>Page {data?.page ?? 1} / {totalPages}</span>
        <div className="ms-auto d-flex gap-2">
          <Link
            className={`btn btn-outline-secondary ${!data || (data.page <= 1) ? "disabled" : ""}`}
            aria-disabled={!data || data.page <= 1}
            href={`/zxdb/labels?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.max(1, (data?.page ?? 1) - 1))); return p.toString(); })()}`}
          >
            Prev
          </Link>
          <Link
            className={`btn btn-outline-secondary ${!data || (data.page >= totalPages) ? "disabled" : ""}`}
            aria-disabled={!data || data.page >= totalPages}
            href={`/zxdb/labels?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.min(totalPages, (data?.page ?? 1) + 1))); return p.toString(); })()}`}
          >
            Next
          </Link>
        </div>
      </div>
    </div>
  );
}