"use client";

import { useEffect, useId, useRef, useState, type ComponentType, type SVGProps } from "react";
import {
  ArrowLeftIcon,
  BanknotesIcon,
  CalendarDaysIcon,
  CheckCircleIcon,
  EllipsisVerticalIcon,
  GlobeAltIcon,
  NoSymbolIcon,
  PauseIcon,
  PencilSquareIcon,
  PlayIcon,
  TrashIcon,
} from "@heroicons/react/24/outline";
import { Button } from "@/components/Button";
import { StatusBadge } from "@/components/ui/StatusBadge";
import {
  campaignHeaderActionLayout,
  campaignMenuActionLabel,
  campaignPrimaryActionLabel,
  type CampaignPrimaryAction,
} from "@/lib/campaign-management";
import { campaignStatusBadgeVariant, campaignStatusLabel } from "@/lib/campaigns";
import { formatDateRange, formatMoneyMinor } from "@/lib/format";
import { socialProviderLabel } from "@/lib/social-providers";
import type { Campaign } from "@/types/campaign";

type HeroIcon = ComponentType<SVGProps<SVGSVGElement>>;

function FactChip({ icon: Icon, label }: { icon: HeroIcon; label: string }) {
  return (
    <span className="inline-flex items-center gap-1.5 text-[0.8125rem] text-ink-60">
      <Icon className="size-4 shrink-0 text-ink-40" aria-hidden="true" />
      <span>{label}</span>
    </span>
  );
}

function primaryActionIcon(action: CampaignPrimaryAction): HeroIcon {
  switch (action) {
    case "edit":
      return PencilSquareIcon;
    case "activate":
    case "resume":
      return PlayIcon;
    case "pause":
      return PauseIcon;
    case "complete":
      return CheckCircleIcon;
    case "cancel":
      return NoSymbolIcon;
    case "delete":
      return TrashIcon;
  }
}

function ActionLabel({
  action,
  busy,
}: {
  action: CampaignPrimaryAction;
  busy: boolean;
}) {
  const Icon = primaryActionIcon(action);
  if (busy) return <span>Working…</span>;
  const label = action === "edit" ? "Edit campaign" : campaignPrimaryActionLabel(action);
  return (
    <>
      <Icon className="size-4" aria-hidden="true" />
      <span>{label}</span>
    </>
  );
}

export function CampaignDetailHeader({
  campaign,
  busyPrimary,
  onPrimaryAction,
}: {
  campaign: Campaign;
  busyPrimary: CampaignPrimaryAction | null;
  onPrimaryAction: (action: CampaignPrimaryAction) => void;
}) {
  const { featured, showEdit, menu } = campaignHeaderActionLayout(campaign.status);
  const description = campaign.description?.trim() || null;
  const networks =
    campaign.platforms.length > 0
      ? campaign.platforms.map((platform) => socialProviderLabel(platform)).join(", ")
      : null;

  return (
    <header className="space-y-4">
      <div>
        <Button href="/dashboard/campaigns" size="sm" variant="secondary">
          <ArrowLeftIcon className="size-4" aria-hidden="true" />
          <span>Back to Campaigns</span>
        </Button>
      </div>

      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
        <div className="min-w-0 space-y-2">
          <div className="flex flex-wrap items-center gap-2">
            <h1 className="text-[1.375rem] font-semibold tracking-[-0.02em] text-primary sm:text-[1.5rem]">
              {campaign.name}
            </h1>
            <StatusBadge variant={campaignStatusBadgeVariant(campaign.status)}>
              {campaignStatusLabel(campaign.status)}
            </StatusBadge>
          </div>

          {description ? (
            <p className="max-w-[62ch] text-[0.875rem] leading-relaxed text-ink-60">{description}</p>
          ) : null}

          <div className="flex flex-wrap gap-x-4 gap-y-2">
            <FactChip
              icon={CalendarDaysIcon}
              label={formatDateRange(campaign.start_date, campaign.end_date)}
            />
            <FactChip
              icon={BanknotesIcon}
              label={formatMoneyMinor(campaign.budget_amount, campaign.currency)}
            />
            {networks ? <FactChip icon={GlobeAltIcon} label={networks} /> : null}
          </div>
        </div>

        {featured || showEdit || menu.length > 0 ? (
          <div className="flex shrink-0 flex-wrap items-center gap-2 lg:justify-end">
            {featured ? (
              <Button
                size="sm"
                variant={featured === "edit" ? "secondary" : "primary"}
                disabled={busyPrimary !== null}
                onClick={() => onPrimaryAction(featured)}
              >
                <ActionLabel action={featured} busy={busyPrimary === featured} />
              </Button>
            ) : null}
            {showEdit ? (
              <Button
                size="sm"
                variant="secondary"
                disabled={busyPrimary !== null}
                onClick={() => onPrimaryAction("edit")}
              >
                <ActionLabel action="edit" busy={busyPrimary === "edit"} />
              </Button>
            ) : null}
            {menu.length > 0 ? (
              <CampaignActionsMenu
                actions={menu}
                busyPrimary={busyPrimary}
                onPrimaryAction={onPrimaryAction}
              />
            ) : null}
          </div>
        ) : null}
      </div>
    </header>
  );
}

function CampaignActionsMenu({
  actions,
  busyPrimary,
  onPrimaryAction,
}: {
  actions: CampaignPrimaryAction[];
  busyPrimary: CampaignPrimaryAction | null;
  onPrimaryAction: (action: CampaignPrimaryAction) => void;
}) {
  const [open, setOpen] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);
  const menuId = useId();

  useEffect(() => {
    if (!open) return;

    function onPointerDown(event: MouseEvent) {
      if (!rootRef.current?.contains(event.target as Node)) {
        setOpen(false);
      }
    }

    function onKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape") {
        setOpen(false);
      }
    }

    document.addEventListener("mousedown", onPointerDown);
    document.addEventListener("keydown", onKeyDown);
    return () => {
      document.removeEventListener("mousedown", onPointerDown);
      document.removeEventListener("keydown", onKeyDown);
    };
  }, [open]);

  return (
    <div ref={rootRef} className="relative">
      <Button
        type="button"
        size="sm"
        variant="secondary"
        aria-haspopup="menu"
        aria-expanded={open}
        aria-controls={menuId}
        disabled={busyPrimary !== null}
        onClick={() => setOpen((value) => !value)}
      >
        <EllipsisVerticalIcon className="size-4" aria-hidden="true" />
        <span>More</span>
      </Button>
      {open ? (
        <div
          id={menuId}
          role="menu"
          className="absolute right-0 z-20 mt-1 min-w-[11rem] rounded-pv border border-line bg-surface py-1 shadow-lg"
        >
          {actions.map((action) => {
            const Icon = primaryActionIcon(action);
            return (
              <button
                key={action}
                type="button"
                role="menuitem"
                className="flex w-full items-center gap-2 px-3 py-2 text-left text-[0.8125rem] text-primary hover:bg-bg"
                onClick={() => {
                  setOpen(false);
                  onPrimaryAction(action);
                }}
              >
                <Icon className="size-4 shrink-0 text-ink-40" aria-hidden="true" />
                {campaignMenuActionLabel(action)}
              </button>
            );
          })}
        </div>
      ) : null}
    </div>
  );
}