import React from 'react';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
} from 'chart.js';
import { Line } from 'react-chartjs-2';

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
);

export default function LevelChart({ data, isLight, isCO2, range }) {
    if (!data || data.length === 0) return null;

    const formatDateLabel = (timestamp) => {
        const date = new Date(timestamp);
        if (range === 'day') {
            return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        } else {
            return date.toLocaleDateString([], { month: 'numeric', day: 'numeric' }) + ' ' +
                date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        }
    };

    // Determine label and color based on sensor type
    const levelLabel = isCO2 ? 'CO2 (ppm)' : (isLight ? 'Brightness' : 'Fan Speed');
    const levelColor = isCO2 ? '#4caf50' : (isLight ? '#ffcd56' : '#9966ff');

    const chartData = {
        labels: data.map(d => formatDateLabel(d.timestamp)),
        datasets: [
            {
                label: levelLabel,
                data: data.map(d => d.fan_speed),
                borderColor: levelColor,
                backgroundColor: levelColor,
                stepped: !isCO2, // CO2 uses smooth lines
                tension: isCO2 ? 0.4 : 0, // Smooth for CO2, stepped for others
                borderWidth: 2,
                pointRadius: 0
            },
        ],
    };

    // CO2 needs different Y-axis scale (ppm range)
    const yScale = isCO2
        ? { suggestedMin: 400, suggestedMax: 2000 }
        : { suggestedMin: 0, suggestedMax: 10, ticks: { stepSize: 1 } };

    const options = {
        responsive: true,
        maintainAspectRatio: false,
        interaction: {
            mode: 'index',
            intersect: false,
        },
        scales: {
            x: {
                ticks: {
                    maxRotation: 0,
                    autoSkip: true,
                    maxTicksLimit: 8
                }
            },
            y: yScale
        },
    };

    return <Line data={chartData} options={options} />;
}