"use client";

import * as React from "react";
import { format, parseISO } from "date-fns";
import {
  ChevronDown,
  FileText,
  Loader2,
  Sparkles,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

import type { BdrMetricsDateRangeMode } from "./bdr-metrics-date-range";

export type BdrMetricsExportScope = {
  teamLabel: string;
  bdrLabel: string;
  dateRangeMode: BdrMetricsDateRangeMode;
  rangeLabel: string;
  bucketLabel: string;
  from: string;
  to: string;
};

export type BdrMetricsExportReportProps = {
  scope: BdrMetricsExportScope;
  exporting: boolean;
  filtersBusy: boolean;
  disabled?: boolean;
  onExport: () => void;
};

function formatScopeDate(iso: string): string {
  if (!iso) return "—";
  try {
    return format(parseISO(iso), "MMM d, yyyy");
  } catch {
    return iso;
  }
}

function ScopeRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-start justify-between gap-3 py-1.5">
      <span className="shrink-0 font-['Lexend_Deca'] text-[10px] font-bold uppercase tracking-wide text-gray-400">
        {label}
      </span>
      <span className="min-w-0 text-right font-['Lexend_Deca'] text-[11px] font-semibold text-[#1d1d39] leading-snug">
        {value}
      </span>
    </div>
  );
}

export function BdrMetricsExportReport({
  scope,
  exporting,
  filtersBusy,
  disabled = false,
  onExport,
}: BdrMetricsExportReportProps) {
  const [open, setOpen] = React.useState(false);
  const generateBlocked = disabled || filtersBusy || exporting;
  const triggerDisabled = disabled || exporting;
  const dateRangeLabel =
    scope.dateRangeMode === "all_time"
      ? "All time"
      : scope.rangeLabel ||
        `${formatScopeDate(scope.from)} – ${formatScopeDate(scope.to)}`;

  const handleExport = () => {
    onExport();
    setOpen(false);
  };

  const triggerLabel = exporting ? "Generating…" : "Export report";

  const disabledReason = exporting
    ? "PDF is being generated"
    : disabled
      ? "Export is unavailable"
      : null;

  const trigger = (
    <Button
      type="button"
      size="icon-sm"
      disabled={triggerDisabled}
      className={cn(
        "rounded-lg border border-indigo-500/25 bg-gradient-to-b from-indigo-600 to-indigo-700 text-white shadow-sm shadow-indigo-500/20 transition-all duration-200 hover:from-indigo-500 hover:to-indigo-600 active:scale-[0.98] disabled:opacity-60 disabled:shadow-none",
        open && "ring-2 ring-indigo-200 ring-offset-1 ring-offset-white/50"
      )}
      aria-label={exporting ? "Generating BDR report PDF" : "Export BDR report as PDF"}
      aria-expanded={open}
      aria-haspopup="dialog"
    >
      {exporting ? (
        <Loader2 className="size-4 animate-spin" aria-hidden />
      ) : (
        <FileText className="size-4" aria-hidden />
      )}
    </Button>
  );

  return (
    <Popover open={open} onOpenChange={setOpen}>
      {disabledReason ? (
        <TooltipProvider delayDuration={300}>
          <Tooltip>
            <TooltipTrigger asChild>
              <span className="inline-flex">{trigger}</span>
            </TooltipTrigger>
            <TooltipContent
              side="bottom"
              className="font-['Lexend_Deca'] text-[11px]"
            >
              {disabledReason}
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      ) : (
        <PopoverTrigger asChild>{trigger}</PopoverTrigger>
      )}

      <PopoverContent
        align="end"
        sideOffset={8}
        className="w-[min(100vw-2rem,20rem)] rounded-2xl border border-white/60 bg-white/95 p-0 shadow-xl shadow-indigo-500/10 backdrop-blur-xl"
      >
        <div className="border-b border-black/[0.05] px-4 py-3">
          <div className="flex items-start gap-2.5">
            <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-indigo-500/10 text-indigo-600 ring-1 ring-indigo-500/15">
              <Sparkles className="size-3.5" aria-hidden />
            </span>
            <div className="min-w-0">
              <p className="font-['Lexend'] text-sm font-bold text-[#1d1d39]">
                Export BDR report
              </p>
              <p className="mt-0.5 font-['Lexend_Deca'] text-[11px] leading-snug text-gray-500">
                PDF snapshot of conversion KPIs and funnel counts for your
                current filters.
              </p>
            </div>
          </div>
        </div>

        <div className="px-4 py-2">
          <p className="mb-1 font-['Lexend_Deca'] text-[9px] font-bold uppercase tracking-[0.12em] text-gray-400">
            Included in this export
          </p>
          <div className="divide-y divide-black/[0.04] rounded-xl border border-black/[0.04] bg-gray-50/80 px-3">
            <ScopeRow label="Team" value={scope.teamLabel} />
            <ScopeRow label="BDR" value={scope.bdrLabel} />
            <ScopeRow label="Assignment period" value={dateRangeLabel} />
            <ScopeRow label="Lead bucket" value={scope.bucketLabel} />
          </div>
        </div>

        <div className="flex flex-col gap-2 border-t border-black/[0.05] bg-white/50 px-4 py-3">
          <Button
            type="button"
            size="sm"
            disabled={generateBlocked}
            onClick={handleExport}
            className="h-9 w-full gap-2 rounded-lg bg-indigo-600 font-['Lexend_Deca'] text-[11px] font-bold text-white hover:bg-indigo-700 active:scale-[0.98]"
          >
            {exporting ? (
              <>
                <Loader2 className="size-4 animate-spin" aria-hidden />
                Generating PDF…
              </>
            ) : (
              <>
                <FileText className="size-4" aria-hidden />
                Generate & download PDF
              </>
            )}
          </Button>
          <p className="text-center font-['Lexend_Deca'] text-[10px] text-gray-400">
            {filtersBusy
              ? "Updating metrics — export unlocks when filters settle"
              : "Opens in your downloads folder when ready"}
          </p>
        </div>
      </PopoverContent>
    </Popover>
  );
}