import { ShieldIcon } from "lucide-react";
import type { Faction } from "@/payload-types";
import { Item, ItemContent, ItemHeader, ItemTitle } from "@/components/ui/item";

interface FactionEntry {
  faction: Faction | number;
  threatLevel: "ally" | "friendly" | "neutral" | "hostile";
}

interface MissionFactionsProps {
  factionsInvolved: FactionEntry[] | null;
}

const threatLevelColors: Record<string, string> = {
  ally: "bg-green-500/20 text-green-400",
  friendly: "bg-blue-500/20 text-blue-400",
  neutral: "bg-yellow-500/20 text-yellow-400",
  hostile: "bg-red-500/20 text-red-400",
};

export function MissionFactions({ factionsInvolved }: MissionFactionsProps) {
  if (!factionsInvolved || factionsInvolved.length === 0) {
    return (
      <Item variant="outline">
        <ItemHeader>
          <div className="flex items-center gap-2">
            <ShieldIcon className="size-4 text-muted-foreground" />
            <ItemTitle>Factions</ItemTitle>
          </div>
        </ItemHeader>
        <ItemContent>
          <p className="text-sm text-muted-foreground italic">No factions assigned.</p>
        </ItemContent>
      </Item>
    );
  }

  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-2">
        <ShieldIcon className="size-4 text-muted-foreground" />
        <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
          Factions Involved
        </h2>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        {factionsInvolved.map((entry, index) => {
          const faction = typeof entry.faction === "object" ? entry.faction : null;

          return (
            <Item key={index} variant="outline">
              <ItemHeader>
                <ItemTitle>{faction?.name ?? `Faction #${entry.faction}`}</ItemTitle>
                <span
                  className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${threatLevelColors[entry.threatLevel] ?? "bg-muted text-muted-foreground"}`}
                >
                  {entry.threatLevel}
                </span>
              </ItemHeader>
              {faction && (
                <ItemContent>
                  <span className="text-xs text-muted-foreground">{faction.type}</span>
                </ItemContent>
              )}
            </Item>
          );
        })}
      </div>
    </div>
  );
}