import config from "@payload-config";
import { getPayload } from "payload";
import { notFound } from "next/navigation";
import Link from "next/link";
import type { Faction, Media, Mission } from "@/payload-types";
import { RichText } from "@payloadcms/richtext-lexical/react";
import {
  ArrowLeftIcon,
  CalendarDaysIcon,
  ChevronRightIcon,
  ShieldIcon,
  TargetIcon,
  UsersIcon,
} from "lucide-react";
import { Item, ItemContent, ItemDescription, ItemHeader, ItemTitle } from "@/components/ui/item";
import { MissionCard } from "@/components/frontend/intelligence/MissionCard";
import { statusColors as missionStatusColors } from "@/lib/intelligence/missionColors";

interface CampaignDetailPageProps {
  params: Promise<{ id: string }>;
}

const statusColors: Record<string, string> = {
  concept: "bg-muted text-muted-foreground",
  inProgress: "bg-blue-500/20 text-blue-400",
  completed: "bg-emerald-500/20 text-emerald-400",
};

const factionTypeColors: Record<string, string> = {
  majorFaction: "bg-blue-500/20 text-blue-400",
  minorFaction: "bg-muted text-muted-foreground",
  corporation: "bg-amber-500/20 text-amber-400",
  special: "bg-purple-500/20 text-purple-400",
};

export default async function CampaignDetailPage({ params }: CampaignDetailPageProps) {
  const { id } = await params;
  const payload = await getPayload({ config });

  const campaign = await payload
    .findByID({
      collection: "campaigns",
      id: Number(id),
      depth: 1,
      select: {
        id: true,
        name: true,
        summary: true,
        status: true,
        startDate: true,
        endDate: true,
        owner: true,
        coverImage: true,
        description: true,
      },
    })
    .catch(() => null);

  const owner = campaign?.owner;
  const ownerName =
    owner && typeof owner === "object" && "displayName" in owner
      ? owner.displayName
      : "Unknown";

  if (!campaign) {
    notFound();
  }

  const coverImage =
    typeof campaign.coverImage === "object" && campaign.coverImage !== null
      ? (campaign.coverImage as Media)
      : null;
  const coverImageUrl = coverImage?.url ?? null;

  const [missionsRes, factionsRes] = await Promise.all([
    payload
      .find({
        collection: "missions",
        where: { "classification.campaign": { equals: campaign.id } },
        sort: "-classification.startDateTime",
        limit: 100,
        depth: 1,
        select: {
          name: true,
          codeName: true,
          summary: true,
          operationType: true,
          classification: true,
          ownershipAndStatus: true,
          missionRoles: true,
          coverImage: true,
        },
      })
      .catch(() => ({ docs: [] })),
    payload.find({
      collection: "factions",
      where: { associatedCampaigns: { equals: campaign.id } },
      limit: 100,
      depth: 0,
      select: { name: true, type: true, description: true },
    }),
  ]);

  const missions = missionsRes.docs as Mission[];
  const factions = factionsRes.docs as Faction[];

  const startDate = campaign.startDate
    ? new Date(campaign.startDate).toLocaleDateString("en-US", {
        year: "numeric",
        month: "short",
        day: "numeric",
      })
    : null;
  const endDate = campaign.endDate
    ? new Date(campaign.endDate).toLocaleDateString("en-US", {
        year: "numeric",
        month: "short",
        day: "numeric",
      })
    : null;

  // Mission status breakdown
  const statusCounts: Record<string, number> = {};
  for (const m of missions) {
    const s = m.ownershipAndStatus.status;
    statusCounts[s] = (statusCounts[s] ?? 0) + 1;
  }

  return (
    <div className="flex flex-col">
      <header className="relative min-h-[500px] w-full overflow-hidden bg-background">
        <div className="absolute top-0 left-0 px-5 pt-5 pb-3 z-10">
          <Link
            href="/intelligence/campaigns"
            className="flex w-fit items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-primary"
          >
            <ArrowLeftIcon className="size-3" />
            Back to Campaigns
          </Link>
        </div>
        {coverImageUrl ? (
          <img
            src={coverImageUrl}
            alt=""
            fetchPriority="high"
            className="absolute inset-0 size-full object-cover opacity-70"
          />
        ) : (
          <div className="absolute inset-0 bg-gradient-to-b from-muted/40 to-background" />
        )}
        <div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-background" />
        <div className="absolute inset-0 bg-gradient-to-r from-black/30 via-transparent to-black/40" />

        <div className="absolute top-4 right-4 z-20 flex gap-2">
          <span
            className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${statusColors[campaign.status] ?? "bg-muted text-muted-foreground"}`}
          >
            {campaign.status === "inProgress"
              ? "In Progress"
              : campaign.status.charAt(0).toUpperCase() + campaign.status.slice(1)}
          </span>
        </div>

        <div className="absolute inset-0 flex flex-col items-center justify-center p-6 md:p-10 lg:p-12 text-center">
          <h1
            id="campaign-title"
            className="text-5xl font-bold tracking-tight text-white drop-shadow-2xl md:text-6xl"
          >
            {campaign.name}
          </h1>
          <p className="mt-3 max-w-3xl text-lg leading-relaxed text-white/80">{campaign.summary}</p>
          {(startDate || endDate) && (
            <div className="mt-6 flex items-center gap-2 text-sm text-white/70">
              <CalendarDaysIcon className="size-4 text-white/60" />
              {startDate && <span>{startDate}</span>}
              {startDate && endDate && <span>—</span>}
              {endDate ? <span>{endDate}</span> : startDate ? <span>Present</span> : null}
            </div>
          )}
        </div>
      </header>

      <div className="p-5 flex flex-col gap-6 max-w-7xl mx-auto w-full">
        <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
          {/* ── Main Content (2/3) ──────────────────────────── */}
          <div className="xl:col-span-2 flex flex-col gap-6">
            {campaign.description && (
              <Item variant="outline">
                <ItemHeader>
                  <ItemTitle>Description</ItemTitle>
                </ItemHeader>
                <ItemContent className="prose-invert prose-sm max-w-none [&_p]:mb-2 [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4 [&_strong]:text-foreground [&_em]:italic">
                  <RichText data={campaign.description} />
                </ItemContent>
              </Item>
            )}

            <section className="flex flex-col gap-3">
              <div className="flex items-center justify-between">
                <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
                  Missions
                </h2>
                <span className="text-xs text-muted-foreground">
                  {missions.length} mission{missions.length !== 1 ? "s" : ""}
                </span>
              </div>
              {missions.length > 0 ? (
                <div className="flex flex-col gap-2">
                  {missions.map((mission) => (
                    <MissionCard
                      key={mission.id}
                      mission={mission}
                      variant="image"
                      showFullDetails={false}
                    />
                  ))}
                </div>
              ) : (
                <Item variant="muted">
                  <ItemContent>
                    <p className="text-sm text-muted-foreground italic">
                      No missions in this campaign yet.
                    </p>
                  </ItemContent>
                </Item>
              )}
            </section>
          </div>

          {/* ── Right Sidebar (1/3) ─────────────────────────── */}
          <div className="flex flex-col gap-4">
            {/* Campaign Stats */}
            <Item variant="outline">
              <ItemHeader>
                <div className="flex items-center gap-2">
                  <TargetIcon className="size-4 text-muted-foreground" />
                  <ItemTitle>Campaign Stats</ItemTitle>
                </div>
              </ItemHeader>
              <ItemContent>
                <div className="flex flex-col gap-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Total Missions</span>
                    <span className="font-semibold">{missions.length}</span>
                  </div>
                  {Object.entries(statusCounts).map(([status, count]) => (
                    <div key={status} className="flex justify-between text-sm">
                      <span className="flex items-center gap-1.5">
                        <span
                          className={`size-2 rounded-full ${missionStatusColors[status]?.split(" ")[0] ?? "bg-muted"}`}
                        />
                        <span className="text-muted-foreground">{status}</span>
                      </span>
                      <span className="font-mono">{count}</span>
                    </div>
                  ))}
                  <div className="flex justify-between text-sm pt-1 border-t border-border/50">
                    <span className="text-muted-foreground">Duration</span>
                    <span>
                      {startDate}
                      {endDate ? ` — ${endDate}` : " — Present"}
                    </span>
                  </div>
                  <div className="flex justify-between text-sm pt-1 border-t border-border/50">
                    <span className="text-muted-foreground">Owner</span>
                    <span className="font-medium">{ownerName}</span>
                  </div>
                </div>
              </ItemContent>
            </Item>

            {/* Faction Roster */}
            {factions.length > 0 && (
              <Item variant="outline">
                <ItemHeader>
                  <div className="flex items-center gap-2">
                    <UsersIcon className="size-4 text-muted-foreground" />
                    <ItemTitle>Faction Roster</ItemTitle>
                  </div>
                  <Link
                    href="/intelligence/factions"
                    className="text-xs text-muted-foreground hover:text-primary transition-colors"
                  >
                    View all
                  </Link>
                </ItemHeader>
                <ItemContent>
                  <div className="flex flex-col gap-2">
                    {factions.map((faction) => (
                      <Link
                        key={faction.id}
                        href="/intelligence/factions"
                        className="flex items-center gap-3 p-1.5 rounded-md hover:bg-muted/50 transition-colors group"
                      >
                        <ShieldIcon className="size-4 text-muted-foreground shrink-0" />
                        <div className="flex flex-col gap-0.5 min-w-0 flex-1">
                          <span className="text-sm font-medium truncate group-hover:text-primary transition-colors">
                            {faction.name}
                          </span>
                          <span
                            className={`text-[10px] font-semibold uppercase tracking-wider px-1 py-0.5 rounded w-fit ${factionTypeColors[faction.type] ?? "bg-muted text-muted-foreground"}`}
                          >
                            {faction.type === "majorFaction"
                              ? "Major"
                              : faction.type === "minorFaction"
                                ? "Minor"
                                : faction.type}
                          </span>
                        </div>
                        <ChevronRightIcon className="size-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
                      </Link>
                    ))}
                  </div>
                </ItemContent>
              </Item>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}