import { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { User, Mail, Phone, Save, Bell, Loader2, Plus } from "lucide-react";
import { toast } from "@/hooks/use-toast";
import { personalAgent, UserProfile } from "@/services/personalAgent";
import { GlobalFunctions, TransferAreaProperties } from "@/GlobalFunctions";

const formatPhoneNumber = (value: string) => {
  const numbers = value.replace(/\D/g, "");
  
  if (numbers.length <= 2) {
    return numbers;
  } else if (numbers.length <= 7) {
    return `(${numbers.slice(0, 2)}) ${numbers.slice(2)}`;
  } else if (numbers.length <= 11) {
    return `(${numbers.slice(0, 2)}) ${numbers.slice(2, 7)}-${numbers.slice(7)}`;
  }
  return `(${numbers.slice(0, 2)}) ${numbers.slice(2, 7)}-${numbers.slice(7, 11)}`;
};

const MeuPerfil = () => {
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [userExists, setUserExists] = useState(false);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [userId, setUserId] = useState<string>("");
  
  const [nomeCompleto, setNomeCompleto] = useState("");
  const [email, setEmail] = useState("");
  const [whatsapp, setWhatsapp] = useState("");
  const [receberLembretes, setReceberLembretes] = useState(true);

  // Estados para o modal de criação
  const [createNome, setCreateNome] = useState("");
  const [createWhatsapp, setCreateWhatsapp] = useState("");
  const [createFollowup, setCreateFollowup] = useState(true);
  const [creating, setCreating] = useState(false);

  // Verifica se o usuário está logado e carrega os dados
  useEffect(() => {
    const checkAuthAndLoad = async () => {
      // Verifica se há token no sessionStorage primeiro
      const jsonUsuario = sessionStorage.getItem('usuarioLogado');
      if (!jsonUsuario) {
        window.location.replace(import.meta.env.VITE_BASE_URL_HGTX_CORE || 'https://core.hgtx.com.br');
        return;
      }

      // Tenta obter o email do usuário logado
      let userEmail = GlobalFunctions.getUsuarioLogado().email;
      
      // Se não tem email, tenta fazer refresh do token
      if (!userEmail) {
        try {
          await GlobalFunctions.getToken();
          // Aguarda um pouco para o refresh ser processado (se necessário)
          await new Promise(resolve => setTimeout(resolve, 1000));
          
          // Verifica novamente após refresh
          userEmail = GlobalFunctions.getUsuarioLogado().email;
        } catch (error) {
          console.error("MeuPerfil: Erro ao obter token:", error);
        }
      }

      // Se ainda não tem email após tentar refresh, verifica se o token existe
      // Se o token existe mas não tem email, pode ser problema na decodificação
      if (!userEmail) {
        const usuarioData = GlobalFunctions.getUsuarioLogado();
        
        // Se não tem email mas tem token no sessionStorage, tenta carregar mesmo assim
        // O loadUserProfile vai tratar o erro adequadamente se o email for necessário
        // Só redireciona se o token estiver completamente inválido (sem UID e sem EID)
        if (!usuarioData.email && usuarioData.UID === "0" && usuarioData.EID === "0") {
          window.location.replace(import.meta.env.VITE_BASE_URL_HGTX_CORE || 'https://core.hgtx.com.br');
          return;
        }
      }

      // Se passou na verificação (ou tem token válido), carrega o perfil
      loadUserProfile();
    };

    checkAuthAndLoad();
  }, []);

  const loadUserProfile = async () => {
    try {
      setLoading(true);
      let userEmail = GlobalFunctions.getUsuarioLogado().email;
      
      // Se não tem email, tenta obter do Transfer Area como fallback
      if (!userEmail) {
        const transferEmail = GlobalFunctions.getTransferProperty(
          TransferAreaProperties.UsuarioEmail
        );
        if (transferEmail) {
          userEmail = transferEmail as string;
        }
      }
      
      // Se ainda não tem email, tenta obter do token novamente após refresh
      if (!userEmail) {
        try {
          await GlobalFunctions.getToken();
          await new Promise(resolve => setTimeout(resolve, 500));
          userEmail = GlobalFunctions.getUsuarioLogado().email;
        } catch (error) {
          console.error("MeuPerfil: Erro ao fazer refresh no loadUserProfile:", error);
        }
      }
      
      if (!userEmail) {
        console.error("MeuPerfil: Não foi possível obter email do usuário");
        toast({
          title: "Erro",
          description: "Email do usuário não encontrado. Por favor, faça login novamente.",
          variant: "destructive",
        });
        setLoading(false);
        // Não redireciona aqui, deixa o usuário ver o erro
        return;
      }

      setEmail(userEmail);
      const response = await personalAgent.getUserProfile(userEmail);

      if (response.success && response.id) {
        // Usuário existe
        setUserExists(true);
        setUserId(response.id);
        setNomeCompleto(response.nome);
        setWhatsapp(formatPhoneNumber(response.whatsapp));
        setReceberLembretes(response.followup);
      } else {
        // Usuário não existe
        setUserExists(false);
      }
    } catch (error: unknown) {
      console.error("Erro ao carregar perfil:", error);
      const errorMessage = error instanceof Error ? error.message : String(error);
      if (errorMessage.includes("não está cadastrado")) {
        setUserExists(false);
      } else {
        toast({
          title: "Erro",
          description: errorMessage || "Erro ao carregar perfil do usuário.",
          variant: "destructive",
        });
      }
    } finally {
      setLoading(false);
    }
  };

  const handleWhatsappChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const formatted = formatPhoneNumber(e.target.value);
    setWhatsapp(formatted);
  };

  const handleCreateWhatsappChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const formatted = formatPhoneNumber(e.target.value);
    setCreateWhatsapp(formatted);
  };

  const handleSave = async () => {
    if (!userExists || !userId) {
      toast({
        title: "Erro",
        description: "Usuário não encontrado. Por favor, crie uma conta primeiro.",
        variant: "destructive",
      });
      return;
    }

    try {
      setSaving(true);
      const response = await personalAgent.updateUser(userId, {
        nome: nomeCompleto,
        whatsapp: whatsapp,
        followup: receberLembretes,
      });

      if (response.success) {
        toast({
          title: "Perfil atualizado",
          description: "Suas informações foram salvas com sucesso.",
        });
        // Atualiza os dados locais
        setNomeCompleto(response.nome);
        setWhatsapp(formatPhoneNumber(response.whatsapp));
        setReceberLembretes(response.followup);
      } else {
        throw new Error(response.message || "Erro ao atualizar perfil");
      }
    } catch (error: unknown) {
      console.error("Erro ao salvar:", error);
      const errorMessage = error instanceof Error ? error.message : String(error);
      toast({
        title: "Erro ao salvar",
        description: errorMessage || "Erro ao atualizar perfil. Tente novamente.",
        variant: "destructive",
      });
    } finally {
      setSaving(false);
    }
  };

  const handleCreateUser = async () => {
    if (!createNome.trim()) {
      toast({
        title: "Erro",
        description: "Nome é obrigatório.",
        variant: "destructive",
      });
      return;
    }

    if (!createWhatsapp.trim()) {
      toast({
        title: "Erro",
        description: "WhatsApp é obrigatório.",
        variant: "destructive",
      });
      return;
    }

    try {
      setCreating(true);
      const response = await personalAgent.createUser({
        nome: createNome.trim(),
        email: email,
        whatsapp: createWhatsapp,
        followup: createFollowup,
      });

      if (response.success && response.id) {
        toast({
          title: "Conta criada",
          description: "Sua conta foi criada com sucesso!",
        });
        setUserExists(true);
        setUserId(response.id);
        setNomeCompleto(response.nome);
        setWhatsapp(formatPhoneNumber(response.whatsapp));
        setReceberLembretes(response.followup);
        setShowCreateModal(false);
        // Limpa os campos do modal
        setCreateNome("");
        setCreateWhatsapp("");
        setCreateFollowup(true);
      } else {
        throw new Error(response.message || "Erro ao criar conta");
      }
    } catch (error: unknown) {
      console.error("Erro ao criar usuário:", error);
      const errorMessage = error instanceof Error ? error.message : String(error);
      toast({
        title: "Erro ao criar conta",
        description: errorMessage || "Erro ao criar conta. Tente novamente.",
        variant: "destructive",
      });
    } finally {
      setCreating(false);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="flex flex-col items-center gap-4">
          <Loader2 className="w-8 h-8 animate-spin text-primary" />
          <p className="text-muted-foreground">Carregando perfil...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-foreground">Meu Perfil</h1>
        <p className="text-muted-foreground mt-1">
          Gerencie suas informações pessoais
        </p>
      </div>

      {!userExists ? (
        <Card className="max-w-2xl">
          <CardContent className="py-12 text-center">
            <div className="space-y-4">
              <User className="w-16 h-16 mx-auto text-muted-foreground" />
              <div>
                <h3 className="text-xl font-semibold mb-2">
                  Você ainda não possui uma conta
                </h3>
                <p className="text-muted-foreground mb-6">
                  Crie sua conta para começar a usar o agente pessoal de IA
                </p>
              </div>
              <Button onClick={() => setShowCreateModal(true)} size="lg">
                <Plus className="w-4 h-4 mr-2" />
                Criar Conta
              </Button>
            </div>
          </CardContent>
        </Card>
      ) : (
        <Card className="max-w-2xl">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <User className="w-5 h-5" />
              Informações Pessoais
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="nomeCompleto" className="flex items-center gap-2">
                <User className="w-4 h-4" />
                Nome Completo
              </Label>
              <Input
                id="nomeCompleto"
                value={nomeCompleto}
                onChange={(e) => setNomeCompleto(e.target.value)}
                placeholder="Digite seu nome completo"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="email" className="flex items-center gap-2">
                <Mail className="w-4 h-4" />
                E-mail
              </Label>
              <Input
                id="email"
                type="email"
                value={email}
                readOnly
                className="bg-muted cursor-not-allowed"
              />
              <p className="text-xs text-muted-foreground">
                O e-mail não pode ser alterado
              </p>
            </div>

            <div className="space-y-2">
              <Label htmlFor="whatsapp" className="flex items-center gap-2">
                <Phone className="w-4 h-4" />
                WhatsApp
              </Label>
              <Input
                id="whatsapp"
                value={whatsapp}
                onChange={handleWhatsappChange}
                placeholder="(00) 00000-0000"
                maxLength={15}
              />
            </div>

            <div className="flex items-center justify-between rounded-lg border p-4">
              <div className="space-y-0.5">
                <Label htmlFor="receberLembretes" className="flex items-center gap-2 cursor-pointer">
                  <Bell className="w-4 h-4" />
                  Receber Follow up e lembretes
                </Label>
                <p className="text-xs text-muted-foreground">
                  Receba notificações sobre eventos e tarefas
                </p>
              </div>
              <Switch
                id="receberLembretes"
                checked={receberLembretes}
                onCheckedChange={setReceberLembretes}
              />
            </div>

            <Button 
              onClick={handleSave} 
              className="w-full sm:w-auto"
              disabled={saving}
            >
              {saving ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  Salvando...
                </>
              ) : (
                <>
                  <Save className="w-4 h-4 mr-2" />
                  Salvar Alterações
                </>
              )}
            </Button>
          </CardContent>
        </Card>
      )}

      {/* Modal de Criação de Conta */}
      <Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Criar Conta</DialogTitle>
            <DialogDescription>
              Preencha os dados abaixo para criar sua conta no agente pessoal de IA
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="createNome">Nome Completo</Label>
              <Input
                id="createNome"
                value={createNome}
                onChange={(e) => setCreateNome(e.target.value)}
                placeholder="Digite seu nome completo"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="createEmail">E-mail</Label>
              <Input
                id="createEmail"
                type="email"
                value={email}
                readOnly
                className="bg-muted cursor-not-allowed"
              />
              <p className="text-xs text-muted-foreground">
                O e-mail é baseado na sua conta logada
              </p>
            </div>

            <div className="space-y-2">
              <Label htmlFor="createWhatsapp">WhatsApp</Label>
              <Input
                id="createWhatsapp"
                value={createWhatsapp}
                onChange={handleCreateWhatsappChange}
                placeholder="(00) 00000-0000"
                maxLength={15}
              />
            </div>

            <div className="flex items-center justify-between rounded-lg border p-4">
              <div className="space-y-0.5">
                <Label htmlFor="createFollowup" className="cursor-pointer">
                  Receber Follow up e lembretes
                </Label>
                <p className="text-xs text-muted-foreground">
                  Receba notificações sobre eventos e tarefas
                </p>
              </div>
              <Switch
                id="createFollowup"
                checked={createFollowup}
                onCheckedChange={setCreateFollowup}
              />
            </div>
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setShowCreateModal(false)}
              disabled={creating}
            >
              Cancelar
            </Button>
            <Button onClick={handleCreateUser} disabled={creating}>
              {creating ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  Criando...
                </>
              ) : (
                <>
                  <Plus className="w-4 h-4 mr-2" />
                  Criar Conta
                </>
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default MeuPerfil;
