import * as React from "react";
import { cn } from "@/lib/utils";
import { useThemeVars } from "@/lib/theme-provider";
import { formatCurrencyAbbrev } from "@/lib/format-currency";
import { pipelinePrimaryColor } from "@/lib/pipeline-colors";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "./tooltip";

/**
 * PipelineChart — WealthX DS (L4 Section)
 *
 * Horizontal stacked bar chart showing a total split by stage. Each segment is
 * proportional to its stage's value. Hover a segment to see the stage name and
 * the formatted value.
 *
 * Values are abbreviated currency by default, which suits the loan pipeline it
 * was built for. Pass `formatValue` when the stages count things instead — a
 * task board rendering "$3" for three cards is the case this exists for.
 *
 * Colors: each stage supplies its own `color` (e.g. `accentColor` from
 * `KanbanColumnStage`). Falls back to the design system's primary token.
 *
 * Data source: `listColumns()` → `Stage[]` in `loan-crm.ts`
 */

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export interface PipelineChartStage {
  id: string;
  name: string;
  /** The stage's value — dollars by default, or whatever `formatValue` renders. */
  value: number;
  /** CSS color string — use the stage's `accentColor`. Falls back to primary. */
  color?: string;
}

export interface PipelineChartProps {
  stages: PipelineChartStage[];
  /** Height of the stacked bar in pixels. Default 32. */
  barHeight?: number;
  /**
   * Renders a stage's value in the tooltip and its accessible label. Defaults to
   * abbreviated currency.
   */
  formatValue?: (value: number) => string;
  className?: string;
}

// ---------------------------------------------------------------------------
// PipelineChart
// ---------------------------------------------------------------------------

export function PipelineChart({
  stages,
  barHeight = 32,
  formatValue = formatCurrencyAbbrev,
  className,
}: PipelineChartProps) {
  const themeVars = useThemeVars();
  const [activeId, setActiveId] = React.useState<string | null>(null);

  const nonEmpty = stages.filter((s) => s.value > 0);
  const total = nonEmpty.reduce((sum, s) => sum + s.value, 0);

  if (total === 0 || stages.length === 0) {
    return (
      <div
        className={cn(
          "flex items-center justify-center text-xs text-muted-foreground",
          className,
        )}
        style={{ height: barHeight }}
        data-slot="pipeline-chart"
      >
        No pipeline data.
      </div>
    );
  }

  const n = nonEmpty.length;

  return (
    <div
      className={cn("flex flex-col gap-3", className)}
      data-slot="pipeline-chart"
      style={themeVars as React.CSSProperties}
    >
      {/* Stacked bar — TooltipContent uses a portal so it is never clipped */}
      <TooltipProvider>
        <div
          className="relative flex w-full overflow-hidden"
          style={{ height: barHeight }}
        >
          {nonEmpty.map((stage, i) => {
            const pct = (stage.value / total) * 100;
            const bgColor = stage.color ?? pipelinePrimaryColor(i, n);
            const isActive = activeId === stage.id;

            return (
              <Tooltip key={stage.id}>
                <TooltipTrigger
                  render={
                    <div
                      role="img"
                      className="relative h-full cursor-pointer transition-opacity"
                      style={{
                        width: `${pct}%`,
                        backgroundColor: bgColor,
                        opacity: activeId && !isActive ? 0.5 : 1,
                        minWidth: 2,
                      }}
                      onMouseEnter={() => setActiveId(stage.id)}
                      onMouseLeave={() => setActiveId(null)}
                      aria-label={`${stage.name}: ${formatValue(stage.value)}`}
                    />
                  }
                />
                <TooltipContent side="top">
                  <span className="font-medium">{stage.name}</span>
                  {" — "}
                  {formatValue(stage.value)}
                </TooltipContent>
              </Tooltip>
            );
          })}
        </div>
      </TooltipProvider>

      {/* Legend */}
      <div className="flex flex-wrap gap-x-4 gap-y-1.5">
        {nonEmpty.map((stage, i) => (
          <div
            key={stage.id}
            className="flex items-center gap-1.5 text-xs text-muted-foreground"
          >
            <span
              className="inline-block size-2 shrink-0 rounded-full"
              style={{
                backgroundColor: stage.color ?? pipelinePrimaryColor(i, n),
              }}
              aria-hidden="true"
            />
            {stage.name}
          </div>
        ))}
      </div>
    </div>
  );
}