src/pages/Index.tsx

import React, { useState } from 'react';
import PetAvatar from '../components/PetAvatar';
import CompactPetAvatar from '../components/CompactPetAvatar';
import StatusBar from '../components/StatusBar';
import ActionButton from '../components/ActionButton';
import ActivityLog from '../components/ActivityLog';
import Dashboard from '../components/Dashboard';
import ModeToggle from '../components/ModeToggle';
import DataVisualization from '../components/DataVisualization';
interface LogEntry {
  id: string;
  message: string;
  type: 'success' | 'warning' | 'error' | 'info';
  timestamp: Date;
}
const Index = () => {
  const [currentMode, setCurrentMode] = useState<'pet' | 'data' | 'hybrid'>('pet');
  const [health, setHealth] = useState(75);
  const [energy, setEnergy] = useState(60);
  const [attention, setAttention] = useState(85);
  const [logs, setLogs] = useState<LogEntry[]>([{
    id: '1',
    message: '3 corrupted episodes found!',
    type: 'warning',
    timestamp: new Date(Date.now() - 300000)
  }, {
    id: '2',
    message: 'Dataset cleaned successfully - 150 entries processed',
    type: 'success',
    timestamp: new Date(Date.now() - 600000)
  }, {
    id: '3',
    message: 'Quality check completed with 98% accuracy',
    type: 'success',
    timestamp: new Date(Date.now() - 900000)
  }]);
  const addLog = (message: string, type: LogEntry['type']) => {
    const newLog: LogEntry = {
      id: Date.now().toString(),
      message,
      type,
      timestamp: new Date()
    };
    setLogs(prev => [newLog, ...prev.slice(0, 9)]); // Keep only last 10 entries
  };
  const feedData = () => {
    const healthGain = Math.floor(Math.random() * 15) + 5;
    const energyGain = Math.floor(Math.random() * 10) + 5;
    setHealth(prev => Math.min(100, prev + healthGain));
    setEnergy(prev => Math.min(100, prev + energyGain));
    const dataTypes = ['training samples', 'validation data', 'feature vectors', 'labeled examples'];
    const randomType = dataTypes[Math.floor(Math.random() * dataTypes.length)];
    addLog(`Fed ${Math.floor(Math.random() * 500) + 100} new ${randomType} to your AI pet`, 'success');
  };
  const cleanDataset = () => {
    const attentionGain = Math.floor(Math.random() * 20) + 10;
    const healthGain = Math.floor(Math.random() * 10) + 5;
    setAttention(prev => Math.min(100, prev + attentionGain));
    setHealth(prev => Math.min(100, prev + healthGain));
    const cleaned = Math.floor(Math.random() * 50) + 10;
    addLog(`Cleaned ${cleaned} corrupted entries and removed duplicates`, 'success');
  };
  const runQualityCheck = () => {
    const energyCost = Math.floor(Math.random() * 15) + 10;
    setEnergy(prev => Math.max(0, prev - energyCost));
    const accuracy = (Math.random() * 15 + 85).toFixed(1);
    const issues = Math.floor(Math.random() * 5);
    if (issues > 0) {
      addLog(`Quality check complete: ${accuracy}% accuracy, ${issues} issues detected`, 'warning');
    } else {
      addLog(`Quality check complete: ${accuracy}% accuracy, no issues found!`, 'success');
      setAttention(prev => Math.min(100, prev + 10));
    }
  };

  // Gradual stat decay over time
  React.useEffect(() => {
    const interval = setInterval(() => {
      setHealth(prev => Math.max(0, prev - 1));
      setEnergy(prev => Math.max(0, prev - 1));
      setAttention(prev => Math.max(0, prev - 1));
    }, 30000); // Decay every 30 seconds

    return () => clearInterval(interval);
  }, []);
  const renderPetMode = () => <>
      {/* Main Grid Layout */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
        {/* Left Panel - Status Bars */}
        <div className="lg:col-span-3 space-y-4">
          <StatusBar label="❤️ Health" value={health} maxValue={100} color="#10B981" icon="❤️" />
          <StatusBar label="⚡ Energy" value={energy} maxValue={100} color="#F59E0B" icon="⚡" />
          <StatusBar label="🧠 Attention" value={attention} maxValue={100} color="#3B82F6" icon="🧠" />
        </div>

        {/* Center - Pet Avatar */}
        <div className="lg:col-span-6 flex items-center justify-center">
          <div className="bg-white/50 backdrop-blur-sm rounded-3xl p-8 shadow-2xl">
            <PetAvatar health={health} energy={energy} attention={attention} />
            <div className="text-center mt-4">
              <h2 className="text-2xl font-bold text-gray-800 mb-2">
                Your AI Companion
              </h2>
              <p className="text-gray-600">
                {health > 70 && energy > 70 && attention > 70 ? "I'm feeling great! Ready to work! 🌟" : health < 30 || energy < 30 || attention < 30 ? "I need some care... 🥺" : "I'm doing okay, let's improve together! 😊"}
              </p>
            </div>
          </div>
        </div>

        {/* Right Panel - Action Buttons */}
        <div className="lg:col-span-3 space-y-4">
          <ActionButton label="Feed Data" onClick={feedData} color="#10B981" icon="🍽️" disabled={health >= 100 && energy >= 100} />
          <ActionButton label="Clean Dataset" onClick={cleanDataset} color="#F472B6" icon="🧹" disabled={attention >= 100} />
          <ActionButton label="Run Quality Check" onClick={runQualityCheck} color="#3B82F6" icon="🔍" disabled={energy < 20} />
        </div>
      </div>

      {/* Dashboard Section */}
      <div className="mt-8">
        <Dashboard health={health} energy={energy} attention={attention} />
      </div>

      {/* Bottom - Activity Log */}
      <div className="mt-8">
        <ActivityLog entries={logs} />
      </div>
    </>;
  const renderDataMode = () => <div className="mt-8">
      <DataVisualization />
    </div>;
  const renderHybridMode = () => <>
      {/* Compact Pet Section */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div className="bg-white/50 backdrop-blur-sm rounded-2xl p-6 shadow-xl">
          <div className="flex items-center justify-center mb-4">
            <CompactPetAvatar health={health} energy={energy} attention={attention} />
          </div>
          <div className="text-center">
            <h3 className="font-semibold text-gray-800">AI Companion</h3>
            <p className="text-sm text-gray-600 mt-1">
              {health > 70 ? "Healthy 💚" : "Needs care 🧡"}
            </p>
          </div>
        </div>
        
        <div className="space-y-2">
          <StatusBar label="❤️ Health" value={health} maxValue={100} color="#10B981" icon="❤️" />
          <StatusBar label="⚡ Energy" value={energy} maxValue={100} color="#F59E0B" icon="⚡" />
          <StatusBar label="🧠 Attention" value={attention} maxValue={100} color="#3B82F6" icon="🧠" />
        </div>
        
        <div className="space-y-2">
          <ActionButton label="Feed Data" onClick={feedData} color="#10B981" icon="🍽️" disabled={health >= 100 && energy >= 100} />
          <ActionButton label="Clean Dataset" onClick={cleanDataset} color="#F472B6" icon="🧹" disabled={attention >= 100} />
        </div>
      </div>
      
      {/* Data Visualization */}
      <DataVisualization />
    </>;
  return <div className="min-h-screen bg-gradient-to-br from-blue-100 via-blue-50 to-cyan-100 p-4">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="text-center mb-6">
          <h1 className="text-4xl font-bold text-gray-800 mb-2">🐾 PetSet</h1>
          <p className="text-gray-600">
            Take care of your AI companion while managing your datasets!
          </p>
        </div>

        {/* Mode Toggle */}
        <ModeToggle currentMode={currentMode} onModeChange={setCurrentMode} />

        {/* Render content based on current mode */}
        {currentMode === 'pet' && renderPetMode()}
        {currentMode === 'data' && renderDataMode()}
        {currentMode === 'hybrid' && renderHybridMode()}
      </div>
    </div>;
};
export default Index;