import { useState, useEffect, Suspense } from 'react';
import Spline from '@splinetool/react-spline';
import { 
  BarChart, 
  PieChart, 
  Layout, 
  Plus, 
  Search, 
  Filter,
  Calendar,
  Clock,
  Tag,
  CheckCircle2,
  XCircle,
  AlertCircle
} from 'lucide-react';

// Add proper Spline component
const SplineScene = () => {
  return (
    <Spline 
      scene="https://prod.spline.design/6PYVqzu3-KZV8cS8/scene.splinecode"
      className="w-full h-[300px]"
    />
  );
};

const LoadingSpinner = () => (
  <div className="flex items-center justify-center h-[300px]">
    <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
  </div>
);

export default function TaskManagementSystem() {
  const [tasks, setTasks] = useState(() => {
    const savedTasks = localStorage.getItem('tasks');
    return savedTasks ? JSON.parse(savedTasks) : [
      { id: 1, title: 'Implement Authentication', status: 'In Progress', priority: 'High', category: 'Backend', dueDate: '2024-02-20', created: '2024-01-15' },
      { id: 2, title: 'Design Dashboard Layout', status: 'Completed', priority: 'Medium', category: 'Frontend', dueDate: '2024-02-15', created: '2024-01-16' },
      { id: 3, title: 'API Integration', status: 'Pending', priority: 'High', category: 'Backend', dueDate: '2024-02-25', created: '2024-01-17' },
    ];
  });
  const [filter, setFilter] = useState({ status: 'all', priority: 'all', category: 'all' });
  const [searchQuery, setSearchQuery] = useState('');
  const [newTask, setNewTask] = useState({ 
    title: '', 
    status: 'Pending', 
    priority: 'Medium', 
    category: 'Frontend',
    dueDate: '' 
  });
  const [activeTab, setActiveTab] = useState('tasks');

  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  const addTask = (e) => {
    e.preventDefault();
    if (!newTask.title.trim() || !newTask.dueDate) return;
    
    setTasks(prev => [...prev, {
      id: Date.now(),
      ...newTask,
      created: new Date().toISOString().split('T')[0]
    }]);
    setNewTask({ 
      title: '', 
      status: 'Pending', 
      priority: 'Medium', 
      category: 'Frontend',
      dueDate: '' 
    });
  };

  const filteredTasks = tasks.filter(task => {
    const matchesSearch = task.title.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesStatus = filter.status === 'all' || task.status === filter.status;
    const matchesPriority = filter.priority === 'all' || task.priority === filter.priority;
    const matchesCategory = filter.category === 'all' || task.category === filter.category;
    return matchesSearch && matchesStatus && matchesPriority && matchesCategory;
  });

  const getAnalytics = () => {
    const statusCount = tasks.reduce((acc, task) => {
      acc[task.status] = (acc[task.status] || 0) + 1;
      return acc;
    }, {});

    const priorityCount = tasks.reduce((acc, task) => {
      acc[task.priority] = (acc[task.priority] || 0) + 1;
      return acc;
    }, {});

    return { statusCount, priorityCount };
  };

  const updateTaskStatus = (taskId, newStatus) => {
    setTasks(prev => prev.map(task => 
      task.id === taskId ? { ...task, status: newStatus } : task
    ));
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100">
      {/* Hero Section with fixed 3D Animation */}
      <div className="relative overflow-hidden bg-white">
        <div className="absolute inset-0 z-0 opacity-30">
          <Suspense fallback={<LoadingSpinner />}>
            <SplineScene />
          </Suspense>
        </div>
        
        <div className="relative z-10 max-w-7xl mx-auto px-4 py-16 text-center">
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
            Task Management System
          </h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Organize, track, and visualize your projects with our powerful task management solution
          </p>
        </div>
      </div>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 py-6">
        {/* Glass-morphism styled tabs */}
        <div className="flex space-x-4 mb-6 backdrop-blur-lg bg-white/30 p-2 rounded-xl inline-block">
          <button
            onClick={() => setActiveTab('tasks')}
            className={`px-6 py-3 rounded-lg transition-all duration-300 ${
              activeTab === 'tasks' 
                ? 'bg-blue-500 text-white shadow-lg transform scale-105' 
                : 'bg-white/50 text-gray-600 hover:bg-white/80'
            }`}
          >
            Tasks
          </button>
          <button
            onClick={() => setActiveTab('analytics')}
            className={`px-6 py-3 rounded-lg transition-all duration-300 ${
              activeTab === 'analytics' 
                ? 'bg-blue-500 text-white shadow-lg transform scale-105' 
                : 'bg-white/50 text-gray-600 hover:bg-white/80'
            }`}
          >
            Analytics
          </button>
        </div>

        {activeTab === 'tasks' ? (
          <div className="space-y-6">
            {/* Task Creation Form - Enhanced with glass morphism */}
            <div className="backdrop-blur-lg bg-white/80 rounded-xl shadow-lg p-6 border border-white/20">
              <form onSubmit={addTask} className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  <input
                    type="text"
                    placeholder="Task title"
                    value={newTask.title}
                    onChange={(e) => setNewTask(prev => ({ ...prev, title: e.target.value }))}
                    className="border border-gray-200 rounded-lg px-4 py-2 bg-white/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                  />
                  <select
                    value={newTask.priority}
                    onChange={(e) => setNewTask(prev => ({ ...prev, priority: e.target.value }))}
                    className="border rounded-lg px-4 py-2"
                  >
                    <option value="Low">Low Priority</option>
                    <option value="Medium">Medium Priority</option>
                    <option value="High">High Priority</option>
                  </select>
                  <select
                    value={newTask.category}
                    onChange={(e) => setNewTask(prev => ({ ...prev, category: e.target.value }))}
                    className="border rounded-lg px-4 py-2"
                  >
                    <option value="Frontend">Frontend</option>
                    <option value="Backend">Backend</option>
                    <option value="DevOps">DevOps</option>
                    <option value="Design">Design</option>
                  </select>
                  <input
                    type="date"
                    value={newTask.dueDate}
                    onChange={(e) => setNewTask(prev => ({ ...prev, dueDate: e.target.value }))}
                    className="border rounded-lg px-4 py-2"
                  />
                </div>
                <button
                  type="submit"
                  className="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition-all duration-300 transform hover:scale-105 flex items-center justify-center space-x-2 shadow-lg"
                >
                  <Plus className="w-5 h-5" />
                  <span>Add Task</span>
                </button>
              </form>
            </div>

            {/* Filters and Search */}
            <div className="bg-white rounded-lg shadow p-6 mb-6">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                  <input
                    type="text"
                    placeholder="Search tasks..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="pl-10 pr-4 py-2 border rounded-lg w-full"
                  />
                </div>
                <select
                  value={filter.status}
                  onChange={(e) => setFilter(prev => ({ ...prev, status: e.target.value }))}
                  className="border rounded-lg px-4 py-2"
                >
                  <option value="all">All Status</option>
                  <option value="Pending">Pending</option>
                  <option value="In Progress">In Progress</option>
                  <option value="Completed">Completed</option>
                </select>
                <select
                  value={filter.priority}
                  onChange={(e) => setFilter(prev => ({ ...prev, priority: e.target.value }))}
                  className="border rounded-lg px-4 py-2"
                >
                  <option value="all">All Priorities</option>
                  <option value="Low">Low</option>
                  <option value="Medium">Medium</option>
                  <option value="High">High</option>
                </select>
                <select
                  value={filter.category}
                  onChange={(e) => setFilter(prev => ({ ...prev, category: e.target.value }))}
                  className="border rounded-lg px-4 py-2"
                >
                  <option value="all">All Categories</option>
                  <option value="Frontend">Frontend</option>
                  <option value="Backend">Backend</option>
                  <option value="DevOps">DevOps</option>
                  <option value="Design">Design</option>
                </select>
              </div>
            </div>

            {/* Task Cards - Enhanced with modern design */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredTasks.map(task => (
                <div 
                  key={task.id} 
                  className="backdrop-blur-lg bg-white/80 rounded-xl p-6 shadow-lg border border-white/20 transform transition-all duration-300 hover:scale-105"
                >
                  <div className="space-y-4">
                    <h3 className="text-xl font-semibold text-gray-900">{task.title}</h3>
                    <div className="flex flex-wrap gap-2">
                      <span className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
                        ${task.priority === 'High' ? 'bg-red-100 text-red-800' : 
                          task.priority === 'Medium' ? 'bg-yellow-100 text-yellow-800' : 
                          'bg-green-100 text-green-800'}`}>
                        <AlertCircle className="w-4 h-4 mr-1" />
                        {task.priority}
                      </span>
                      <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                        <Tag className="w-4 h-4 mr-1" />
                        {task.category}
                      </span>
                      <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
                        <Calendar className="w-4 h-4 mr-1" />
                        Due: {task.dueDate}
                      </span>
                      <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
                        <Clock className="w-4 h-4 mr-1" />
                        Created: {task.created}
                      </span>
                    </div>
                    <div className="flex space-x-2 mt-4">
                      <button
                        onClick={() => updateTaskStatus(task.id, 'In Progress')}
                        className={`flex-1 px-4 py-2 rounded-lg text-sm transition-all duration-300 ${
                          task.status === 'In Progress' 
                            ? 'bg-yellow-500 text-white shadow-lg' 
                            : 'bg-gray-100 hover:bg-gray-200'
                        }`}
                      >
                        In Progress
                      </button>
                      <button
                        onClick={() => updateTaskStatus(task.id, 'Completed')}
                        className={`flex-1 px-4 py-2 rounded-lg text-sm transition-all duration-300 ${
                          task.status === 'Completed' 
                            ? 'bg-green-500 text-white shadow-lg' 
                            : 'bg-gray-100 hover:bg-gray-200'
                        }`}
                      >
                        Complete
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ) : (
          // Analytics View - Enhanced with 3D elements
          <div className="backdrop-blur-lg bg-white/80 rounded-xl p-6 shadow-lg border border-white/20">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="text-lg font-medium mb-4">Task Status Distribution</h3>
                <div className="space-y-4">
                  {Object.entries(getAnalytics().statusCount).map(([status, count]) => (
                    <div key={status} className="flex items-center justify-between">
                      <span className="text-gray-600">{status}</span>
                      <div className="flex items-center">
                        <div className="w-48 h-4 bg-gray-200 rounded-full overflow-hidden">
                          <div 
                            className={`h-full rounded-full ${
                              status === 'Completed' ? 'bg-green-500' :
                              status === 'In Progress' ? 'bg-yellow-500' :
                              'bg-red-500'
                            }`}
                            style={{ width: `${(count / tasks.length) * 100}%` }}
                          />
                        </div>
                        <span className="ml-4 text-sm font-medium">{count}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
              <div>
                <h3 className="text-lg font-medium mb-4">Priority Distribution</h3>
                <div className="space-y-4">
                  {Object.entries(getAnalytics().priorityCount).map(([priority, count]) => (
                    <div key={priority} className="flex items-center justify-between">
                      <span className="text-gray-600">{priority}</span>
                      <div className="flex items-center">
                        <div className="w-48 h-4 bg-gray-200 rounded-full overflow-hidden">
                          <div 
                            className={`h-full rounded-full ${
                              priority === 'High' ? 'bg-red-500' :
                              priority === 'Medium' ? 'bg-yellow-500' :
                              'bg-green-500'
                            }`}
                            style={{ width: `${(count / tasks.length) * 100}%` }}
                          />
                        </div>
                        <span className="ml-4 text-sm font-medium">{count}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}