Artifacts

import { notFound } from "next/navigation";
import { ClipboardList } 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 { getMission } from "@/lib/content/missions";
import { getWorkOrdersForMission } from "@/lib/content/work-orders";

export const dynamic = "force-dynamic";

export default function MissionDetailPage({ params }: { params: { id: string } }) {
  const mission = getMission(params.id);
  if (!mission) notFound();

  const workOrders = getWorkOrdersForMission(mission.id);
  const cleanTitle = mission.title.replace(/^[A-Z]+-\d+\s*[—-]\s*/, "");

  return (
    <div>
      <PageHeader
        eyebrow={mission.id}
        title={cleanTitle}
        description={mission.mission}
        back={{ label: "Mission Sessions", href: "/missions" }}
        actions={<StatusBadge status={mission.status} />}
      />

      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
        <div className="lg:col-span-2 space-y-8">
          <Card>
            <CardContent className="p-6">
              <h2 className="mb-4 text-sm font-semibold tracking-tight">
                Linked Work Orders
              </h2>
              {workOrders.length === 0 ? (
                <p className="text-sm text-muted-foreground">
                  No work orders reference this mission yet.
                </p>
              ) : (
                <RecordList>
                  {workOrders.map((w) => (
                    <RecordRow
                      key={w.id}
                      href={`/work-orders/${w.id}`}
                      id={w.id.split("-").slice(0, 2).join("-")}
                      title={w.title.replace(/^[A-Z]+-\d+\s*[—-]\s*/, "")}
                      description={w.objective}
                      badges={
                        <>
                          <PriorityBadge priority={w.priority} />
                          <StatusBadge status={w.status} />
                        </>
                      }
                    />
                  ))}
                </RecordList>
              )}
            </CardContent>
          </Card>

          {mission.successCriteria.length > 0 && (
            <Card>
              <CardContent className="p-6">
                <FieldList label="Success Criteria" items={mission.successCriteria} />
              </CardContent>
            </Card>
          )}

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

        <aside className="space-y-6">
          <Card>
            <CardContent className="space-y-5 p-6">
              <MetaItem label="Status">
                <StatusBadge status={mission.status} />
              </MetaItem>
              <Separator />
              <MetaItem label="Owner">{mission.owner}</MetaItem>
              <Separator />
              <MetaItem label="Work Orders">
                <span className="inline-flex items-center gap-1.5">
                  <ClipboardList className="h-4 w-4 text-muted-foreground" />
                  {workOrders.length}
                </span>
              </MetaItem>
            </CardContent>
          </Card>

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