import React from 'react';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';
import { useAppContext } from '../../context/AppContext.tsx';
import { formatNumber, createYAxisFormatter } from '../../utils/formatters.ts';

interface ChickenCountDataPoint {
  date: string;
  count: number | null;
}

interface ChickenCountTrendChartProps {
  data: ChickenCountDataPoint[];
}

const ChickenCountTrendChart: React.FC<ChickenCountTrendChartProps> = ({ data }) => {
  const { apiMode: _apiMode } = useAppContext();

  // In LIVE mode, show empty state if no data
  if (data.length === 0) {
    return (
      <div className="bg-white p-6 rounded-xl shadow-sm">
        <h2 className="text-xl font-bold mb-4">Tren Chicken Counting</h2>
        <div className="h-60 flex items-center justify-center">
          <div className="text-center text-gray-500">
            <i className="fa-solid fa-chart-line text-5xl text-gray-300 mb-3"></i>
            <p className="font-medium text-gray-600">Tidak ada data</p>
            <p className="text-sm text-gray-500 mt-1">
              Belum ada data chicken counting yang diinput
            </p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white p-6 rounded-xl shadow-sm">
      <h2 className="text-xl font-bold mb-4">Tren Chicken Counting</h2>
      <div className="h-60">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={data} margin={{ top: 5, right: 20, left: -15, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
            <XAxis dataKey="date" fontSize={12} tick={{ fill: '#6b7280' }} />
            <YAxis
              fontSize={12}
              tick={{ fill: '#6b7280' }}
              domain={['dataMin - 50', 'dataMax + 50']}
              tickFormatter={createYAxisFormatter()}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                border: '1px solid #ccc',
                borderRadius: '8px',
              }}
              formatter={(value: number | null) => {
                if (value === null || value === undefined)
                  return ['Tidak ada data', 'Chicken Count'];
                return [formatNumber(value), 'Chicken Count'];
              }}
            />
            <Line
              type="monotone"
              dataKey="count"
              stroke="#3b82f6"
              strokeWidth={2.5}
              name="Chicken Count"
              dot={{ r: 4 }}
              activeDot={{ r: 6 }}
              connectNulls={false}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
};

export default ChickenCountTrendChart;