import React from "react";
import { motion } from "framer-motion";

interface BarChartProps {
  data: {
    x: string;
    y: number;
    label?: string;
  }[];
  className?: string;
  xAxisLabel?: string;
  yAxisLabel?: string;
  barColor?: string;
  hoverColor?: string;
  showGuidelines?: boolean;
}

const BarChart: React.FC<BarChartProps> = ({
  data,
  className = "",
  xAxisLabel = "",
  yAxisLabel = "",
  barColor = "#3b82f6",
  hoverColor = "#93c5fd",
  showGuidelines = true,
}) => {
  // Find the maximum value for scaling
  const maxValue = Math.max(...data.map((item) => item.y), 0);

  return (
    <div
      className={`flex flex-col ${className} overflow-x-auto lg:overflow-x-hidden`}
    >
      <div className="flex flex-1">
        {/* Y-axis label */}
        {yAxisLabel && (
          <div className={`flex w-10 items-center justify-end`}>
            <div
              className={`text-sm font-medium text-gray-600 dark:text-gray-400 rotate-90 whitespace-nowrap`}
            >
              {yAxisLabel}
            </div>
          </div>
        )}

        {/* Chart area */}
        <div className="flex-1 flex flex-col">
          {/* Y-axis ticks and bars */}
          <div className="flex-1 flex relative">
            {/* Y-axis ticks */}
            <div className="relative h-full" style={{ width: "30px" }}>
              {[100, 75, 50, 25, 0].map((tick) => (
                <div
                  key={tick}
                  className="absolute w-full flex items-end"
                  style={{ bottom: `${tick}%` }}
                >
                  <span
                    className={`text-xs text-gray-500 dark:text-gray-400
                    `}
                  >
                    {Math.round((tick / 100) * maxValue)}
                  </span>
                  <div className="flex-1 border-t border-gray-300"></div>
                </div>
              ))}
            </div>

            {/* Guidelines */}
            {showGuidelines && (
              <div className="absolute inset-0 pointer-events-none">
                {[100, 75, 50, 25, 0].map((tick) => (
                  <div
                    key={`guide-${tick}`}
                    className="absolute w-full border-t border-gray-200 dark:border-gray-700 border-solid"
                    style={{ bottom: `${tick}%` }}
                  />
                ))}
              </div>
            )}

            {/* Bars */}
            <div className="flex-1 flex items-end gap-2 justify-between h-full ">
              {data.map((item, index) => (
                <div
                  key={index}
                  className="flex flex-col items-center h-full"
                  style={{ flex: 1 }}
                >
                  <div className="flex-1 w-full flex flex-col justify-end">
                    <motion.div
                      initial={{ height: 0 }}
                      animate={{ height: `${(item.y / maxValue) * 100}%` }}
                      transition={{ duration: 0.8, type: "spring" }}
                      className={`w-full rounded-t-md relative group bg-linear-to-t from-gray-100 to-[${barColor}]`}
                      style={{ backgroundColor: barColor }}
                      whileHover={{ backgroundColor: hoverColor }}
                    >
                      <div className="absolute z-50 text-wrap left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-gray-800 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
                        {item.label}: {` ${item.y}`}
                      </div>
                    </motion.div>
                  </div>
                  <div className="text-xs text-gray-600 dark:text-gray-400 mt-1 whitespace-nowrap">
                    {item.x}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* X-axis label */}
          {xAxisLabel && (
            <div className="text-sm font-medium text-gray-600 dark:text-gray-300 mt-2 text-center whitespace-nowrap">
              {xAxisLabel}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default BarChart;
