import { useState } from "react";
import {
  ResponsiveContainer, LineChart, Line, XAxis, YAxis,
  CartesianGrid, Tooltip, Legend,
} from "recharts";
import clsx from "clsx";
import { formatMetricValue } from "./platformMetrics";

export interface TimeSeriesPoint {
  date: string;
  [key: string]: number | string;
}

export interface MetricLine {
  key: string;
  label: string;
  color: string;
}

interface Props {
  data: TimeSeriesPoint[];
  metrics: MetricLine[];
  title?: string;
  description?: string;
  isLoading?: boolean;
  height?: number;
}

function CustomTooltipContent({ active, payload, label }: any) {
  if (!active || !payload?.length) return null;
  return (
    <div className="vr-bg-white vr-border vr-border-gray-200 vr-rounded-lg vr-shadow-lg vr-p-3 vr-text-xs">
      <p className="vr-font-semibold vr-text-gray-900 vr-mb-1.5">{label}</p>
      {payload.map((entry: any) => (
        <div key={entry.dataKey} className="vr-flex vr-items-center vr-gap-2 vr-py-0.5">
          <span className="vr-w-2 vr-h-2 vr-rounded-full vr-flex-shrink-0" style={{ backgroundColor: entry.color }} />
          <span className="vr-text-gray-600">{entry.name}:</span>
          <span className="vr-font-semibold vr-text-gray-900">{formatMetricValue(entry.value || 0)}</span>
        </div>
      ))}
    </div>
  );
}

export default function MetricsOverTimeChart({ data, metrics, title, description, isLoading, height = 280 }: Props) {
  const [hiddenMetrics, setHiddenMetrics] = useState<Set<string>>(new Set());

  const toggleMetric = (key: string) => {
    setHiddenMetrics((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key);
      else if (metrics.length - next.size > 1) next.add(key); // keep at least 1
      return next;
    });
  };

  if (isLoading) {
    return (
      <div className="vr-bg-gray-50 vr-rounded-lg vr-p-4" style={{ height }}>
        <div className="vr-flex vr-items-center vr-justify-center vr-h-full vr-gap-2 vr-text-gray-400 vr-text-xs">
          <div className="vr-w-4 vr-h-4 vr-border-2 vr-border-gray-200 vr-border-t-primary-600 vr-rounded-full vr-animate-spin" />
          Loading chart...
        </div>
      </div>
    );
  }

  if (!data || data.length === 0) return null;

  // Check if all values are zero — skip chart if so
  const hasNonZero = data.some((point) =>
    metrics.some((m) => !hiddenMetrics.has(m.key) && (point[m.key] as number) > 0)
  );
  if (!hasNonZero) return null;

  // Downsample if too many points
  const maxPoints = 60;
  const displayData = data.length > maxPoints
    ? data.filter((_, i) => i % Math.ceil(data.length / maxPoints) === 0 || i === data.length - 1)
    : data;

  return (
    <div>
      {title && (
        <div className="vr-flex vr-items-center vr-justify-between vr-mb-3">
          <div>
            <h4 className="vr-text-xs vr-font-semibold vr-text-gray-700">{title}</h4>
            {description && <p className="vr-text-xs vr-text-gray-500 vr-mt-0.5">{description}</p>}
          </div>
        </div>
      )}

      {/* Metric pills */}
      <div className="vr-flex vr-flex-wrap vr-gap-1.5 vr-mb-3">
        {metrics.map((m) => {
          const isHidden = hiddenMetrics.has(m.key);
          return (
            <button
              key={m.key}
              onClick={() => toggleMetric(m.key)}
              className={clsx(
                "vr-inline-flex vr-items-center vr-gap-1.5 vr-px-2.5 vr-py-1 vr-rounded-full vr-text-xs vr-font-medium vr-border-0 vr-cursor-pointer vr-transition-all",
                isHidden
                  ? "vr-bg-gray-100 vr-text-gray-400"
                  : "vr-bg-white vr-text-gray-700 vr-shadow-sm vr-ring-1 vr-ring-gray-200"
              )}
            >
              <span className="vr-w-2 vr-h-2 vr-rounded-full" style={{ backgroundColor: isHidden ? "#d1d5db" : m.color }} />
              {m.label}
            </button>
          );
        })}
      </div>

      {/* Chart */}
      <div className="vr-bg-gray-50 vr-rounded-lg vr-p-3">
        <ResponsiveContainer width="100%" height={height}>
          <LineChart data={displayData} margin={{ top: 5, right: 10, left: 0, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
            <XAxis
              dataKey="date"
              tick={{ fontSize: 10, fill: "#9ca3af" }}
              tickLine={false}
              axisLine={{ stroke: "#e5e7eb" }}
            />
            <YAxis
              tick={{ fontSize: 10, fill: "#9ca3af" }}
              tickLine={false}
              axisLine={false}
              tickFormatter={(v) => formatMetricValue(v)}
              width={45}
            />
            <Tooltip content={<CustomTooltipContent />} />
            {metrics.map((m) => (
              !hiddenMetrics.has(m.key) && (
                <Line
                  key={m.key}
                  type="monotone"
                  dataKey={m.key}
                  name={m.label}
                  stroke={m.color}
                  strokeWidth={2}
                  dot={false}
                  activeDot={{ r: 4, strokeWidth: 2, fill: "#fff" }}
                />
              )
            ))}
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}