"use client";

import * as React from "react";
import type { TooltipProps } from "recharts";
import {
  formatChartValue,
  formatCompactCurrency,
  formatCompactCount,
} from "./marketing-chart-config";

export const marketingChartTooltipStyle = {
  borderRadius: "12px",
  border: "1px solid rgba(255, 255, 255, 0.15)",
  backdropFilter: "blur(12px)",
  boxShadow: "0 12px 40px rgba(15, 17, 23, 0.25)",
  padding: "0",
  backgroundColor: "rgba(15, 17, 23, 0.92)",
  color: "#fff",
} as const;

export const marketingChartTooltipItemStyle = {
  color: "#fff",
  fontSize: "11px",
  fontWeight: "bold" as const,
};

type PayloadEntry = {
  name?: string;
  value?: number;
  color?: string;
  dataKey?: string;
};

type MarketingTooltipProps = TooltipProps<number, string> & {
  valueFormat?: "currency" | "count" | "percent";
  labelPrefix?: string;
  footer?: React.ReactNode;
};

export function MarketingChartTooltip({
  active,
  payload,
  label,
  valueFormat = "currency",
  labelPrefix,
  footer,
}: MarketingTooltipProps) {
  if (!active || !payload?.length) return null;

  return (
    <div
      className="min-w-[160px] rounded-xl border border-white/10 bg-[#0f1117]/95 px-3 py-2.5 shadow-xl backdrop-blur-md"
      style={marketingChartTooltipStyle}
    >
      {label ? (
        <p className="mb-2 text-[10px] font-bold uppercase tracking-wider text-white/60">
          {labelPrefix ? `${labelPrefix} ` : ""}
          {label}
        </p>
      ) : null}
      <div className="flex flex-col gap-1.5">
        {payload.map((entry, index) => {
          const item = entry as PayloadEntry;
          const value = item.value ?? 0;
          return (
            <div key={`${item.dataKey}-${index}`} className="flex items-center justify-between gap-4">
              <div className="flex items-center gap-2">
                <span
                  className="h-2 w-2 rounded-full"
                  style={{ backgroundColor: item.color ?? "#6C63FF" }}
                />
                <span className="text-[11px] font-semibold text-white/85">{item.name}</span>
              </div>
              <span className="text-[11px] font-bold tabular-nums text-white">
                {formatChartValue(value, valueFormat)}
              </span>
            </div>
          );
        })}
      </div>
      {footer ? <div className="mt-2 border-t border-white/10 pt-2">{footer}</div> : null}
    </div>
  );
}

export function MarketingDualAxisTooltip({
  active,
  payload,
  label,
}: TooltipProps<number, string>) {
  if (!active || !payload?.length) return null;

  return (
    <div className="min-w-[180px] rounded-xl border border-white/10 bg-[#0f1117]/95 px-3 py-2.5 shadow-xl backdrop-blur-md">
      {label ? (
        <p className="mb-2 text-[10px] font-bold uppercase tracking-wider text-white/60">
          {label}
        </p>
      ) : null}
      <div className="flex flex-col gap-1.5">
        {payload.map((entry, index) => {
          const item = entry as PayloadEntry;
          const value = item.value ?? 0;
          const isCount =
            item.dataKey === "leads" ||
            item.dataKey === "accounts" ||
            item.name?.toLowerCase().includes("lead");
          return (
            <div key={`${item.dataKey}-${index}`} className="flex items-center justify-between gap-4">
              <div className="flex items-center gap-2">
                <span
                  className="h-2 w-2 rounded-full"
                  style={{ backgroundColor: item.color ?? "#6C63FF" }}
                />
                <span className="text-[11px] font-semibold text-white/85">{item.name}</span>
              </div>
              <span className="text-[11px] font-bold tabular-nums text-white">
                {isCount ? formatCompactCount(value) : formatCompactCurrency(value)}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}