import { data, Link, useLoaderData } from "react-router";
import type { LoaderFunctionArgs } from "react-router";
import { getArtistBands, getArtistById, getArtistLinks, getArtistRevisions } from "~/lib/db.server";

export async function loader({ params }: LoaderFunctionArgs) {
  const artist = getArtistById(params.uuid!);
  if (!artist) throw data("Not found", { status: 404 });
  const links = getArtistLinks(artist.id);
  const bands = getArtistBands(artist.id);
  const revisions = getArtistRevisions(artist.id);
  return { artist, links, bands, latest: revisions[0] ?? null };
}

export default function ArtistDetail() {
  const { artist, links, bands, latest } = useLoaderData<typeof loader>();
  return (
    <main className="max-w-3xl mx-auto px-4 py-8">
      <div className="flex items-start justify-between mb-6">
        <h1 className="text-2xl font-bold">{artist.name}</h1>
        <div className="flex items-center gap-3 text-sm shrink-0 ml-4">
          <Link
            to={`/artists/of/${artist.id}/history`}
            className="text-gray-400 hover:text-gray-200 transition-colors"
          >
            履歴
          </Link>
          <Link
            to={`/artists/of/${artist.id}/edit`}
            className="bg-gray-800 hover:bg-gray-700 text-gray-200 px-3 py-1.5 rounded transition-colors"
          >
            編集
          </Link>
        </div>
      </div>

      {bands.length > 0 && (
        <section className="mb-6">
          <h2 className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">
            バンド
          </h2>
          <ul className="space-y-2">
            {bands.map((b) => (
              <li key={b.band_id} className="flex items-center gap-3">
                <Link
                  to={`/bands/of/${b.band_id}`}
                  className="text-blue-400 hover:text-blue-300 transition-colors font-medium"
                >
                  {b.band_name}
                </Link>
                {b.role && (
                  <span className="text-gray-400 text-sm">{b.role}</span>
                )}
              </li>
            ))}
          </ul>
        </section>
      )}

      {links.length > 0 && (
        <section className="mb-6">
          <h2 className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">
            リンク
          </h2>
          <ul className="space-y-1.5">
            {links.map((l) => (
              <li key={l.id}>
                <a
                  href={l.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-blue-400 hover:text-blue-300 transition-colors text-sm"
                >
                  {l.label}
                </a>
              </li>
            ))}
          </ul>
        </section>
      )}

      <hr className="border-gray-800 my-6" />
      <div className="text-xs text-gray-600 space-y-1 font-mono">
        <p>/artists/of/{artist.id}</p>
        <p>
          <Link
            to={`/artists/named/${artist.slug}`}
            className="hover:text-gray-400 transition-colors"
          >
            /artists/named/{artist.slug}
          </Link>
        </p>
        {latest && (
          <p className="font-sans text-gray-500 mt-2">
            最終更新: {latest.created_at} — {latest.message}
          </p>
        )}
      </div>
    </main>
  );
}
