import { PageHeader } from "@/components/PageHeader";
import type { EntityView } from "@/lib/catalog";

/**
 * Generic record page: title, summary, sources, claims, and neighbouring relations.
 * OnCo EntityDetail was not copied. That file special-cases domain panels.
 */
export function EntityDetail({ entity }: { entity: EntityView }) {
  return (
    <>
      <PageHeader kicker={entity.kindLabel} title={entity.title} lede={entity.tldr} />
      <div className="mx-auto max-w-7xl space-y-10 px-4 py-10 sm:px-6">
        <p className="max-w-3xl text-body leading-relaxed">{entity.summary}</p>
        {entity.tags.length > 0 ? (
          <ul className="flex flex-wrap gap-2">
            {entity.tags.map((tag) => (
              <li key={tag} className="chip">{tag}</li>
            ))}
          </ul>
        ) : null}
        <section aria-labelledby="sources-heading">
          <h2 id="sources-heading" className="mb-3 text-lg">Sources</h2>
          {entity.sources.length === 0 ? (
            <p className="text-sm text-muted">No sources.</p>
          ) : (
            <ul className="space-y-2 text-sm">
              {entity.sources.map((source) => (
                <li key={source.title}>
                  {source.title}
                  {source.license ? <span className="text-muted"> · {source.license}</span> : null}
                </li>
              ))}
            </ul>
          )}
        </section>
        <section aria-labelledby="claims-heading">
          <h2 id="claims-heading" className="mb-3 text-lg">Claims</h2>
          {entity.claims.length === 0 ? (
            <p className="text-sm text-muted">No claims.</p>
          ) : (
            <ul className="space-y-2 text-sm">
              {entity.claims.map((claim) => (
                <li key={`${claim.key}:${claim.status}:${claim.value ?? ""}`}>
                  <span className="font-medium">{claim.key}</span>
                  <span className="text-muted"> · {claim.status}</span>
                  {claim.value ? <span> · {claim.value}</span> : null}
                </li>
              ))}
            </ul>
          )}
        </section>
        <section aria-labelledby="relations-heading">
          <h2 id="relations-heading" className="mb-3 text-lg">Relations</h2>
          {entity.relations.length === 0 ? (
            <p className="text-sm text-muted">No relations.</p>
          ) : (
            <ul className="space-y-2 text-sm">
              {entity.relations.map((relation) => (
                <li key={`${relation.direction}:${relation.wording}:${relation.otherTitle}`}>
                  <span className="text-muted">{relation.wording}</span>
                  {" · "}
                  {relation.otherHref ? (
                    <a className="underline" href={relation.otherHref}>{relation.otherTitle}</a>
                  ) : (
                    relation.otherTitle
                  )}
                </li>
              ))}
            </ul>
          )}
        </section>
        <p className="text-sm">
          <a className="underline" href={entity.kindHref}>Back to {entity.kindLabel}</a>
        </p>
      </div>
    </>
  );
}