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

interface PopulationDataPoint {
  date: string;
  population: number;
  chickenCount?: number;
}

interface SimplePopulationChartProps {
  data: PopulationDataPoint[];
  title?: string;
}

const SimplePopulationChart: React.FC<SimplePopulationChartProps> = ({
  data,
  title = 'Tren Populasi',
}) => {
  if (!data || data.length === 0) {
    return (
      <div className="bg-white p-6 rounded-xl shadow-sm">
        <h3 className="text-lg font-bold text-gray-800 mb-4">{title}</h3>
        <div className="h-64 flex items-center justify-center text-gray-400">
          <div className="text-center">
            <i className="fa-solid fa-chart-line text-4xl mb-2"></i>
            <p>Tidak ada data tersedia</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white p-6 rounded-xl shadow-sm">
      <h3 className="text-lg font-bold text-gray-800 mb-4">{title}</h3>
      <div className="h-64">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={data} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
            <XAxis
              dataKey="date"
              fontSize={11}
              tick={{ fill: '#6b7280' }}
              interval="preserveStartEnd"
            />
            <YAxis
              fontSize={11}
              tick={{ fill: '#6b7280' }}
              scale="log"
              domain={[
                (dataMin: number) => {
                  // For log scale, use multipliers
                  return Math.max(1, Math.floor(dataMin * 0.7));
                },
                (dataMax: number) => {
                  return Math.ceil(dataMax * 1.3);
                },
              ]}
              tickFormatter={createYAxisFormatter()}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: 'rgba(255, 255, 255, 0.95)',
                border: '1px solid #e0e0e0',
                borderRadius: '8px',
                padding: '8px 12px',
              }}
              formatter={(value: any, name: string) => {
                if (value === null || value === undefined) return ['Tidak ada data', name];
                return [formatNumber(value as number), name];
              }}
              labelStyle={{ fontWeight: 600, marginBottom: '4px' }}
            />
            <Legend />
            <Line
              type="monotone"
              dataKey="population"
              stroke="#ef4444"
              strokeWidth={2.5}
              name="Populasi (Stock Akhir)"
              dot={{ r: 3, fill: '#ef4444' }}
              activeDot={{ r: 5, strokeWidth: 2, stroke: '#fff' }}
            />
            <Line
              type="monotone"
              dataKey="chickenCount"
              stroke="#3b82f6"
              strokeWidth={2.5}
              name="Chicken Counting (IOT)"
              dot={{ r: 3, fill: '#3b82f6' }}
              activeDot={{ r: 5, strokeWidth: 2, stroke: '#fff' }}
              connectNulls={false}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
};

export default SimplePopulationChart;