import { Form, Link, useLoaderData } from "react-router";
import type { Route } from "./+types/search";
import { searchAll } from "~/lib/db.server";

export function loader({ request }: Route.LoaderArgs) {
  const q = new URL(request.url).searchParams.get("q")?.trim() ?? "";
  if (!q) return { q, bands: [], artists: [] };
  const { bands, artists } = searchAll(q);
  return { q, bands, artists };
}

export default function Search() {
  const { q, bands, artists } = useLoaderData<typeof loader>();
  const hasResults = bands.length > 0 || artists.length > 0;

  return (
    <main>
      <div className="page-header">
        <h1>検索</h1>
      </div>

      <Form method="get" action="/search" style={{ marginBottom: "1.5rem" }}>
        <input
          type="search"
          name="q"
          defaultValue={q}
          placeholder="バンド名・アーティスト名で検索"
          autoFocus
        />
      </Form>

      {!q ? (
        <p className="muted">検索キーワードを入力してください。</p>
      ) : !hasResults ? (
        <p className="muted">「{q}」に一致する結果が見つかりませんでした。</p>
      ) : (
        <>
          {bands.length > 0 && (
            <section>
              <h2>Bands</h2>
              <ul className="band-list">
                {bands.map((band) => (
                  <li key={band.id}>
                    <Link to={`/bands/of/${band.id}`}>{band.name}</Link>
                    {band.area && (
                      <span className="muted" style={{ fontSize: ".75rem" }}>{band.area}</span>
                    )}
                    {band.status === "hiatus" && (
                      <span className="muted" style={{ fontSize: ".75rem" }}>活動休止</span>
                    )}
                  </li>
                ))}
              </ul>
            </section>
          )}

          {artists.length > 0 && (
            <section>
              <h2>Artists</h2>
              <ul className="band-list">
                {artists.map((artist) => (
                  <li key={artist.id}>
                    <Link to={`/artists/of/${artist.id}`}>{artist.name}</Link>
                  </li>
                ))}
              </ul>
            </section>
          )}
        </>
      )}
    </main>
  );
}