import * as React from "react";
import { DetailList } from "@/components/detail/DetailList";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { ModelDetailState, SourceRow } from "@/types/local-frontier";

export type ModelDetailProps = {
  detail: ModelDetailState;
};

function Sources({ rows }: { rows: readonly SourceRow[] }): React.JSX.Element {
  if (!rows.length) {
    return (
      <p className="text-muted-foreground">No model source links recorded.</p>
    );
  }

  return (
    <ul className="grid gap-3">
      {rows.map((row) => (
        <li key={row.href}>
          <a
            className="text-foreground underline-offset-2 hover:underline"
            href={row.href}
            rel="noreferrer"
          >
            {row.label}
          </a>
        </li>
      ))}
    </ul>
  );
}

export function ModelDetail({ detail }: ModelDetailProps): React.JSX.Element {
  return (
    <section className="grid gap-4">
      <Card>
        <CardHeader>
          <CardTitle>Architecture</CardTitle>
        </CardHeader>
        <CardContent>
          <DetailList rows={detail.architectureRows} />
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Bound Adapter</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-4">
          <DetailList rows={detail.adapterRows} />
          {detail.notes.map((note) => (
            <p key={note} className="text-muted-foreground">
              {note}
            </p>
          ))}
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Sources</CardTitle>
        </CardHeader>
        <CardContent>
          <Sources rows={detail.sources} />
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Calculator</CardTitle>
        </CardHeader>
        <CardContent className="grid justify-start gap-3 text-muted-foreground">
          <p>
            Use this model with any hardware row in the local frontier catalog.
          </p>
          <Button asChild variant="outline">
            <a href={detail.compareHref}>Compare</a>
          </Button>
        </CardContent>
      </Card>
    </section>
  );
}