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>
      <div className="detail-header">
        <div className="detail-info">
          <h1>{band.name}</h1>
          <div className="detail-subtitle">
            {band.area && <span>{band.area}</span>}
            <span>{STATUS_LABEL[band.status] ?? band.status}</span>
          </div>
          {band.description && (
            <p className="detail-desc">{band.description}</p>
          )}
        </div>
        <div className="detail-actions">
          <Link to={`/bands/of/${band.id}/history`} className="history">履歴</Link>
          <Link to={`/bands/of/${band.id}/edit`} className="edit">編集</Link>
        </div>
      </div>

      {artists.length > 0 && (
        <section>
          <h2>メンバー</h2>
          <ul className="member-list">
            {artists.map((a) => (
              <li key={a.artist_id}>
                <Link to={`/artists/of/${a.artist_id}`}>{a.artist_name}</Link>
                {a.role && a.role.split(", ").filter(Boolean).map((r, i) => (
                  <span key={i} className="badge">{r}</span>
                ))}
              </li>
            ))}
          </ul>
        </section>
      )}

      {links.length > 0 && (
        <section>
          <h2>リンク</h2>
          <ul className="link-list">
            {links.map((l) => (
              <li key={l.id}>
                <a href={l.url} target="_blank" rel="noopener noreferrer">
                  {LINK_TYPE_LABEL[l.label] ?? l.label}
                </a>
              </li>
            ))}
          </ul>
        </section>
      )}

      <hr />
      <div className="meta">
        <p>/bands/of/{band.id}</p>
        <p>
          <Link to={`/bands/named/${band.slug}`}>/bands/named/{band.slug}</Link>
        </p>
        {latest && (
          <p className="updated">最終更新: {latest.created_at} — {latest.message}</p>
        )}
      </div>
    </main>
  );
}
