polaris-task-force/src/components/frontend/dashboard/UpcomingMissions.tsx

import Link from "next/link";
import type { Campaign, Map } from "@/payload-types";
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemHeader,
  ItemTitle,
} from "@/components/ui/item";
import { CalendarDaysIcon, ChevronRightIcon, CrosshairIcon } from "lucide-react";

interface MissionEntry {
  id: number;
  name: string;
  codeName: string;
  classification: {
    startDateTime: string;
    map: number | Map;
    campaign: number | Campaign;
  };
  ownershipAndStatus: {
    status: string;
  };
}

interface UpcomingMissionsProps {
  missions: MissionEntry[];
}

export function UpcomingMissions({ missions }: UpcomingMissionsProps) {
  if (missions.length === 0) {
    return (
      <Item variant="outline">
        <ItemHeader>
          <div className="flex items-center gap-2">
            <CrosshairIcon className="size-4 text-muted-foreground" />
            <ItemTitle>Upcoming Missions</ItemTitle>
          </div>
        </ItemHeader>
        <ItemContent>
          <p className="text-sm text-muted-foreground italic">
            No missions scheduled.
          </p>
        </ItemContent>
      </Item>
    );
  }

  return (
    <Item variant="outline">
      <ItemHeader>
        <div className="flex items-center gap-2">
          <CrosshairIcon className="size-4 text-muted-foreground" />
          <ItemTitle>Upcoming Missions</ItemTitle>
        </div>
        <Link
          href="/intelligence/missions"
          className="text-xs text-muted-foreground hover:text-primary transition-colors"
        >
          View all
        </Link>
      </ItemHeader>
      <ItemContent>
        <div className="flex flex-col gap-2">
          {missions.map((mission) => {
            const startDate = new Date(mission.classification.startDateTime);
            const dateStr = startDate.toLocaleDateString("en-US", {
              month: "short",
              day: "numeric",
            });
            const timeStr = startDate.toLocaleTimeString("en-US", {
              hour: "2-digit",
              minute: "2-digit",
            });
            const campaign =
              typeof mission.classification.campaign === "object"
                ? (mission.classification.campaign as Campaign)
                : null;

            return (
              <Link
                key={mission.id}
                href={`/intelligence/missions/${mission.id}`}
                className="flex items-start gap-3 p-2 rounded-md hover:bg-muted/50 transition-colors group"
              >
                <div className="flex flex-col items-center text-center min-w-[2.5rem]">
                  <span className="text-[10px] uppercase tracking-wider text-muted-foreground">
                    {startDate.toLocaleDateString("en-US", { weekday: "short" })}
                  </span>
                  <span className="text-sm font-bold">{dateStr.split(" ")[1]}</span>
                  <span className="text-[10px] text-muted-foreground">{timeStr}</span>
                </div>
                <div className="flex flex-col gap-0.5 min-w-0 flex-1">
                  <span className="font-mono text-[10px] text-muted-foreground">
                    {mission.codeName}
                  </span>
                  <span className="text-sm font-medium truncate group-hover:text-primary transition-colors">
                    {mission.name}
                  </span>
                  {campaign && (
                    <span className="text-[10px] text-muted-foreground">
                      {campaign.name}
                    </span>
                  )}
                </div>
                <ChevronRightIcon className="size-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity mt-1 shrink-0" />
              </Link>
            );
          })}
        </div>
      </ItemContent>
    </Item>
  );
}