import Link from "next/link";
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemHeader,
  ItemTitle,
} from "@/components/ui/item";
import { ChevronRightIcon, FlagIcon } from "lucide-react";

interface CampaignEntry {
  id: number;
  name: string;
  summary: string;
  status: string;
}

interface ActiveCampaignsProps {
  campaigns: CampaignEntry[];
}

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

export function ActiveCampaigns({ campaigns }: ActiveCampaignsProps) {
  if (campaigns.length === 0) {
    return (
      <Item variant="outline">
        <ItemHeader>
          <div className="flex items-center gap-2">
            <FlagIcon className="size-4 text-muted-foreground" />
            <ItemTitle>Active Campaigns</ItemTitle>
          </div>
        </ItemHeader>
        <ItemContent>
          <p className="text-sm text-muted-foreground italic">
            No active campaigns.
          </p>
        </ItemContent>
      </Item>
    );
  }

  return (
    <Item variant="outline">
      <ItemHeader>
        <div className="flex items-center gap-2">
          <FlagIcon className="size-4 text-muted-foreground" />
          <ItemTitle>Active Campaigns</ItemTitle>
        </div>
        <Link
          href="/intelligence/campaigns"
          className="text-xs text-muted-foreground hover:text-primary transition-colors"
        >
          View all
        </Link>
      </ItemHeader>
      <ItemContent>
        <div className="flex flex-col gap-2">
          {campaigns.map((campaign) => (
            <Link
              key={campaign.id}
              href={`/intelligence/campaigns/${campaign.id}`}
              className="flex items-center gap-3 p-2 rounded-md hover:bg-muted/50 transition-colors group"
            >
              <FlagIcon className="size-4 text-muted-foreground shrink-0" />
              <div className="flex flex-col gap-0.5 min-w-0 flex-1">
                <div className="flex items-center gap-2">
                  <span className="text-sm font-medium truncate group-hover:text-primary transition-colors">
                    {campaign.name}
                  </span>
                  <span
                    className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded shrink-0 ${statusColors[campaign.status] ?? "bg-muted text-muted-foreground"}`}
                  >
                    {campaign.status === "inProgress" ? "Active" : campaign.status}
                  </span>
                </div>
                <span className="text-xs text-muted-foreground truncate">
                  {campaign.summary}
                </span>
              </div>
              <ChevronRightIcon className="size-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
            </Link>
          ))}
        </div>
      </ItemContent>
    </Item>
  );
}