Artifacts

import { notFound } from "next/navigation";
import { ShieldCheck, Target, AlertTriangle, Lightbulb } from "lucide-react";
import { PageHeader } from "@/components/layout/page-header";
import { FieldList } from "@/components/shared/field-list";
import { SourceRef } from "@/components/shared/source-ref";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { getExecutive } from "@/lib/content/executives";

export const dynamic = "force-dynamic";

function initials(name: string) {
  return name
    .split(" ")
    .map((p) => p[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();
}

export default function ExecutiveDetailPage({ params }: { params: { id: string } }) {
  const exec = getExecutive(params.id);
  if (!exec) notFound();

  return (
    <div>
      <PageHeader
        eyebrow="Executive"
        title={exec.name}
        description={exec.role}
        back={{ label: "Executives", href: "/executives" }}
        actions={
          <div className="flex h-14 w-14 items-center justify-center rounded-full bg-primary text-base font-semibold text-primary-foreground">
            {initials(exec.name)}
          </div>
        }
      />

      <Card className="mb-8 bg-sidebar text-sidebar-foreground border-sidebar-border">
        <CardContent className="p-6">
          <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-sidebar-muted">
            Mission
          </div>
          <p className="mt-2 text-[16px] leading-relaxed text-sidebar-foreground">
            {exec.mission || "No mission recorded."}
          </p>
        </CardContent>
      </Card>

      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
        <ProfileCard
          icon={ShieldCheck}
          title="Authority"
          accent="text-emerald-600"
        >
          {exec.authority.length === 0 ? (
            <p className="text-sm text-muted-foreground/70">None recorded.</p>
          ) : (
            <div className="flex flex-wrap gap-2">
              {exec.authority.map((a) => (
                <Badge key={a} variant="outline" className="text-[13px]">
                  {a}
                </Badge>
              ))}
            </div>
          )}
        </ProfileCard>

        <ProfileCard icon={Target} title="Current Objectives" accent="text-blue-600">
          <FieldList label="" items={exec.currentObjectives} />
        </ProfileCard>

        <ProfileCard
          icon={AlertTriangle}
          title="Known Constraints"
          accent="text-amber-600"
        >
          <FieldList label="" items={exec.knownConstraints} />
        </ProfileCard>

        <ProfileCard icon={Lightbulb} title="Recent Lessons" accent="text-violet-600">
          <FieldList label="" items={exec.recentLessons} />
        </ProfileCard>
      </div>

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

function ProfileCard({
  icon: Icon,
  title,
  accent,
  children,
}: {
  icon: typeof Target;
  title: string;
  accent: string;
  children: React.ReactNode;
}) {
  return (
    <Card>
      <CardContent className="p-6">
        <div className="mb-4 flex items-center gap-2.5">
          <Icon className={`h-[18px] w-[18px] ${accent}`} />
          <h2 className="text-sm font-semibold tracking-tight">{title}</h2>
        </div>
        {children}
      </CardContent>
    </Card>
  );
}