import React, { useState } from "react";
import { SystemSettings } from "../components/System/SystemSettings";
import {
  User,
  Mail,
  Phone,
  MapPin,
  Lock,
  Bell,
  Palette,
  Globe,
  Save,
  Camera,
  GraduationCap,
  Database,
} from "lucide-react";
import toast from "react-hot-toast";
import { Button } from "../components/Button";
import { useAuth } from "../contexts/AuthContext";
import { UserRole } from "../types";

export const SettingsPage: React.FC = () => {
  const { user } = useAuth();
  const isAdmin =
    user?.role === UserRole.SUPERADMIN ||
    user?.role === UserRole.BUSINESS_OWNER;
  const [activeTab, setActiveTab] = useState<
    "profile" | "account" | "notifications" | "appearance" | "system"
  >("profile");

  const [profileData, setProfileData] = useState({
    name: "",
    email: "",
    phone: "",
    location: "",
    bio: "",
    avatar: "https://i.pravatar.cc/150?img=68",
  });

  // Effect to sync state with user data
  React.useEffect(() => {
    if (user) {
      setProfileData({
        name: user.name || "",
        email: user.email || "",
        phone: user.phone || "",
        location: user.profissional?.cidade || "",
        bio: user.profissional?.observacao || "",
        avatar: user.profissional?.avatar_url || "https://i.pravatar.cc/150?img=68",
      });
    }
  }, [user]);

  const [notificationSettings, setNotificationSettings] = useState({
    emailNotifications: true,
    pushNotifications: true,
    smsNotifications: false,
    eventReminders: true,
    paymentAlerts: true,
    teamUpdates: false,
  });

  const [appearanceSettings, setAppearanceSettings] = useState({
    theme: "light",
    language: "pt-BR",
    dateFormat: "DD/MM/YYYY",
    currency: "BRL",
  });

  const handleSaveProfile = async () => {
    try {
        if (!user?.profissional?.id) {
            toast.error("Perfil profissional não encontrado para atualização.");
            return;
        }

        const token = localStorage.getItem("token") || document.cookie.replace(/(?:(?:^|.*;\s*)access_token\s*\=\s*([^;]*).*$)|^.*$/, "$1");
        
        // Prepare payload for Professional Update
        // Note: The backend expects specific fields. We map what we have.
        const payload = {
            nome: profileData.name,
            email: profileData.email, // Note: Prof service might not update email if it doesn't match User table sync logic, but we send it.
            whatsapp: profileData.phone,
            cidade: profileData.location,
            observacao: profileData.bio,
            avatar_url: profileData.avatar,
            // Maintain other required fields if necessary, but PUT usually allows partial or defaults?
            // Checking backend: It uses 'toPgText', so missing fields become NULL?
            // We should fetch existing professional data first to merge? 
            // Or assume the backend handles partial updates? 
            // The backend implementation 'CreateProfissionalInput' struct in Update assumes REPLACING values.
            // Be careful. ideally we should GET /me/profissional first.
            // But we have 'user.profissional' which might be incomplete. 
            // Let's rely on what we have.
        };

        // Fetch current professional data to avoid overwriting with nulls
        const responseGet = await fetch(`${import.meta.env.VITE_API_URL || "http://localhost:8080"}/api/profissionais/${user.profissional.id}`, {
             headers: {
                Authorization: `Bearer ${token}`,
            },
        });
        
        let currentData = {};
        if (responseGet.ok) {
            currentData = await responseGet.json();
        }

        const finalPayload = {
            ...currentData, // Merge existing
            nome: profileData.name,
            whatsapp: profileData.phone,
            cidade: profileData.location,
            observacao: profileData.bio,
            // email is usually read-only or handled separately in generic updates
        };

        const response = await fetch(`${import.meta.env.VITE_API_URL || "http://localhost:8080"}/api/profissionais/${user.profissional.id}`, {
            method: "PUT",
            headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${token}`,
            },
            body: JSON.stringify(finalPayload),
        });

        if (!response.ok) {
            throw new Error("Falha ao atualizar perfil");
        }

        toast.success("Perfil atualizado com sucesso!");
        // Optionally refresh user context 
        window.location.reload(); // Simple way to refresh context
    } catch (error) {
        console.error(error);
        toast.error("Erro ao salvar perfil.");
    }
  };

  const handleSaveNotifications = () => {
    toast.success("Configurações de notificações salvas!");
  };

  const handleSaveAppearance = () => {
    toast.success("Configurações de aparência salvas!");
  };

  return (
    <div className="min-h-screen bg-gray-50 pt-20 sm:pt-24 md:pt-28 lg:pt-32 pb-8 sm:pb-12">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="mb-6 sm:mb-8">
          <h1 className="text-2xl sm:text-3xl font-serif font-bold text-brand-black mb-2">
            Configurações
          </h1>
          <p className="text-sm sm:text-base text-gray-600">
            Gerencie suas preferências e informações da conta
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 sm:gap-6">
          {/* Mobile Tabs - Horizontal */}
          <div className="lg:hidden">
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-2">
              <nav className="flex overflow-x-auto gap-1 scrollbar-hide">
                <button
                  onClick={() => setActiveTab("profile")}
                  className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${
                    activeTab === "profile"
                      ? "bg-brand-gold text-white"
                      : "text-gray-700 hover:bg-gray-100"
                  }`}
                >
                  <User size={18} />
                  <span className="font-medium">Perfil</span>
                </button>
                <button
                  onClick={() => setActiveTab("account")}
                  className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${
                    activeTab === "account"
                      ? "bg-brand-gold text-white"
                      : "text-gray-700 hover:bg-gray-100"
                  }`}
                >
                  <Lock size={18} />
                  <span className="font-medium">Conta</span>
                </button>

                {isAdmin && (
                  <button
                    onClick={() => setActiveTab("system")}
                    className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${
                      activeTab === "system"
                        ? "bg-brand-gold text-white"
                        : "text-gray-700 hover:bg-gray-100"
                    }`}
                  >
                    <Database size={18} />
                    <span className="font-medium">Sistema</span>
                  </button>
                )}
              </nav>
            </div>
          </div>

          {/* Desktop Sidebar - Vertical */}
          <div className="hidden lg:block lg:col-span-1">
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
              <nav className="space-y-1">
                <button
                  onClick={() => setActiveTab("profile")}
                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${
                    activeTab === "profile"
                      ? "bg-brand-gold text-white"
                      : "text-gray-700 hover:bg-gray-100"
                  }`}
                >
                  <User size={20} />
                  <span className="font-medium">Perfil</span>
                </button>
                <button
                  onClick={() => setActiveTab("account")}
                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${
                    activeTab === "account"
                      ? "bg-brand-gold text-white"
                      : "text-gray-700 hover:bg-gray-100"
                  }`}
                >
                  <Lock size={20} />
                  <span className="font-medium">Conta</span>
                </button>

                
                {isAdmin && (
                  <button
                    onClick={() => setActiveTab("system")}
                    className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${
                      activeTab === "system"
                        ? "bg-brand-gold text-white"
                        : "text-gray-700 hover:bg-gray-100"
                    }`}
                  >
                    <Database size={20} />
                    <span className="font-medium">Sistema</span>
                  </button>
                )}
              </nav>
            </div>
          </div>

          {/* Content */}
          <div className="lg:col-span-3">
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6 md:p-8">
              {/* Profile Tab */}
              {activeTab === "profile" && (
                <div>
                  <h2 className="text-xl sm:text-2xl font-semibold mb-4 sm:mb-6">
                    Informações do Perfil
                  </h2>

                  <div className="mb-6 sm:mb-8">
                    <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6">
                      <div className="relative">
                        <img
                          src={profileData.avatar}
                          alt="Avatar"
                          className="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover"
                        />
                        <button className="absolute bottom-0 right-0 w-7 h-7 sm:w-8 sm:h-8 bg-brand-gold text-white rounded-full flex items-center justify-center hover:bg-[#a5bd2e] transition-colors">
                          <Camera size={14} className="sm:w-4 sm:h-4" />
                        </button>
                      </div>
                      <div className="text-center sm:text-left">
                        <h3 className="font-semibold text-base sm:text-lg">
                          {profileData.name}
                        </h3>
                        <p className="text-xs sm:text-sm text-gray-600">
                          {profileData.email}
                        </p>
                        <button className="text-xs sm:text-sm text-brand-gold hover:underline mt-1">
                          Alterar foto
                        </button>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-6">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Nome Completo
                      </label>
                      <div className="relative">
                        <User
                          className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
                          size={20}
                        />
                        <input
                          type="text"
                          value={profileData.name}
                          onChange={(e) =>
                            setProfileData({
                              ...profileData,
                              name: e.target.value,
                            })
                          }
                          className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
                        />
                      </div>
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Email
                      </label>
                      <div className="relative">
                        <Mail
                          className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
                          size={20}
                        />
                        <input
                          type="email"
                          value={profileData.email}
                          onChange={(e) =>
                            setProfileData({
                              ...profileData,
                              email: e.target.value,
                            })
                          }
                          className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
                        />
                      </div>
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Telefone
                      </label>
                      <div className="relative">
                        <Phone
                          className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
                          size={20}
                        />
                        <input
                          type="tel"
                          value={profileData.phone}
                          onChange={(e) =>
                            setProfileData({
                              ...profileData,
                              phone: e.target.value,
                            })
                          }
                          className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
                        />
                      </div>
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Localização
                      </label>
                      <div className="relative">
                        <MapPin
                          className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
                          size={20}
                        />
                        <input
                          type="text"
                          value={profileData.location}
                          onChange={(e) =>
                            setProfileData({
                              ...profileData,
                              location: e.target.value,
                            })
                          }
                          className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
                        />
                      </div>
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Biografia
                      </label>
                      <textarea
                        value={profileData.bio}
                        onChange={(e) =>
                          setProfileData({
                            ...profileData,
                            bio: e.target.value,
                          })
                        }
                        rows={4}
                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
                      />
                    </div>

                    <div className="pt-4">
                      <Button
                        size="lg"
                        variant="secondary"
                        onClick={handleSaveProfile}
                      >
                        <Save size={20} className="mr-2" />
                        Salvar Alterações
                      </Button>
                    </div>
                  </div>
                </div>
              )}

              {/* Account Tab */}
              {activeTab === "account" && (
                <div>
                  <h2 className="text-2xl font-semibold mb-6">
                    Segurança da Conta
                  </h2>

                  <div className="space-y-6">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Senha Atual
                      </label>
                      <input
                        type="password"
                        placeholder="Digite sua senha atual"
                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
                      />
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Nova Senha
                      </label>
                      <input
                        type="password"
                        placeholder="Digite sua nova senha"
                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
                      />
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Confirmar Nova Senha
                      </label>
                      <input
                        type="password"
                        placeholder="Confirme sua nova senha"
                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
                      />
                    </div>

                    <div className="pt-4">
                      <Button size="lg" variant="secondary">
                        <Lock size={20} className="mr-2" />
                        Atualizar Senha
                      </Button>
                    </div>

                    <div className="pt-8 border-t border-gray-200">
                      <h3 className="text-lg font-semibold mb-4">
                        Autenticação em Dois Fatores
                      </h3>
                      <p className="text-gray-600 mb-4">
                        Adicione uma camada extra de segurança à sua conta
                      </p>
                      <Button size="md" variant="outline">
                        Ativar 2FA
                      </Button>
                    </div>
                  </div>
                </div>
              )}


              {/* System Tab */}
              {activeTab === "system" && isAdmin && (
                <div>
                   <h2 className="text-2xl font-semibold mb-6">
                    Configurações do Sistema
                  </h2>
                  <SystemSettings />
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
