import { data, Link, useLoaderData } from "react-router";
import type { LoaderFunctionArgs } from "react-router";
import {
  getBandById,
  getBandLinks,
  getBandArtists,
  getBandRevisions,
} from "~/lib/db.server";
import { LINK_TYPE_LABEL } from "~/lib/constants";

export async function loader({ params }: LoaderFunctionArgs) {
  const band = getBandById(params.uuid!);
  if (!band) throw data("Not found", { status: 404 });
  const links = getBandLinks(band.id);
  const artists = getBandArtists(band.id);
  const revisions = getBandRevisions(band.id);
  return { band, links, artists, latest: revisions[0] ?? null };
}

const STATUS_LABEL: Record<string, string> = {
  active: "活動中",
  hiatus: "活動休止",
  disbanded: "解散",
};

export default function BandDetail() {
  const { band, links, artists, 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">
        <div>
          <h1 className="text-2xl font-bold">{band.name}</h1>
          <div className="flex items-center gap-3 mt-1 text-sm text-gray-400">
            {band.area && <span>{band.area}</span>}
            <span>{STATUS_LABEL[band.status] ?? band.status}</span>
          </div>
          {band.description && (
            <p className="mt-3 text-gray-300 text-sm leading-relaxed">{band.description}</p>
          )}
        </div>
        <div className="flex items-center gap-3 text-sm shrink-0 ml-4">
          <Link
            to={`/bands/of/${band.id}/history`}
            className="text-gray-400 hover:text-gray-200 transition-colors"
          >
            履歴
          </Link>
          <Link
            to={`/bands/of/${band.id}/edit`}
            className="bg-gray-800 hover:bg-gray-700 text-gray-200 px-3 py-1.5 rounded transition-colors"
          >
            編集
          </Link>
        </div>
      </div>

      {artists.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">
            {artists.map((a) => (
              <li key={a.artist_id} className="flex items-center gap-3">
                <Link
                  to={`/artists/of/${a.artist_id}`}
                  className="text-blue-400 hover:text-blue-300 transition-colors font-medium"
                >
                  {a.artist_name}
                </Link>
                {a.role && (
                  <span className="text-gray-400 text-sm">{a.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"
                >
                  {LINK_TYPE_LABEL[l.label] ?? 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>/bands/of/{band.id}</p>
        <p>
          <Link
            to={`/bands/named/${band.slug}`}
            className="hover:text-gray-400 transition-colors"
          >
            /bands/named/{band.slug}
          </Link>
        </p>
        {latest && (
          <p className="font-sans text-gray-500 mt-2">
            最終更新: {latest.created_at} — {latest.message}
          </p>
        )}
      </div>
    </main>
  );
}