import React from 'react';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';
import { ConsumptionPatternPoint } from '../../types';

interface ConsumptionPatternChartProps {
  data: ConsumptionPatternPoint[];
}

const ConsumptionPatternChart: React.FC<ConsumptionPatternChartProps> = ({ data }) => {
  return (
    <div className="bg-white p-6 rounded-xl shadow-sm">
      <h2 className="text-xl font-bold mb-4">Pola Konsumsi Harian</h2>
      <div className="h-64">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={data} margin={{ top: 5, right: 20, left: -10, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
            <XAxis
              dataKey="hour"
              fontSize={12}
              tick={{ fill: '#6b7280' }}
              unit=":00"
              interval={3}
            />
            <YAxis fontSize={12} tick={{ fill: '#6b7280' }} unit="%" width={40} />
            <Tooltip
              contentStyle={{
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                border: '1px solid #ccc',
                borderRadius: '8px',
              }}
              formatter={(value: number) => [`${value.toFixed(1)}%`, '']}
            />
            <Legend wrapperStyle={{ fontSize: '14px' }} verticalAlign="top" align="right" />
            <Line
              type="monotone"
              dataKey="actual"
              stroke="#ef4444"
              strokeWidth={2.5}
              name="Aktual"
              dot={{ r: 3 }}
              activeDot={{ r: 5 }}
              connectNulls
            />
            <Line
              type="monotone"
              dataKey="predicted"
              stroke="#8884d8"
              strokeWidth={2}
              name="Prediksi AI"
              strokeDasharray="5 5"
              dot={false}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
};

export default ConsumptionPatternChart;