import { cn } from "@/lib/utils";
import type { PnlDistribution } from "@/types/models";
import { TrendingUp } from "lucide-react";

interface PnlDistributionChartProps {
  data: PnlDistribution[];
}

export function PnlDistributionChart({ data }: PnlDistributionChartProps) {
  const maxCount = Math.max(...data.map((d) => d.count), 1);

  return (
    <div className="bg-[#1e1e1e] border border-[#2c2c2c] rounded-xl overflow-hidden h-full">
      <div className="px-4 py-3 border-b border-[#2c2c2c]">
        <h3 className="text-sm font-semibold text-[#e1e1e1] flex items-center gap-2">
          <TrendingUp className="w-4 h-4 text-[#00ffcc]" />
          盈亏分布直方图
        </h3>
      </div>
      <div className="p-4">
        <div className="space-y-4">
          {data.length === 0 ? (
            <div className="py-20 text-center text-[#666666] font-bold uppercase tracking-widest italic border border-dashed border-[#2c2c2c] rounded-xl">
              数据不足
            </div>
          ) : (
            data.map((item, index) => {
              const percentage = (item.count / maxCount) * 100;
              // Check if range starts with + or is a positive number
              const isPositive =
                item.range.includes("+") ||
                (!item.range.includes("-") && parseFloat(item.range) >= 0);

              return (
                <div key={index} className="flex items-center gap-4 group">
                  <span className="text-[#666666] text-[10px] font-black w-14 text-right uppercase group-hover:text-[#a0a0a0] transition-colors">
                    {item.range}
                  </span>
                  <div className="flex-1 h-2 bg-[#121212] rounded-full overflow-hidden border border-[#2c2c2c]">
                    <div
                      className={cn(
                        "h-full rounded-full transition-all duration-700 ease-out shadow-[0_0_10px_currentColor]",
                        isPositive
                          ? "bg-[#00ffcc] text-[#00ffcc]/30"
                          : "bg-[#ff5252] text-[#ff5252]/30",
                      )}
                      style={{ width: `${percentage}%` }}
                    />
                  </div>
                  <span className="text-[#e1e1e1] text-[10px] font-black w-8 text-right group-hover:text-[#00ffcc] transition-colors">
                    {item.count}
                  </span>
                </div>
              );
            })
          )}
        </div>
        <div className="mt-6 pt-4 border-t border-[#2c2c2c] flex justify-between items-center text-[10px] font-black text-[#666666] uppercase tracking-widest">
          <span>方差分布</span>
          <span className="text-[#e1e1e1]">计数密度</span>
        </div>
      </div>
    </div>
  );
}
