src/components/Dashboard.tsx

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts';

interface DashboardProps {
  health: number;
  energy: number;
  attention: number;
}

const Dashboard: React.FC<DashboardProps> = ({ health, energy, attention }) => {
  // Generate sample data for the last 15 time periods
  const generateChartData = () => {
    const data = [];
    for (let i = 0; i < 15; i++) {
      data.push({
        time: i + 1,
        health: Math.max(0, health + (Math.random() - 0.5) * 40),
        energy: Math.max(0, energy + (Math.random() - 0.5) * 30),
        attention: Math.max(0, attention + (Math.random() - 0.5) * 35),
        dataQuality: Math.random() * 100,
        processedSamples: Math.floor(Math.random() * 1000) + 500,
      });
    }
    return data;
  };

  const chartData = generateChartData();

  const metrics = [
    { label: 'Dataset Quality', value: '94.2%', color: '#10B981', trend: '+2.1%' },
    { label: 'Processed Samples', value: '12.5K', color: '#F59E0B', trend: '+8.3%' },
    { label: 'Model Accuracy', value: '89.7%', color: '#3B82F6', trend: '+1.4%' },
    { label: 'Clean Records', value: '98.1%', color: '#8B5CF6', trend: '+0.9%' },
  ];

  return (
    <div className="bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg">
      <h3 className="text-xl font-semibold text-gray-800 mb-6 flex items-center gap-2">
        📊 Pet Performance Dashboard
      </h3>
      
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Pet Stats Chart */}
        <div className="bg-gray-50 rounded-xl p-4">
          <h4 className="text-sm font-medium text-gray-700 mb-3">Pet Vital Stats Over Time</h4>
          <ResponsiveContainer width="100%" height={200}>
            <LineChart data={chartData}>
              <CartesianGrid strokeDasharray="3 3" stroke="#E5E7EB" />
              <XAxis 
                dataKey="time" 
                axisLine={false}
                tickLine={false}
                tick={{ fontSize: 12, fill: '#6B7280' }}
              />
              <YAxis 
                axisLine={false}
                tickLine={false}
                tick={{ fontSize: 12, fill: '#6B7280' }}
              />
              <Tooltip 
                contentStyle={{
                  backgroundColor: 'rgba(255, 255, 255, 0.95)',
                  border: 'none',
                  borderRadius: '8px',
                  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
                }}
              />
              <Line 
                type="monotone" 
                dataKey="health" 
                stroke="#10B981" 
                strokeWidth={2}
                dot={{ fill: '#10B981', strokeWidth: 2, r: 3 }}
                name="Health"
              />
              <Line 
                type="monotone" 
                dataKey="energy" 
                stroke="#F59E0B" 
                strokeWidth={2}
                dot={{ fill: '#F59E0B', strokeWidth: 2, r: 3 }}
                name="Energy"
              />
              <Line 
                type="monotone" 
                dataKey="attention" 
                stroke="#3B82F6" 
                strokeWidth={2}
                dot={{ fill: '#3B82F6', strokeWidth: 2, r: 3 }}
                name="Attention"
              />
            </LineChart>
          </ResponsiveContainer>
        </div>

        {/* Data Processing Chart */}
        <div className="bg-gray-50 rounded-xl p-4">
          <h4 className="text-sm font-medium text-gray-700 mb-3">Data Processing Activity</h4>
          <ResponsiveContainer width="100%" height={200}>
            <BarChart data={chartData.slice(-8)}>
              <CartesianGrid strokeDasharray="3 3" stroke="#E5E7EB" />
              <XAxis 
                dataKey="time" 
                axisLine={false}
                tickLine={false}
                tick={{ fontSize: 12, fill: '#6B7280' }}
              />
              <YAxis 
                axisLine={false}
                tickLine={false}
                tick={{ fontSize: 12, fill: '#6B7280' }}
              />
              <Tooltip 
                contentStyle={{
                  backgroundColor: 'rgba(255, 255, 255, 0.95)',
                  border: 'none',
                  borderRadius: '8px',
                  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
                }}
              />
              <Bar 
                dataKey="dataQuality" 
                fill="#8B5CF6" 
                radius={[4, 4, 0, 0]}
                name="Data Quality %"
              />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Metrics Grid */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mt-6">
        {metrics.map((metric, index) => (
          <div key={index} className="bg-gray-50 rounded-xl p-4 text-center">
            <div 
              className="text-2xl font-bold mb-1"
              style={{ color: metric.color }}
            >
              {metric.value}
            </div>
            <div className="text-xs text-gray-600 mb-1">{metric.label}</div>
            <div className="text-xs text-green-600 font-medium">
              {metric.trend}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Dashboard;