import { useEffect, useState } from "react";
import { useAuth } from "@/_core/hooks/useAuth";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { useLocation } from "wouter";
import { Loader2, LogOut, Mail } from "lucide-react";

export default function AdminDashboard() {
  const { user, loading, isAuthenticated, logout } = useAuth();
  const [, navigate] = useLocation();

  useEffect(() => {
    if (!loading && (!isAuthenticated || user?.role !== "admin")) {
      navigate("/");
    }
  }, [loading, isAuthenticated, user, navigate]);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
        <Loader2 className="h-8 w-8 animate-spin text-blue-400" />
      </div>
    );
  }

  if (!isAuthenticated || user?.role !== "admin") {
    return null;
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
      {/* Header */}
      <header className="border-b border-slate-700 bg-slate-800/50 backdrop-blur">
        <div className="mx-auto max-w-6xl px-4 py-6 sm:px-6 lg:px-8 flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-white">Painel Administrativo</h1>
            <p className="text-sm text-slate-400">Gerenciar candidaturas</p>
          </div>
          <Button
            onClick={() => logout()}
            variant="outline"
            className="bg-slate-700 border-slate-600 text-white hover:bg-slate-600"
          >
            <LogOut className="mr-2 h-4 w-4" />
            Sair
          </Button>
        </div>
      </header>

      {/* Main Content */}
      <main className="mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
        <Card className="bg-slate-800 border-slate-700 p-8">
          <div className="text-center">
            <Mail className="mx-auto h-16 w-16 text-blue-400 mb-4" />
            <h2 className="text-2xl font-bold text-white mb-4">
              📧 Candidaturas por Email
            </h2>
            <p className="text-slate-300 mb-6 max-w-2xl mx-auto">
              Todas as candidaturas são enviadas diretamente para seu email:
            </p>
            <div className="bg-slate-700 rounded-lg p-4 mb-6 inline-block">
              <p className="text-lg font-semibold text-blue-400">
                mthigienizacao.marcos@gmail.com
              </p>
            </div>
            <div className="space-y-4 text-left max-w-2xl mx-auto">
              <div className="bg-slate-700/50 rounded-lg p-4 border border-slate-600">
                <h3 className="font-semibold text-white mb-2">✅ O que você recebe:</h3>
                <ul className="text-slate-300 space-y-2">
                  <li>📝 Nome completo do candidato</li>
                  <li>📞 Telefone para contato</li>
                  <li>💼 Vaga que se candidatou</li>
                  <li>📎 RG Frente (anexado)</li>
                  <li>📎 RG Verso (anexado)</li>
                  <li>📅 Data e hora da candidatura</li>
                </ul>
              </div>

              <div className="bg-slate-700/50 rounded-lg p-4 border border-slate-600">
                <h3 className="font-semibold text-white mb-2">⏰ Quando recebe:</h3>
                <p className="text-slate-300">
                  Imediatamente após o candidato preencher o formulário e clicar em "Enviar Candidatura"
                </p>
              </div>

              <div className="bg-slate-700/50 rounded-lg p-4 border border-slate-600">
                <h3 className="font-semibold text-white mb-2">💡 Como usar:</h3>
                <ol className="text-slate-300 space-y-2 list-decimal list-inside">
                  <li>Verifique seu email regularmente</li>
                  <li>Baixe os arquivos do RG anexados</li>
                  <li>Analise os candidatos</li>
                  <li>Entre em contato pelo telefone fornecido</li>
                </ol>
              </div>
            </div>

            <div className="mt-8 pt-8 border-t border-slate-600">
              <p className="text-slate-400 text-sm">
                Sistema funcionando normalmente ✅
              </p>
            </div>
          </div>
        </Card>
      </main>
    </div>
  );
}
