import { Megaphone, X } from "lucide-react";
import { useCallback } from "react";

import {
  Button,
  DashboardWidgetList,
  DismissibleAlert,
  LoadingFrame,
  useDashboardWidgetData,
  type QuickAccessToolRenderContext
} from "@govoplan/core-webui";
import { listCampaigns } from "../../api/campaigns";


type Props = Pick<
  QuickAccessToolRenderContext,
  "settings" | "launchContext" | "complete" | "cancel"
>;

export default function CampaignQuickAccess({
  settings,
  launchContext,
  complete,
  cancel
}: Props) {
  const load = useCallback(
    async () => (await listCampaigns(settings))
      .filter((campaign) => Boolean(campaign.current_version_id))
      .slice(0, 12),
    [settings]
  );
  const { data, loading, error } = useDashboardWidgetData(load, 0);

  return (
    <LoadingFrame loading={loading} label="Loading authorized Campaigns">
      <p className="muted small-note">
        Select an exact Campaign version for {launchContext.activeObject?.label}.
        Campaign content remains in Campaigns and access is checked again when opened.
      </p>
      {error ? (
        <DismissibleAlert tone="warning" resetKey={error}>{error}</DismissibleAlert>
      ) : null}
      <DashboardWidgetList
        emptyText="No authorized versioned Campaign is available."
        items={(data ?? []).map((campaign) => ({
          id: campaign.id,
          title: campaign.name,
          detail: campaign.description || campaign.status,
          meta: campaign.status,
          leading: <Megaphone size={17} aria-hidden="true" />,
          onClick: () => complete({
            contractVersion: "1",
            outcome: "completed",
            action: "selected",
            reference: {
              ownerModule: "campaigns",
              kind: "campaign",
              objectId: campaign.id,
              tenantId: launchContext.tenantId,
              label: campaign.name,
              version: campaign.current_version_id!,
              path: `/campaigns/${encodeURIComponent(campaign.id)}`
            }
          })
        }))}
      />
      <div className="dashboard-contribution-footer">
        <Button onClick={() => cancel("user")}>
          <X size={15} aria-hidden="true" /> Cancel selection
        </Button>
      </div>
    </LoadingFrame>
  );
}