import { useSession, signOut } from "next-auth/react"
import { useRouter } from "next/router"
import { useState, useEffect } from "react"
import AvatarSelector from "../components/AvatarSelector"
import CategoryMenu from "../components/CategoryMenu"

// Apps organizados por categoria
const ALL_APPS = [
  // Produtividade
  { id: 1, name: "Tendências Semanais", desc: "Notícias em alta • Top 100", path: "/apps/trendsnews", icon: "📈", category: "produtividade", favorite: false },
  { id: 2, name: "Conversor", desc: "Conversão de unidades", path: "/apps/converter", icon: "🔄", category: "produtividade", favorite: false },
  { id: 3, name: "Calculadora", desc: "Calculos rápidos", path: "/apps/calculator", icon: "🧮", category: "produtividade", favorite: false },
  
  // Utilidades
  { id: 4, name: "Relógio", desc: "Relógio mundial", path: "/apps/clock", icon: "⏰", category: "utilidades", favorite: false },
  { id: 5, name: "Gerador Senhas", desc: "Senhas seguras", path: "/apps/password-generator", icon: "🔐", category: "utilidades", favorite: false },
  { id: 6, name: "QR Code", desc: "Gerador QR", path: "/apps/qrcode", icon: "📱", category: "utilidades", favorite: false },
  { id: 7, name: "Cronômetro", desc: "Tempo e alarmes", path: "/apps/timer", icon: "⏱️", category: "utilidades", favorite: false },
  
  // Games
  { id: 8, name: "Jogo da Velha", desc: "Jogo clássico", path: "/apps/tictactoe", icon: "❌", category: "games", favorite: false },
  
  // Ferramentas
  { id: 9, name: "Editor Texto", desc: "Texto simples", path: "/apps/text-editor", icon: "📝", category: "ferramentas", favorite: false },
  { id: 10, name: "Conversor Moedas", desc: "Câmbio em tempo real", path: "/apps/currency", icon: "💱", category: "ferramentas", favorite: false },
  
  // Educação
  { id: 11, name: "Dicionário", desc: "Significados", path: "/apps/dictionary", icon: "📖", category: "educacao", favorite: false },
  { id: 12, name: "Tradutor", desc: "Multi-idiomas", path: "/apps/translator", icon: "🌐", category: "educacao", favorite: false }
]

export default function Dashboard() {
  const { data: session } = useSession()
  const router = useRouter()
  const [selectedAvatar, setSelectedAvatar] = useState("😀")
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [favorites, setFavorites] = useState([])
  const [apps, setApps] = useState(ALL_APPS)

  // Carregar favoritos do localStorage
  useEffect(() => {
    const savedFavorites = localStorage.getItem("favorites")
    const savedAvatar = localStorage.getItem("selectedAvatar")
    if (savedFavorites) {
      setFavorites(JSON.parse(savedFavorites))
    }
    if (savedAvatar) {
      setSelectedAvatar(savedAvatar)
    }
  }, [])

  // Salvar favoritos no localStorage
  useEffect(() => {
    localStorage.setItem("favorites", JSON.stringify(favorites))
  }, [favorites])

  // Salvar avatar no localStorage
  useEffect(() => {
    localStorage.setItem("selectedAvatar", selectedAvatar)
  }, [selectedAvatar])

  const toggleFavorite = (appId) => {
    setFavorites(prev => 
      prev.includes(appId) 
        ? prev.filter(id => id !== appId)
        : [...prev, appId]
    )
  }

  // Filtrar apps
  const filteredApps = selectedCategory === "all"
    ? apps
    : apps.filter(app => app.category === selectedCategory)

  // Apps favoritos
  const favoriteApps = apps.filter(app => favorites.includes(app.id))

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <nav className="bg-white shadow-lg p-4 flex justify-between items-center">
        <div className="flex items-center gap-4">
          <h1 className="text-2xl font-bold">1000Apps</h1>
          <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full font-semibold">FREE</span>
        </div>
        <div className="flex items-center gap-4">
          <AvatarSelector selectedAvatar={selectedAvatar} onSelect={setSelectedAvatar} />
          <span className="text-gray-600">Olá, {session?.user?.name || session?.user?.username || "usuário"}!</span>
          <button onClick={() => signOut()} className="text-red-600 hover:underline font-medium">Sair</button>
        </div>
      </nav>
      
      <main className="max-w-6xl mx-auto p-6">
        {/* Favoritos Section */}
        {favorites.length > 0 && (
          <div className="mb-8">
            <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
              <span>⭐</span> Favoritos
            </h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              {favoriteApps.map(app => (
                <button
                  key={app.id}
                  onClick={() => router.push(app.path)}
                  className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all text-left hover:scale-105 cursor-pointer border-2 border-yellow-200"
                >
                  <div className="text-3xl mb-2">{app.icon}</div>
                  <h3 className="font-semibold text-gray-800 text-sm">{app.name}</h3>
                  <p className="text-xs text-gray-500 mt-1">{app.desc}</p>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Category Filter */}
        <CategoryMenu selectedCategory={selectedCategory} onSelect={setSelectedCategory} />

        {/* Apps Grid */}
        <div className="mb-6">
          <h2 className="text-3xl font-bold text-gray-800 mb-2">
            {selectedCategory === "all" ? "Todos os Apps" : 
             selectedCategory === "produtividade" ? "Produtividade" :
             selectedCategory === "utilidades" ? "Utilidades" :
             selectedCategory === "games" ? "Games" :
             selectedCategory === "ferramentas" ? "Ferramentas" :
             selectedCategory === "educacao" ? "Educação" :
             selectedCategory === "entretenimento" ? "Entretenimento" : "Apps"}
          </h2>
          <p className="text-gray-500">
            {selectedCategory === "all" 
              ? `${apps.length} apps disponíveis` 
              : `${filteredApps.length} apps nesta categoria`}
          </p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {filteredApps.map(app => (
            <div key={app.id} className="relative">
              <button
                onClick={() => router.push(app.path)}
                className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all text-left hover:scale-105 cursor-pointer w-full"
              >
                <div className="text-3xl mb-2">{app.icon}</div>
                <h3 className="font-semibold text-gray-800 text-sm">{app.name}</h3>
                <p className="text-xs text-gray-500 mt-1">{app.desc}</p>
              </button>
              <button
                onClick={() => toggleFavorite(app.id)}
                className="absolute top-2 right-2 text-lg"
                title={favorites.includes(app.id) ? "Remover dos favoritos" : "Adicionar aos favoritos"}
              >
                {favorites.includes(app.id) ? "⭐" : "☆"}
              </button>
            </div>
          ))}
        </div>
      </main>
    </div>
  )
}

export async function getServerSideProps() {
  return {
    props: {},
  }
}