'use client'

import { ChartData } from '@/types/chart'
import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts'

type ChartBarProps = {
  loading: boolean
  data: ChartData[]
}

export function ChartBar({
  loading,
  data
}: ChartBarProps) {

  const rows = 8

  // -----------------------
  // 🔹 LOADING STATE
  // -----------------------
  if (loading) {
    return (
      <div
        className="w-full"
        style={{ height: rows * 40 }}
      >
        <div className="flex flex-col gap-4 animate-pulse">
          {Array.from({ length: rows }).map((_, index) => (
            <div key={index} className="flex items-center gap-4">
              <div className="h-4 bg-gray-200 rounded w-48" />
              <div
                className="h-5 bg-gray-200 rounded"
                style={{
                  width: `${40 + Math.random() * 50}%`,
                }}
              />
            </div>
          ))}
        </div>
      </div>
    )
  }

  // -----------------------
  // 🔹 EMPTY STATE
  // -----------------------
  if (!data || data.length === 0) {
    return (
      <div className="w-full h-60 flex flex-col items-center justify-center text-gray-400">
        <div className="w-16 h-40 border-4 border-dashed border-gray-200 rounded mb-4" />
        <p className="text-sm">No data available</p>
      </div>
    )
  }

  // -----------------------
  // 🔹 CHART
  // -----------------------
  return (
    <ResponsiveContainer
      width="100%"
      height={Math.max(250, data.length * 40)}
      // height={300}
    >
      <BarChart
        data={data}
        layout="vertical"
        margin={{ top: 5, right: 30, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
        <XAxis type="number" />
        <YAxis
          dataKey="name"
          type="category"
          width={220}
          tickFormatter={(value: string) =>
            value.length > 25 ? value.slice(0, 25) + '...' : value
          }
        />
        <Tooltip />

        <Bar dataKey="value" radius={[0, 8, 8, 0]}>
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={entry.color} />
          ))}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  )
}