import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, signInAnonymously, signInWithCustomToken } from 'firebase/auth';
import { getFirestore, doc, setDoc, onSnapshot } from 'firebase/firestore';
import { Moon, Sun, ChevronLeft, ChevronRight, RotateCcw, CheckCircle2 } from 'lucide-react';

// --- Configuração Firebase ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'habit-tracker-adhd-contrast';

export default function App() {
  const [user, setUser] = useState(null);
  const [darkMode, setDarkMode] = useState(true);
  const [selectedDate, setSelectedDate] = useState(new Date(2026, 0, 1)); 
  
  const [habitSettings, setHabitSettings] = useState({
    1: { title: 'Manhã', task: 'Tarefa 1' },
    2: { title: 'Tarde', task: 'Tarefa 2' },
    3: { title: 'Noite', task: 'Tarefa 3' }
  });

  const [habitLogs, setHabitLogs] = useState({});

  const currentYear = selectedDate.getFullYear();
  const currentMonth = selectedDate.getMonth();

  useEffect(() => {
    const initAuth = async () => {
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
        await signInWithCustomToken(auth, __initial_auth_token);
      } else {
        await signInAnonymously(auth);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (!user) return;

    const settingsDoc = doc(db, 'artifacts', appId, 'users', user.uid, 'settings', 'habits');
    const unsubSettings = onSnapshot(settingsDoc, (snapshot) => {
      if (snapshot.exists()) setHabitSettings(snapshot.data());
    });

    const monthId = `${currentYear}-${currentMonth + 1}`;
    const logsDoc = doc(db, 'artifacts', appId, 'users', user.uid, 'logs', monthId);
    const unsubLogs = onSnapshot(logsDoc, (snapshot) => {
      if (snapshot.exists()) {
        setHabitLogs(snapshot.data());
      } else {
        setHabitLogs({});
      }
    });

    return () => {
      unsubSettings();
      unsubLogs();
    };
  }, [user, currentYear, currentMonth]);

  const saveSettings = async (newSettings) => {
    if (!user) return;
    await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'settings', 'habits'), newSettings);
  };

  const toggleDay = async (habitId, day) => {
    if (!user) return;
    const monthId = `${currentYear}-${currentMonth + 1}`;
    const currentList = habitLogs[habitId] || [];
    const newList = currentList.includes(day) ? currentList.filter(d => d !== day) : [...currentList, day];

    await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'logs', monthId), {
      ...habitLogs,
      [habitId]: newList
    });
  };

  const resetHabitMonth = async (habitId) => {
    if (!user || !window.confirm("Zerar este mês?")) return;
    const monthId = `${currentYear}-${currentMonth + 1}`;
    await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'logs', monthId), {
      ...habitLogs,
      [habitId]: []
    });
  };

  const daysInMonth = useMemo(() => new Date(currentYear, currentMonth + 1, 0).getDate(), [currentYear, currentMonth]);
  const firstDayOfWeek = useMemo(() => new Date(currentYear, currentMonth, 1).getDay(), [currentYear, currentMonth]);

  const monthNames = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
  const weekDays = ["D", "S", "T", "Q", "Q", "S", "S"];

  if (!user) return (
    <div className="flex items-center justify-center min-h-screen bg-slate-950">
      <div className="text-white font-bold animate-pulse uppercase tracking-widest">Sincronizando...</div>
    </div>
  );

  return (
    <div className={`min-h-screen transition-colors duration-200 ${darkMode ? 'bg-black text-white' : 'bg-slate-50 text-slate-900'}`}>
      <div className="max-w-6xl mx-auto p-4 md:p-8">
        
        <header className="flex flex-col md:flex-row justify-between items-center mb-10 gap-6">
          <div className="flex items-center gap-4">
            <div className="bg-emerald-500 p-2.5 rounded-2xl text-black shadow-[0_0_15px_rgba(16,185,129,0.4)]">
              <CheckCircle2 size={32} strokeWidth={3} />
            </div>
            <h1 className="text-3xl font-black tracking-tighter uppercase italic">Foco Total</h1>
          </div>

          <div className={`flex items-center gap-4 p-2 rounded-2xl border-2 ${darkMode ? 'bg-slate-900 border-slate-700 shadow-xl' : 'bg-white border-slate-200 shadow-sm'}`}>
            <button 
              onClick={() => setDarkMode(!darkMode)}
              className={`p-3 rounded-xl transition-all ${darkMode ? 'bg-slate-800 text-yellow-400 hover:bg-slate-700' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
            >
              {darkMode ? <Sun size={22} fill="currentColor" /> : <Moon size={22} fill="currentColor" />}
            </button>
            <div className={`h-8 w-0.5 ${darkMode ? 'bg-slate-700' : 'bg-slate-200'}`}></div>
            <div className="flex items-center gap-4 px-4">
              <button onClick={() => setSelectedDate(new Date(currentYear, currentMonth - 1, 1))} className="hover:scale-125 transition-transform"><ChevronLeft size={28} /></button>
              <div className="flex flex-col items-center min-w-[140px]">
                <span className={`text-[10px] font-black uppercase tracking-[0.2em] ${darkMode ? 'text-emerald-400' : 'text-slate-400'}`}>{currentYear}</span>
                <span className="text-xl font-black uppercase tracking-tight">{monthNames[currentMonth]}</span>
              </div>
              <button onClick={() => setSelectedDate(new Date(currentYear, currentMonth + 1, 1))} className="hover:scale-125 transition-transform"><ChevronRight size={28} /></button>
            </div>
          </div>
        </header>

        <div className="flex overflow-x-auto pb-6 mb-10 no-scrollbar gap-3">
          {monthNames.map((m, idx) => (
            <button
              key={`${m}-${idx}`}
              onClick={() => setSelectedDate(new Date(currentYear, idx, 1))}
              className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all whitespace-nowrap border-2 ${
                currentMonth === idx 
                ? 'bg-emerald-500 border-emerald-400 text-black shadow-[0_0_20px_rgba(16,185,129,0.3)] scale-105' 
                : darkMode 
                  ? 'bg-slate-900 border-slate-800 text-slate-400 hover:border-slate-600 hover:text-white' 
                  : 'bg-white border-slate-200 text-slate-400 hover:border-slate-400 hover:text-slate-600 shadow-sm'
              }`}
            >
              {m}
            </button>
          ))}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {[1, 2, 3].map((id) => {
            const completedDays = habitLogs[id] || [];
            const completionRate = Math.round((completedDays.length / daysInMonth) * 100);

            return (
              <div key={id} className={`flex flex-col rounded-[2.5rem] p-8 transition-all border-2 ${
                darkMode 
                ? 'bg-slate-900 border-slate-800 hover:border-emerald-500/30' 
                : 'bg-white border-transparent shadow-2xl shadow-slate-200'
              }`}>
                
                <div className="mb-6">
                  <input 
                    type="text"
                    value={habitSettings[id]?.title}
                    onChange={(e) => {
                      const updated = { ...habitSettings, [id]: { ...habitSettings[id], title: e.target.value } };
                      setHabitSettings(updated);
                      saveSettings(updated);
                    }}
                    className={`w-full bg-transparent border-none text-[11px] font-black uppercase tracking-[0.3em] focus:ring-0 p-0 mb-2 ${darkMode ? 'text-emerald-400' : 'text-slate-400'}`}
                  />
                  <input 
                    type="text"
                    value={habitSettings[id]?.task}
                    onChange={(e) => {
                      const updated = { ...habitSettings, [id]: { ...habitSettings[id], task: e.target.value } };
                      setHabitSettings(updated);
                      saveSettings(updated);
                    }}
                    className={`w-full bg-transparent border-none text-2xl font-black focus:ring-0 p-0 ${darkMode ? 'text-white' : 'text-blue-600'}`}
                  />
                </div>

                <div className="grid grid-cols-7 gap-2 mb-3">
                  {weekDays.map((wd, idx) => (
                    <div key={`weekday-${id}-${wd}-${idx}`} className={`text-center text-[10px] font-black ${darkMode ? 'text-slate-600' : 'text-slate-300'}`}>
                      {wd}
                    </div>
                  ))}
                </div>

                <div className="grid grid-cols-7 gap-2">
                  {/* Espaços vazios para alinhar o primeiro dia do mês */}
                  {Array.from({ length: firstDayOfWeek }).map((_, i) => (
                    <div key={`empty-${id}-${i}`} className="aspect-square"></div>
                  ))}
                  
                  {/* Dias do mês */}
                  {Array.from({ length: daysInMonth }, (_, i) => i + 1).map((day) => {
                    const isDone = completedDays.includes(day);
                    return (
                      <button
                        key={`day-${id}-${day}`}
                        onClick={() => toggleDay(id, day)}
                        className={`
                          aspect-square flex items-center justify-center rounded-xl text-base font-black transition-all
                          ${isDone 
                            ? 'bg-emerald-500 text-black scale-90 shadow-[0_0_15px_rgba(16,185,129,0.5)]' 
                            : darkMode 
                              ? 'bg-slate-800 text-slate-200 hover:bg-slate-700 border border-slate-700' 
                              : 'bg-slate-100 text-slate-500 hover:bg-slate-200'
                          }
                        `}
                      >
                        {day}
                      </button>
                    );
                  })}
                </div>

                <div className={`mt-8 pt-6 border-t flex justify-between items-end ${darkMode ? 'border-slate-800' : 'border-slate-100'}`}>
                  <div className="flex-1">
                    <div className={`text-[10px] font-black uppercase tracking-widest mb-3 ${darkMode ? 'text-slate-500' : 'text-slate-400'}`}>Taxa de Sucesso</div>
                    <div className="flex items-center gap-4">
                      <span className="text-3xl font-black tabular-nums">{completionRate}%</span>
                      <div className={`flex-1 h-3 rounded-full overflow-hidden ${darkMode ? 'bg-slate-800' : 'bg-slate-100'}`}>
                        <div 
                          className="h-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.8)] transition-all duration-500" 
                          style={{ width: `${completionRate}%` }}
                        ></div>
                      </div>
                    </div>
                  </div>
                  
                  <button 
                    onClick={() => resetHabitMonth(id)}
                    className="ml-4 p-3 rounded-xl transition-colors text-slate-500 hover:text-red-500 hover:bg-red-500/10"
                  >
                    <RotateCcw size={20} strokeWidth={3} />
                  </button>
                </div>
              </div>
            );
          })}
        </div>

        <footer className="mt-16 mb-8 text-center opacity-40">
           <p className="text-[10px] font-black uppercase tracking-[0.5em]">2026 Habit Tracking Systems</p>
        </footer>
      </div>

      <style dangerouslySetInnerHTML={{ __html: `
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        body { font-family: 'Inter', sans-serif; letter-spacing: -0.02em; }
      `}} />
    </div>
  );
}