Artifacts

import Link from "next/link";
import { notFound } from "next/navigation";
import { ClipboardList } from "lucide-react";
import { PageHeader } from "@/components/layout/page-header";
import { StatusBadge } from "@/components/shared/status-badge";
import { MetaItem } from "@/components/shared/field-list";
import { Markdown } from "@/components/shared/markdown";
import { SourceRef } from "@/components/shared/source-ref";
import { Card, CardContent } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { getAssignment } from "@/lib/content/assignments";
import { getWorkOrder } from "@/lib/content/work-orders";

export const dynamic = "force-dynamic";

export default function AssignmentDetailPage({ params }: { params: { id: string } }) {
  const assignment = getAssignment(params.id);
  if (!assignment) notFound();

  const workOrder = assignment.workOrderId
    ? getWorkOrder(assignment.workOrderId)
    : undefined;

  return (
    <div>
      <PageHeader
        eyebrow={assignment.id}
        title={assignment.title}
        description={assignment.objective}
        back={{ label: "Assignments", href: "/assignments" }}
        actions={<StatusBadge status={assignment.status} />}
      />

      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
        <div className="lg:col-span-2">
          <Card>
            <CardContent className="p-6">
              <Markdown>{assignment.body}</Markdown>
            </CardContent>
          </Card>
        </div>

        <aside className="space-y-6">
          <Card>
            <CardContent className="space-y-5 p-6">
              <MetaItem label="Status">
                <StatusBadge status={assignment.status} />
              </MetaItem>
              <Separator />
              <MetaItem label="Owner">{assignment.owner}</MetaItem>
              <Separator />
              <MetaItem label="Worker Template">{assignment.workerTemplate}</MetaItem>
              <Separator />
              <MetaItem label="Work Order">
                {workOrder ? (
                  <Link
                    href={`/work-orders/${workOrder.id}`}
                    className="inline-flex items-center gap-1.5 text-accent hover:underline"
                  >
                    <ClipboardList className="h-4 w-4" />
                    {workOrder.id}
                  </Link>
                ) : (
                  assignment.workOrderId ?? "—"
                )}
              </MetaItem>
            </CardContent>
          </Card>

          <div>
            <div className="mb-2 text-[11px] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
              Source
            </div>
            <SourceRef path={assignment.sourcePath} />
          </div>
        </aside>
      </div>
    </div>
  );
}