import React, { useState } from 'react';
import { ChevronLeft, ChevronRight, X, Plus, Trash2, BookOpen, Home } from 'lucide-react';

const Calendar2026 = () => {
  const [currentMonth, setCurrentMonth] = useState(0);
  const [selectedDay, setSelectedDay] = useState(null);
  const [tasks, setTasks] = useState({});
  const [showStudyForm, setShowStudyForm] = useState(false);
  const [newPersonalTask, setNewPersonalTask] = useState('');
  const [newStudyTask, setNewStudyTask] = useState({
    subject: '',
    topic: '',
    type: 'teoria',
    understanding: 0
  });
  
  const months = [
    'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
    'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
  ];
  
  const daysOfWeek = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
  
  const getDaysInMonth = (month, year) => {
    return new Date(year, month + 1, 0).getDate();
  };
  
  const getFirstDayOfMonth = (month, year) => {
    return new Date(year, month, 1).getDay();
  };
  
  const generateCalendarDays = (month) => {
    const year = 2026;
    const daysInMonth = getDaysInMonth(month, year);
    const firstDay = getFirstDayOfMonth(month, year);
    const days = [];
    
    for (let i = 0; i < firstDay; i++) {
      days.push(null);
    }
    
    for (let i = 1; i <= daysInMonth; i++) {
      days.push(i);
    }
    
    return days;
  };
  
  const isToday = (day, month) => {
    const today = new Date();
    return day === today.getDate() && 
           month === today.getMonth() && 
           today.getFullYear() === 2026;
  };
  
  const nextMonth = () => {
    setCurrentMonth((prev) => (prev + 1) % 12);
  };
  
  const prevMonth = () => {
    setCurrentMonth((prev) => (prev - 1 + 12) % 12);
  };
  
  const openDayModal = (day) => {
    if (day) {
      setSelectedDay({ day, month: currentMonth });
      setShowStudyForm(false);
    }
  };
  
  const closeDayModal = () => {
    setSelectedDay(null);
    setShowStudyForm(false);
    setNewPersonalTask('');
    setNewStudyTask({ subject: '', topic: '', type: 'teoria', understanding: 0 });
  };
  
  const getTaskKey = (month, day) => `${month}-${day}`;
  
  const addStudyTask = () => {
    if (newStudyTask.subject.trim() && newStudyTask.topic.trim() && selectedDay) {
      const key = getTaskKey(selectedDay.month, selectedDay.day);
      const updatedTasks = { ...tasks };
      if (!updatedTasks[key]) {
        updatedTasks[key] = [];
      }
      updatedTasks[key].push({
        id: Date.now(),
        category: 'study',
        subject: newStudyTask.subject,
        topic: newStudyTask.topic,
        type: newStudyTask.type,
        understanding: newStudyTask.understanding,
        completed: false
      });
      setTasks(updatedTasks);
      setNewStudyTask({ subject: '', topic: '', type: 'teoria', understanding: 0 });
      setShowStudyForm(false);
    }
  };
  
  const addPersonalTask = () => {
    if (newPersonalTask.trim() && selectedDay) {
      const key = getTaskKey(selectedDay.month, selectedDay.day);
      const updatedTasks = { ...tasks };
      if (!updatedTasks[key]) {
        updatedTasks[key] = [];
      }
      updatedTasks[key].push({
        id: Date.now(),
        category: 'personal',
        text: newPersonalTask,
        completed: false
      });
      setTasks(updatedTasks);
      setNewPersonalTask('');
    }
  };
  
  const deleteTask = (taskId) => {
    if (selectedDay) {
      const key = getTaskKey(selectedDay.month, selectedDay.day);
      const updatedTasks = { ...tasks };
      updatedTasks[key] = updatedTasks[key].filter(task => task.id !== taskId);
      setTasks(updatedTasks);
    }
  };
  
  const toggleTask = (taskId) => {
    if (selectedDay) {
      const key = getTaskKey(selectedDay.month, selectedDay.day);
      const updatedTasks = { ...tasks };
      updatedTasks[key] = updatedTasks[key].map(task => 
        task.id === taskId ? { ...task, completed: !task.completed } : task
      );
      setTasks(updatedTasks);
    }
  };
  
  const updateUnderstanding = (taskId, value) => {
    if (selectedDay) {
      const key = getTaskKey(selectedDay.month, selectedDay.day);
      const updatedTasks = { ...tasks };
      updatedTasks[key] = updatedTasks[key].map(task => 
        task.id === taskId ? { ...task, understanding: value } : task
      );
      setTasks(updatedTasks);
    }
  };
  
  const getDayTasks = (month, day) => {
    const key = getTaskKey(month, day);
    return tasks[key] || [];
  };
  
  const hasTasks = (month, day) => {
    return getDayTasks(month, day).length > 0;
  };
  
  const getUnderstandingColor = (value) => {
    if (value >= 80) return 'from-green-500 to-emerald-500';
    if (value >= 60) return 'from-blue-500 to-cyan-500';
    if (value >= 40) return 'from-yellow-500 to-orange-500';
    return 'from-red-500 to-pink-500';
  };
  
  const getUnderstandingText = (value) => {
    if (value >= 80) return 'Excelente';
    if (value >= 60) return 'Bom';
    if (value >= 40) return 'Regular';
    return 'Precisa melhorar';
  };
  
  const calendarDays = generateCalendarDays(currentMonth);
  
  const gradients = [
    'from-purple-600 to-pink-600',
    'from-blue-600 to-cyan-600',
    'from-green-600 to-emerald-600',
    'from-orange-600 to-red-600',
    'from-indigo-600 to-purple-600',
    'from-teal-600 to-blue-600',
    'from-rose-600 to-pink-600',
    'from-amber-600 to-orange-600',
    'from-violet-600 to-fuchsia-600',
    'from-sky-600 to-indigo-600',
    'from-lime-600 to-green-600',
    'from-red-600 to-rose-600'
  ];

  const currentDayTasks = selectedDay ? getDayTasks(selectedDay.month, selectedDay.day) : [];
  const studyTasks = currentDayTasks.filter(t => t.category === 'study');
  const personalTasks = currentDayTasks.filter(t => t.category === 'personal');

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 flex items-center justify-center p-4">
      <div className="w-full max-w-5xl">
        {/* Header */}
        <div className="text-center mb-8">
          <div className="flex items-center justify-center gap-3 mb-4">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center">
              <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
            </div>
            <h1 className="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600">
              2026
            </h1>
          </div>
          <p className="text-slate-400 text-lg font-light tracking-wider">
            Organize seus estudos e vida pessoal
          </p>
        </div>

        {/* Calendar Card */}
        <div className="bg-slate-900/50 backdrop-blur-xl rounded-3xl shadow-2xl border border-slate-800/50 overflow-hidden">
          {/* Month Navigation */}
          <div className={`bg-gradient-to-r ${gradients[currentMonth]} p-8`}>
            <div className="flex items-center justify-between">
              <button
                onClick={prevMonth}
                className="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm hover:bg-white/30 transition-all duration-300 flex items-center justify-center group"
              >
                <ChevronLeft className="w-6 h-6 text-white group-hover:scale-110 transition-transform" />
              </button>
              
              <div className="text-center">
                <h2 className="text-5xl font-black text-white mb-2 drop-shadow-lg">
                  {months[currentMonth]}
                </h2>
                <div className="flex gap-1 justify-center">
                  {months.map((_, idx) => (
                    <div
                      key={idx}
                      className={`h-1.5 rounded-full transition-all duration-300 ${
                        idx === currentMonth 
                          ? 'w-8 bg-white' 
                          : 'w-1.5 bg-white/30'
                      }`}
                    />
                  ))}
                </div>
              </div>
              
              <button
                onClick={nextMonth}
                className="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm hover:bg-white/30 transition-all duration-300 flex items-center justify-center group"
              >
                <ChevronRight className="w-6 h-6 text-white group-hover:scale-110 transition-transform" />
              </button>
            </div>
          </div>

          {/* Calendar Grid */}
          <div className="p-8">
            {/* Days of Week */}
            <div className="grid grid-cols-7 gap-4 mb-6">
              {daysOfWeek.map((day, idx) => (
                <div
                  key={day}
                  className={`text-center font-bold text-sm tracking-wider ${
                    idx === 0 || idx === 6 
                      ? 'text-cyan-400' 
                      : 'text-slate-400'
                  }`}
                >
                  {day}
                </div>
              ))}
            </div>

            {/* Days Grid */}
            <div className="grid grid-cols-7 gap-3">
              {calendarDays.map((day, idx) => (
                <div
                  key={idx}
                  onClick={() => openDayModal(day)}
                  className={`aspect-square flex flex-col items-center justify-center rounded-2xl text-lg font-semibold transition-all duration-300 relative ${
                    day === null
                      ? 'bg-transparent cursor-default'
                      : isToday(day, currentMonth)
                      ? `bg-gradient-to-br ${gradients[currentMonth]} text-white shadow-lg shadow-cyan-500/50 scale-105 cursor-pointer hover:scale-110`
                      : idx % 7 === 0 || idx % 7 === 6
                      ? 'bg-slate-800/50 text-cyan-400 hover:bg-slate-700/50 hover:scale-105 cursor-pointer'
                      : 'bg-slate-800/30 text-slate-200 hover:bg-slate-700/50 hover:scale-105 cursor-pointer'
                  }`}
                >
                  {day}
                  {day && hasTasks(currentMonth, day) && (
                    <div className="absolute bottom-1 flex gap-0.5">
                      {getDayTasks(currentMonth, day).slice(0, 3).map((task, i) => (
                        <div 
                          key={i}
                          className={`w-1.5 h-1.5 rounded-full ${
                            task.category === 'study' ? 'bg-blue-400' : 'bg-pink-400'
                          }`}
                        />
                      ))}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>

          {/* Footer Stats */}
          <div className="px-8 pb-8">
            <div className="grid grid-cols-3 gap-4">
              <div className="bg-gradient-to-br from-purple-600/20 to-pink-600/20 rounded-2xl p-4 border border-purple-500/30">
                <div className="text-3xl font-black text-purple-400 mb-1">
                  {getDaysInMonth(currentMonth, 2026)}
                </div>
                <div className="text-xs text-slate-400 font-medium tracking-wide">
                  Dias no mês
                </div>
              </div>
              
              <div className="bg-gradient-to-br from-blue-600/20 to-cyan-600/20 rounded-2xl p-4 border border-blue-500/30">
                <div className="text-3xl font-black text-cyan-400 mb-1">
                  {Math.ceil(getDaysInMonth(currentMonth, 2026) / 7)}
                </div>
                <div className="text-xs text-slate-400 font-medium tracking-wide">
                  Semanas
                </div>
              </div>
              
              <div className="bg-gradient-to-br from-green-600/20 to-emerald-600/20 rounded-2xl p-4 border border-green-500/30">
                <div className="text-3xl font-black text-green-400 mb-1">
                  {currentMonth + 1}/12
                </div>
                <div className="text-xs text-slate-400 font-medium tracking-wide">
                  Progresso
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Quick Month Selector */}
        <div className="mt-8 flex flex-wrap gap-2 justify-center">
          {months.map((month, idx) => (
            <button
              key={month}
              onClick={() => setCurrentMonth(idx)}
              className={`px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-300 ${
                idx === currentMonth
                  ? `bg-gradient-to-r ${gradients[idx]} text-white shadow-lg`
                  : 'bg-slate-800/50 text-slate-400 hover:bg-slate-700/50 hover:text-white'
              }`}
            >
              {month.substring(0, 3)}
            </button>
          ))}
        </div>
      </div>

      {/* Modal de Tarefas */}
      {selectedDay && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-slate-900 rounded-3xl shadow-2xl border border-slate-700 w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
            {/* Modal Header */}
            <div className={`bg-gradient-to-r ${gradients[selectedDay.month]} p-6`}>
              <div className="flex items-center justify-between mb-2">
                <h3 className="text-3xl font-black text-white">
                  {selectedDay.day} de {months[selectedDay.month]}
                </h3>
                <button
                  onClick={closeDayModal}
                  className="w-10 h-10 rounded-xl bg-white/20 hover:bg-white/30 transition-all flex items-center justify-center group"
                >
                  <X className="w-5 h-5 text-white group-hover:rotate-90 transition-transform" />
                </button>
              </div>
              <p className="text-white/80 text-sm">
                {studyTasks.length} estudo(s) • {personalTasks.length} tarefa(s) pessoal(is)
              </p>
            </div>

            {/* Modal Content */}
            <div className="flex-1 overflow-y-auto p-6">
              <div className="grid grid-cols-2 gap-6">
                
                {/* COLUNA ESTUDOS */}
                <div>
                  <div className="flex items-center justify-between mb-4">
                    <h4 className="text-xl font-bold text-blue-400 flex items-center gap-2">
                      <BookOpen className="w-5 h-5" />
                      Estudos
                    </h4>
                    <button
                      onClick={() => setShowStudyForm(!showStudyForm)}
                      className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-semibold transition-all text-sm"
                    >
                      <Plus className="w-4 h-4 inline mr-1" />
                      Adicionar
                    </button>
                  </div>

                  {/* Formulário de Estudo */}
                  {showStudyForm && (
                    <div className="mb-4 bg-slate-800/50 rounded-2xl p-4 border border-slate-700 space-y-3">
                      <input
                        type="text"
                        value={newStudyTask.subject}
                        onChange={(e) => setNewStudyTask({ ...newStudyTask, subject: e.target.value })}
                        placeholder="Matéria (ex: Matemática)"
                        className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
                      />
                      <input
                        type="text"
                        value={newStudyTask.topic}
                        onChange={(e) => setNewStudyTask({ ...newStudyTask, topic: e.target.value })}
                        placeholder="Assunto (ex: Derivadas)"
                        className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
                      />
                      
                      <div className="flex gap-2">
                        <button
                          onClick={() => setNewStudyTask({ ...newStudyTask, type: 'teoria' })}
                          className={`flex-1 px-3 py-2 rounded-lg font-semibold text-sm transition-all ${
                            newStudyTask.type === 'teoria'
                              ? 'bg-blue-600 text-white'
                              : 'bg-slate-700 text-slate-300 hover:bg-slate-600'
                          }`}
                        >
                          Teoria
                        </button>
                        <button
                          onClick={() => setNewStudyTask({ ...newStudyTask, type: 'questao' })}
                          className={`flex-1 px-3 py-2 rounded-lg font-semibold text-sm transition-all ${
                            newStudyTask.type === 'questao'
                              ? 'bg-blue-600 text-white'
                              : 'bg-slate-700 text-slate-300 hover:bg-slate-600'
                          }`}
                        >
                          Questão
                        </button>
                      </div>

                      <div>
                        <div className="flex justify-between items-center mb-2">
                          <label className="text-sm text-slate-400">Nível de Entendimento</label>
                          <span className="text-lg font-bold text-blue-400">{newStudyTask.understanding}%</span>
                        </div>
                        <input
                          type="range"
                          min="0"
                          max="100"
                          step="5"
                          value={newStudyTask.understanding}
                          onChange={(e) => setNewStudyTask({ ...newStudyTask, understanding: parseInt(e.target.value) })}
                          className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer"
                          style={{
                            background: `linear-gradient(to right, rgb(59, 130, 246) 0%, rgb(59, 130, 246) ${newStudyTask.understanding}%, rgb(51, 65, 85) ${newStudyTask.understanding}%, rgb(51, 65, 85) 100%)`
                          }}
                        />
                        <div className="text-xs text-slate-500 mt-1 text-center">
                          {getUnderstandingText(newStudyTask.understanding)}
                        </div>
                      </div>

                      <button
                        onClick={addStudyTask}
                        className="w-full py-3 bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-xl font-bold hover:shadow-lg transition-all"
                      >
                        Salvar Estudo
                      </button>
                    </div>
                  )}

                  {/* Lista de Estudos */}
                  <div className="space-y-3">
                    {studyTasks.length === 0 ? (
                      <div className="text-center py-8 text-slate-500">
                        <p className="text-sm">Nenhum estudo cadastrado</p>
                      </div>
                    ) : (
                      studyTasks.map((task) => (
                        <div
                          key={task.id}
                          className={`p-4 rounded-xl border transition-all ${
                            task.completed
                              ? 'bg-slate-800/30 border-slate-700 opacity-60'
                              : 'bg-blue-600/10 border-blue-600/30'
                          }`}
                        >
                          <div className="flex items-start gap-3">
                            <input
                              type="checkbox"
                              checked={task.completed}
                              onChange={() => toggleTask(task.id)}
                              className="w-5 h-5 rounded cursor-pointer mt-1"
                            />
                            <div className="flex-1">
                              <div className="flex items-center gap-2 mb-2">
                                <span className={`px-2 py-0.5 text-xs font-bold rounded ${
                                  task.type === 'teoria' ? 'bg-blue-600' : 'bg-purple-600'
                                } text-white`}>
                                  {task.type === 'teoria' ? 'TEORIA' : 'QUESTÃO'}
                                </span>
                              </div>
                              <h5 className={`font-bold text-white mb-1 ${task.completed ? 'line-through' : ''}`}>
                                {task.subject}
                              </h5>
                              <p className={`text-sm text-slate-300 mb-3 ${task.completed ? 'line-through' : ''}`}>
                                {task.topic}
                              </p>
                              
                              {!task.completed && (
                                <div>
                                  <div className="flex justify-between items-center mb-1">
                                    <span className="text-xs text-slate-400">Entendimento</span>
                                    <span className="text-sm font-bold text-blue-400">{task.understanding}%</span>
                                  </div>
                                  <input
                                    type="range"
                                    min="0"
                                    max="100"
                                    step="5"
                                    value={task.understanding}
                                    onChange={(e) => updateUnderstanding(task.id, parseInt(e.target.value))}
                                    className="w-full h-1.5 rounded-lg appearance-none cursor-pointer"
                                    style={{
                                      background: `linear-gradient(to right, rgb(59, 130, 246) 0%, rgb(59, 130, 246) ${task.understanding}%, rgb(51, 65, 85) ${task.understanding}%, rgb(51, 65, 85) 100%)`
                                    }}
                                  />
                                  <div className="text-xs text-center mt-1" style={{
                                    background: `linear-gradient(to right, ${getUnderstandingColor(task.understanding).replace('from-', 'rgb(').replace(' to-', '), rgb(').replace('-500', ', 0.5)')})`,
                                    WebkitBackgroundClip: 'text',
                                    WebkitTextFillColor: 'transparent',
                                    fontWeight: 'bold'
                                  }}>
                                    {getUnderstandingText(task.understanding)}
                                  </div>
                                </div>
                              )}
                            </div>
                            <button
                              onClick={() => deleteTask(task.id)}
                              className="w-8 h-8 rounded-lg bg-red-600/20 hover:bg-red-600/30 text-red-400 transition-all flex items-center justify-center flex-shrink-0"
                            >
                              <Trash2 className="w-4 h-4" />
                            </button>
                          </div>
                        </div>
                      ))
                    )}
                  </div>
                </div>

                {/* COLUNA VIDA PESSOAL */}
                <div>
                  <h4 className="text-xl font-bold text-pink-400 flex items-center gap-2 mb-4">
                    <Home className="w-5 h-5" />
                    Vida Pessoal
                  </h4>

                  {/* Formulário Pessoal */}
                  <div className="mb-4 bg-slate-800/50 rounded-2xl p-4 border border-slate-700">
                    <div className="flex gap-3">
                      <input
                        type="text"
                        value={newPersonalTask}
                        onChange={(e) => setNewPersonalTask(e.target.value)}
                        onKeyPress={(e) => e.key === 'Enter' && addPersonalTask()}
                        placeholder="Digite sua tarefa pessoal..."
                        className="flex-1 px-4 py-3 bg-slate-700 border border-slate-600 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-pink-500"
                      />
                      <button
                        onClick={addPersonalTask}
                        className="px-6 py-3 bg-gradient-to-r from-pink-600 to-rose-600 text-white rounded-xl font-semibold hover:shadow-lg transition-all"
                      >
                        <Plus className="w-5 h-5" />
                      </button>
                    </div>
                  </div>

                  {/* Lista Pessoal */}
                  <div className="space-y-3">
                    {personalTasks.length === 0 ? (
                      <div className="text-center py-8 text-slate-500">
                        <p className="text-sm">Nenhuma tarefa pessoal</p>
                      </div>
                    ) : (
                      personalTasks.map((task) => (
                        <div
                          key={task.id}
                          className={`flex items-center gap-4 p-4 rounded-xl border transition-all ${
                            task.completed
                              ? 'bg-slate-800/30 border-slate-700'
                              : 'bg-pink-600/10 border-pink-600/30'
                          }`}
                        >
                          <input
                            type="checkbox"
                            checked={task.completed}
                            onChange={() => toggleTask(task.id)}
                            className="w-5 h-5 rounded cursor-pointer"
                          />
                          <p className={`flex-1 text-white ${task.completed ? 'line-through opacity-50' : ''}`}>
                            {task.text}
                          </p>
                          <button
                            onClick={() => deleteTask(task.id)}
                            className="w-9 h-9 rounded-lg bg-red-600/20 hover:bg-red-600/30 text-red-400 transition-all flex items-center justify-center"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>
                      ))
                    )}
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Calendar2026;