import React, { useState, useMemo } from 'react';
import { 
  CheckCircle2, 
  Circle, 
  Briefcase, 
  Rocket, 
  MonitorPlay, 
  Megaphone,
  LayoutList
} from 'lucide-react';

// Categorias e ícones para melhorar a UX
const CATEGORIES = {
  'Operacional & Financeiro': <Briefcase className="w-5 h-5 text-blue-400" />,
  'Vendas & Comercial': <Rocket className="w-5 h-5 text-purple-400" />,
  'Produto & Tecnologia': <MonitorPlay className="w-5 h-5 text-emerald-400" />,
  'Marketing & Tráfego': <Megaphone className="w-5 h-5 text-orange-400" />
};

// Lista de tarefas inicial baseada no rascunho
const initialTasks = [
  { id: 1, category: 'Operacional & Financeiro', text: 'Modelo de contrato', completed: false },
  { id: 2, category: 'Operacional & Financeiro', text: 'Metodologia de cobrança (Asaas - Boleto / Pix)', completed: false },
  { id: 3, category: 'Operacional & Financeiro', text: 'E-mail comercial administrativo@envise.com.br (verificar plano de hospedagem)', completed: false },
  
  { id: 4, category: 'Vendas & Comercial', text: 'Proposta comercial (modelo do site - usar Claude/Gemini) e forma de apresentar', completed: false },
  { id: 5, category: 'Vendas & Comercial', text: 'Estruturar serviços com precificação individual e com pacotes', completed: false },
  { id: 6, category: 'Vendas & Comercial', text: 'Guia/Estrutura de reunião de fechamento (condução e possíveis demonstrações)', completed: false },
  { id: 7, category: 'Vendas & Comercial', text: 'Briefing e roadmap base após fechamento', completed: false },
  
  { id: 8, category: 'Produto & Tecnologia', text: 'Levantar custo de assinaturas ao cliente e diferenças das LLMs', completed: false },
  { id: 9, category: 'Produto & Tecnologia', text: 'Testar Manychat para domínio e entendimento', completed: false },
  { id: 10, category: 'Produto & Tecnologia', text: 'Testar criação de sites Gemini Canvas + Netlify', completed: false },
  
  { id: 11, category: 'Marketing & Tráfego', text: 'Configuração BM Envise (Tráfego)', completed: false },
  { id: 12, category: 'Marketing & Tráfego', text: 'Criativos de tráfego (vários criativos em imagens que segmentam)', completed: false },
  { id: 13, category: 'Marketing & Tráfego', text: 'Estratégia de prospecção: currículo', completed: false },
];

export default function App() {
  const [tasks, setTasks] = useState(initialTasks);

  // Função para alternar o status da tarefa
  const toggleTask = (taskId) => {
    setTasks(tasks.map(task => 
      task.id === taskId ? { ...task, completed: !task.completed } : task
    ));
  };

  // Cálculos de progresso
  const totalTasks = tasks.length;
  const completedTasks = tasks.filter(t => t.completed).length;
  const progressPercentage = Math.round((completedTasks / totalTasks) * 100);

  // Agrupar tarefas por categoria
  const tasksByCategory = useMemo(() => {
    return tasks.reduce((acc, task) => {
      if (!acc[task.category]) acc[task.category] = [];
      acc[task.category].push(task);
      return acc;
    }, {});
  }, [tasks]);

  return (
    <div className="min-h-screen bg-black text-zinc-200 font-sans selection:bg-zinc-800">
      
      {/* HEADER */}
      <header className="border-b border-zinc-900 bg-black/50 backdrop-blur-md sticky top-0 z-10">
        <div className="max-w-4xl mx-auto px-6 py-4 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-4">
            <img 
              src="Logo1.png" 
              alt="Envise Logo" 
              className="h-10 object-contain mix-blend-screen"
              onError={(e) => {
                // Fallback caso a imagem não carregue no ambiente de preview
                e.target.style.display = 'none';
                e.target.nextSibling.style.display = 'block';
              }}
            />
            <span className="hidden text-xl font-bold tracking-widest uppercase">Envise</span>
          </div>
          
          <div className="text-center sm:text-right">
            <h1 className="text-sm font-semibold text-zinc-400 uppercase tracking-wider">Próximos Passos</h1>
            <p className="text-lg font-medium text-zinc-100 flex items-center justify-center sm:justify-end gap-2">
              <LayoutList className="w-5 h-5 text-zinc-500" />
              Roadmap 25/04
            </p>
          </div>
        </div>
      </header>

      {/* MAIN CONTENT */}
      <main className="max-w-4xl mx-auto px-6 py-10">
        
        {/* PROGRESS SECTION */}
        <section className="mb-12 bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 shadow-xl">
          <div className="flex justify-between items-end mb-4">
            <div>
              <h2 className="text-2xl font-bold text-white mb-1">Visão Geral</h2>
              <p className="text-zinc-400 text-sm">Acompanhe o progresso do lançamento da Envise.</p>
            </div>
            <div className="text-right">
              <span className="text-3xl font-bold text-white">{progressPercentage}%</span>
              <p className="text-zinc-500 text-xs uppercase tracking-wide">Concluído</p>
            </div>
          </div>
          
          {/* Progress Bar */}
          <div className="w-full bg-zinc-950 rounded-full h-3 mb-2 border border-zinc-800 overflow-hidden">
            <div 
              className="bg-gradient-to-r from-zinc-600 to-zinc-200 h-3 rounded-full transition-all duration-700 ease-out" 
              style={{ width: `${progressPercentage}%` }}
            ></div>
          </div>
          <p className="text-xs text-zinc-500 text-right">
            {completedTasks} de {totalTasks} tarefas finalizadas
          </p>
        </section>

        {/* TASKS LIST BY CATEGORY */}
        <div className="space-y-8">
          {Object.entries(tasksByCategory).map(([category, categoryTasks]) => (
            <section key={category} className="animate-fade-in">
              <div className="flex items-center gap-3 mb-4">
                <div className="p-2 bg-zinc-900 rounded-lg border border-zinc-800">
                  {CATEGORIES[category]}
                </div>
                <h3 className="text-lg font-semibold text-zinc-100">{category}</h3>
                <div className="h-px bg-zinc-800 flex-1 ml-4"></div>
              </div>

              <div className="bg-zinc-900/30 border border-zinc-800/50 rounded-2xl overflow-hidden shadow-sm">
                {categoryTasks.map((task, index) => (
                  <button
                    key={task.id}
                    onClick={() => toggleTask(task.id)}
                    className={`w-full flex items-start text-left p-4 gap-4 transition-colors duration-200
                      ${index !== categoryTasks.length - 1 ? 'border-b border-zinc-800/50' : ''}
                      hover:bg-zinc-800/30 group
                    `}
                  >
                    <div className="mt-0.5 flex-shrink-0 transition-transform duration-200 group-hover:scale-110">
                      {task.completed ? (
                        <CheckCircle2 className="w-6 h-6 text-emerald-500" />
                      ) : (
                        <Circle className="w-6 h-6 text-zinc-600 group-hover:text-zinc-400" />
                      )}
                    </div>
                    <span className={`text-[15px] leading-relaxed transition-all duration-300 ${
                      task.completed ? 'text-zinc-500 line-through' : 'text-zinc-300'
                    }`}>
                      {task.text}
                    </span>
                  </button>
                ))}
              </div>
            </section>
          ))}
        </div>

      </main>

      {/* FOOTER */}
      <footer className="mt-20 py-10 border-t border-zinc-900 text-center">
        <div className="flex flex-col items-center justify-center opacity-50 hover:opacity-100 transition-opacity duration-300">
          <img 
            src="Icone1.png" 
            alt="Envise Ícone" 
            className="w-12 h-12 object-contain mb-4 mix-blend-screen"
            onError={(e) => { e.target.style.display = 'none'; }}
          />
          <p className="text-zinc-600 text-sm">© 2026 Envise. Todos os direitos reservados.</p>
          <p className="text-zinc-700 text-xs mt-1">Foco e execução.</p>
        </div>
      </footer>

      <style dangerouslySetInnerHTML={{__html: `
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
          animation: fadeIn 0.5s ease-out forwards;
        }
      `}} />
    </div>
  );
}