Artifacts

import Link from "next/link";
import { notFound } from "next/navigation";
import { Target } from "lucide-react";
import { PageHeader } from "@/components/layout/page-header";
import { StatusBadge, PriorityBadge } from "@/components/shared/status-badge";
import { RecordRow, RecordList } from "@/components/shared/record-row";
import { FieldList, 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 { getWorkOrder } from "@/lib/content/work-orders";
import { getAssignmentsForWorkOrder } from "@/lib/content/assignments";
import { getMission } from "@/lib/content/missions";

export const dynamic = "force-dynamic";

export default function WorkOrderDetailPage({ params }: { params: { id: string } }) {
  const wo = getWorkOrder(params.id);
  if (!wo) notFound();

  const assignments = getAssignmentsForWorkOrder(wo.id);
  const mission = wo.missionId ? getMission(wo.missionId) : undefined;
  const cleanTitle = wo.title.replace(/^[A-Z]+-\d+\s*[—-]\s*/, "");

  return (
    <div>
      <PageHeader
        eyebrow={wo.id}
        title={cleanTitle}
        description={wo.objective}
        back={{ label: "Work Orders", href: "/work-orders" }}
        actions={
          <div className="flex items-center gap-2">
            <PriorityBadge priority={wo.priority} />
            <StatusBadge status={wo.status} />
          </div>
        }
      />

      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
        <div className="lg:col-span-2 space-y-8">
          {wo.acceptanceCriteria.length > 0 && (
            <Card>
              <CardContent className="p-6">
                <FieldList label="Acceptance Criteria" items={wo.acceptanceCriteria} />
              </CardContent>
            </Card>
          )}

          <Card>
            <CardContent className="p-6">
              <h2 className="mb-4 text-sm font-semibold tracking-tight">Assignments</h2>
              {assignments.length === 0 ? (
                <p className="text-sm text-muted-foreground">
                  No assignments have been dispatched for this work order yet.
                </p>
              ) : (
                <RecordList>
                  {assignments.map((a) => (
                    <RecordRow
                      key={a.id}
                      href={`/assignments/${a.id}`}
                      id={a.id}
                      title={a.title}
                      description={a.objective}
                      badges={<StatusBadge status={a.status} />}
                    />
                  ))}
                </RecordList>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <Markdown>{wo.body}</Markdown>
            </CardContent>
          </Card>
        </div>

        <aside className="space-y-6">
          <Card>
            <CardContent className="space-y-5 p-6">
              <MetaItem label="Status">
                <StatusBadge status={wo.status} />
              </MetaItem>
              <Separator />
              <MetaItem label="Priority">
                <PriorityBadge priority={wo.priority} /> {wo.priority === "Unknown" && "—"}
              </MetaItem>
              <Separator />
              <MetaItem label="Owner">{wo.owner}</MetaItem>
              <Separator />
              <MetaItem label="Mission Session">
                {mission ? (
                  <Link
                    href={`/missions/${mission.id}`}
                    className="inline-flex items-center gap-1.5 text-accent hover:underline"
                  >
                    <Target className="h-4 w-4" />
                    {mission.id}
                  </Link>
                ) : (
                  wo.missionId ?? "—"
                )}
              </MetaItem>
            </CardContent>
          </Card>

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