import React, { useState, useEffect } from "react";
import {
  Users,
  Camera,
  Mail,
  Phone,
  MapPin,
  Star,
  Plus,
  Search,
  Filter,
  User,
  Upload,
  X,
  Video,
  UserCheck,
  Car,
  Building,
  CreditCard,
  Trash2,
  Edit2,
  AlertTriangle,
  Check,
  DollarSign,
} from "lucide-react";
import { Button } from "../components/Button";
import {
  getFunctions,
  createProfessional,
  getProfessionals,
  updateProfessional,
  deleteProfessional,
  getUploadURL,
  uploadFileToSignedUrl,
} from "../services/apiService";
import { useAuth } from "../contexts/AuthContext";
import { Professional, CreateProfessionalDTO } from "../types";

export const TeamPage: React.FC = () => {
  const { user, token: contextToken } = useAuth();
  const token = contextToken || "";

  // Lists
  const [professionals, setProfessionals] = useState<Professional[]>([]);
  const [roles, setRoles] = useState<{ id: string; nome: string }[]>([]);

  // Loading States
  const [isLoading, setIsLoading] = useState(true);
  const [isBackendDown, setIsBackendDown] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isLoadingCep, setIsLoadingCep] = useState(false);

  // Filters
  const [searchTerm, setSearchTerm] = useState("");
  const [roleFilter, setRoleFilter] = useState("all");
  const [statusFilter, setStatusFilter] = useState("all");

  // Selection & Modals
  const [selectedProfessional, setSelectedProfessional] = useState<Professional | null>(null);
  const [showAddModal, setShowAddModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [professionalToDelete, setProfessionalToDelete] = useState<Professional | null>(null);
  const [viewProfessional, setViewProfessional] = useState<Professional | null>(null);

  // Form State
  const initialFormState: CreateProfessionalDTO = {
    nome: "",
    funcao_profissional_id: "",
    email: "",
    whatsapp: "",
    cpf_cnpj_titular: "",
    endereco: "",
    cidade: "",
    uf: "",
    banco: "",
    agencia: "",
    conta_pix: "",
    tipo_cartao: "",
    carro_disponivel: false,
    tem_estudio: false,
    qtd_estudio: 0,
    observacao: "",
    qual_tec: 0,
    educacao_simpatia: 0,
    desempenho_evento: 0,
    disp_horario: 0,
    media: 0,
    tabela_free: "",
    extra_por_equipamento: false,
    equipamentos: "",
    avatar_url: "",
  };

  const [formData, setFormData] = useState<CreateProfessionalDTO>(initialFormState);
  const [avatarFile, setAvatarFile] = useState<File | null>(null);
  const [avatarPreview, setAvatarPreview] = useState<string>("");

  // Fetch Data
  useEffect(() => {
    fetchData();
  }, [token]);

  const fetchData = async () => {
    setIsLoading(true);
    try {
      const [rolesData, prosData] = await Promise.all([
        getFunctions(),
        getProfessionals(token),
      ]);

      if (rolesData.data) setRoles(rolesData.data);
      if (prosData.data) {
        setProfessionals(prosData.data);
        setIsBackendDown(false);
      } else if (prosData.error) {
        console.error("Error fetching professionals:", prosData.error);
        if (prosData.isBackendDown) setIsBackendDown(true);
      }
    } catch (error) {
      console.error("Error fetching data:", error);
    } finally {
      setIsLoading(false);
    }
  };

  // Helpers
  const GenericAvatar = "https://ui-avatars.com/api/?background=random";

  const ufs = [
    "AC", "AL", "AP", "AM", "BA", "CE", "DF", "ES", "GO", "MA", "MT", "MS", "MG", "PA", "PB", "PR", "PE", "PI", "RJ", "RN", "RS", "RO", "RR", "SC", "SP", "SE", "TO"
  ];

  const maskPhone = (value: string) => {
    return value
      .replace(/\D/g, "")
      .replace(/^(\d{2})(\d)/g, "($1) $2")
      .replace(/(\d)(\d{4})$/, "$1-$2")
      .slice(0, 15);
  };

  const maskCpfCnpj = (value: string) => {
    const clean = value.replace(/\D/g, "");
    if (clean.length <= 11) {
      return clean
        .replace(/(\d{3})(\d)/, "$1.$2")
        .replace(/(\d{3})(\d)/, "$1.$2")
        .replace(/(\d{3})(\d{1,2})/, "$1-$2")
        .replace(/(-\d{2})\d+?$/, "$1"); // Captures 11 digits
    } else {
      return clean
        .replace(/^(\d{2})(\d)/, "$1.$2")
        .replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3")
        .replace(/\.(\d{3})(\d)/, ".$1/$2")
        .replace(/(\d{4})(\d)/, "$1-$2")
        .replace(/(-\d{2})\d+?$/, "$1") // Captures 14 digits
        .slice(0, 18);
    }
  };

  const calculateMedia = (ratings: {
    qual_tec: number;
    educacao_simpatia: number;
    desempenho_evento: number;
    disp_horario: number;
  }) => {
    const weightedScore =
      ratings.qual_tec * 2 +
      ratings.educacao_simpatia +
      ratings.desempenho_evento +
      ratings.disp_horario;
    return weightedScore / 5;
  };

  const handleCepBlur = async () => {
    const cep = formData.cep?.replace(/\D/g, "") || "";
    if (cep.length !== 8) return;

    setIsLoadingCep(true);
    try {
      const response = await fetch(
        `https://cep.awesomeapi.com.br/json/${cep}`
      );
      if (!response.ok) throw new Error("CEP não encontrado");
      const data = await response.json();

      setFormData((prev) => ({
        ...prev,
        endereco: `${data.address || ""} ${data.district ? `- ${data.district}` : ""}`.trim() || prev.endereco,
        cidade: data.city || prev.cidade,
        uf: data.state || prev.uf,
      }));
    } catch (error) {
      console.error("Erro ao buscar CEP:", error);
    } finally {
      setIsLoadingCep(false);
    }
  };

  // Handlers
  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setAvatarFile(file);
      const reader = new FileReader();
      reader.onloadend = () => {
        setAvatarPreview(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  const removeAvatar = () => {
    setAvatarFile(null);
    setAvatarPreview("");
    setFormData((prev) => ({ ...prev, avatar_url: "" }));
  };

  const resetForm = () => {
    setFormData(initialFormState);
    setAvatarFile(null);
    setAvatarPreview("");
    setSelectedProfessional(null);
  };

  const handleEditClick = (professional: Professional) => {
    setFormData({
      nome: professional.nome,
      funcao_profissional_id: professional.funcao_profissional_id,
      email: professional.email || "",
      whatsapp: professional.whatsapp || "",
      cpf_cnpj_titular: professional.cpf_cnpj_titular || "",
      endereco: professional.endereco || "",
      cidade: professional.cidade || "",
      uf: professional.uf || "",
      cep: professional.cep || "",
      banco: professional.banco || "",
      agencia: professional.agencia || "",
      conta_pix: professional.conta_pix || "",
      tipo_cartao: professional.tipo_cartao || "",
      carro_disponivel: professional.carro_disponivel || false,
      tem_estudio: professional.tem_estudio || false,
      qtd_estudio: professional.qtd_estudio || 0,
      observacao: professional.observacao || "",
      qual_tec: professional.qual_tec || 0,
      educacao_simpatia: professional.educacao_simpatia || 0,
      desempenho_evento: professional.desempenho_evento || 0,
      disp_horario: professional.disp_horario || 0,
      tabela_free: professional.tabela_free || "",
      extra_por_equipamento: professional.extra_por_equipamento || false,
      equipamentos: professional.equipamentos || "",
      avatar_url: professional.avatar_url || "",
      media: professional.media || 0,
    });
    setAvatarPreview(professional.avatar_url || (professional.avatar ?? GenericAvatar));
    setAvatarFile(null);
    setSelectedProfessional(professional); // Storing the professional being edited here
    setShowEditModal(true);
  };

  const handleViewClick = (professional: Professional) => {
    setViewProfessional(professional);
  };

  // Update Media when ratings change
  useEffect(() => {
    const newMedia = calculateMedia({
      qual_tec: formData.qual_tec || 0,
      educacao_simpatia: formData.educacao_simpatia || 0,
      desempenho_evento: formData.desempenho_evento || 0,
      disp_horario: formData.disp_horario || 0,
    });
    // Only update if it's different to avoid loops/excessive renders, though optional in this simple case
    setFormData((prev) => {
      if (prev.media === newMedia) return prev;
      return { ...prev, media: newMedia };
    });
  }, [
    formData.qual_tec,
    formData.educacao_simpatia,
    formData.desempenho_evento,
    formData.disp_horario,
  ]);

  const handleSubmit = async (e: React.FormEvent, isEdit: boolean) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      let finalAvatarUrl = formData.avatar_url;

      // Handle Avatar Upload if new file selected
      if (avatarFile) {
        const uploadRes = await getUploadURL(avatarFile.name, avatarFile.type);
        if (uploadRes.data) {
          await uploadFileToSignedUrl(uploadRes.data.upload_url, avatarFile);
          finalAvatarUrl = uploadRes.data.public_url;
        }
      }

      const payload = { ...formData, avatar_url: finalAvatarUrl };

      if (isEdit && selectedProfessional) {
        await updateProfessional(selectedProfessional.id, payload, token);
        alert("Profissional atualizado com sucesso!");
      } else {
        await createProfessional(payload, token);
        alert("Profissional criado com sucesso!");
      }

      setShowAddModal(false);
      setShowEditModal(false);
      fetchData();
      // Reset form
      // Reset form
      resetForm();
    } catch (error) {
      console.error("Error submitting form:", error);
      alert("Erro ao salvar profissional. Verifique o console.");
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleDelete = async () => {
    if (!professionalToDelete) return;
    try {
      await deleteProfessional(professionalToDelete.id, token);
      setShowDeleteModal(false);
      setProfessionalToDelete(null);
      fetchData();
    } catch (error) {
      console.error("Error deleting professional:", error);
      alert("Erro ao excluir profissional.");
    }
  };

  // Helper renderers
  const getRoleName = (id: string) => {
    return roles.find((r) => r.id === id)?.nome || "Desconhecido";
  };

  const getRoleIcon = (roleName: string) => {
    const lower = roleName.toLowerCase();
    if (lower.includes("foto")) return Camera;
    if (lower.includes("video") || lower.includes("cine")) return Video;
    return UserCheck;
  };

  // Filter Logic
  const filteredProfessionals = professionals.filter((p) => {
    const matchesSearch =
      p.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
      (p.email && p.email.toLowerCase().includes(searchTerm.toLowerCase()));

    // Adjusted role logic since we have ID in database but names in roles array
    const roleName = getRoleName(p.funcao_profissional_id);
    const matchesRole = roleFilter === "all" || roleName === roleFilter;

    // Hide users with unknown roles
    if (roleName === "Desconhecido") return false;

    return matchesSearch && matchesRole;
  });

  const stats = {
    total: professionals.length,
    photographers: professionals.filter(p => getRoleName(p.funcao_profissional_id).toLowerCase().includes("fot") || getRoleName(p.funcao_profissional_id).toLowerCase().includes("foto")).length,
    cine: professionals.filter(p => getRoleName(p.funcao_profissional_id).toLowerCase().includes("cine") || getRoleName(p.funcao_profissional_id).toLowerCase().includes("video")).length,
    recep: professionals.filter(p => getRoleName(p.funcao_profissional_id).toLowerCase().includes("recep")).length,
  };

  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">
            Equipe
          </h1>
          <p className="text-sm sm:text-base text-gray-600">
            Gerencie sua equipe de profissionais
          </p>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 md:gap-6 mb-6 sm:mb-8">
          {roles.map(role => {
            const count = professionals.filter(p => p.funcao_profissional_id === role.id).length;
            const RoleIcon = getRoleIcon(role.nome);

            // Optional: Customize colors based on role or just cycle/default
            // For simplicity using existing logic or default
            let iconColorClass = "text-brand-black";
            if (role.nome.toLowerCase().includes("foto")) iconColorClass = "text-brand-gold";
            else if (role.nome.toLowerCase().includes("video") || role.nome.toLowerCase().includes("cine")) iconColorClass = "text-blue-600";
            else if (role.nome.toLowerCase().includes("recep")) iconColorClass = "text-purple-600";

            return (
              <div key={role.id} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-gray-600 mb-1">Total de {role.nome}s</p>
                    <p className="text-3xl font-bold text-brand-black">{count}</p>
                  </div>
                  <RoleIcon className={iconColorClass} size={32} />
                </div>
              </div>
            );
          })}
        </div>

        {/* Filters and Search */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
          <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
            <div className="relative w-full md:w-96">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
              <input
                type="text"
                placeholder="Buscar por nome ou email..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
              />
            </div>

            <Button onClick={() => {
              resetForm();
              setShowAddModal(true);
            }}>
              <Plus size={20} className="mr-2" />
              Adicionar Profissional
            </Button>
          </div>
        </div>

        {/* List */}
        {isLoading ? (
          <div className="text-center py-12">Carregando...</div>
        ) : (
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-gray-50 border-b border-gray-200">
                  <tr>
                    <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profissional</th>
                    <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Função</th>
                    <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contato</th>
                    <th className="px-6 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  {filteredProfessionals.map((p) => {
                    const roleName = getRoleName(p.funcao_profissional_id);
                    const RoleIcon = getRoleIcon(roleName);
                    return (
                      <tr key={p.id} className="hover:bg-gray-50 cursor-pointer" onClick={() => handleViewClick(p)}>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <img
                              className="h-10 w-10 rounded-full object-cover"
                              src={p.avatar_url || p.avatar || GenericAvatar}
                              alt={p.nome}
                            />
                            <div className="ml-4">
                              <div className="text-sm font-medium text-gray-900">{p.nome}</div>
                              <div className="text-sm text-gray-500 flex items-center gap-1">
                                <Star size={12} className="text-brand-gold fill-current" />
                                {p.media ? p.media.toFixed(1) : "N/A"}
                              </div>
                            </div>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center text-sm text-gray-900">
                            <RoleIcon size={16} className="mr-2 text-gray-400" />
                            {roleName}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-900">{p.whatsapp}</div>
                          <div className="text-sm text-gray-500">{p.email}</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                          <button onClick={(e) => {
                            e.stopPropagation();
                            handleEditClick(p);
                          }} className="text-indigo-600 hover:text-indigo-900 mr-4">
                            <Edit2 size={18} />
                          </button>
                          <button onClick={(e) => {
                            e.stopPropagation();
                            setProfessionalToDelete(p);
                            setShowDeleteModal(true);
                          }} className="text-red-600 hover:text-red-900">
                            <Trash2 size={18} />
                          </button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </div>

      {/* Add/Edit Modal */}
      {(showAddModal || showEditModal) && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto">
          <div className="bg-white rounded-lg max-w-4xl w-full p-8 max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold font-serif">{showEditModal ? "Editar Profissional" : "Novo Profissional"}</h2>
              <button onClick={() => { setShowAddModal(false); setShowEditModal(false); }}><X size={24} /></button>
            </div>

            <form onSubmit={(e) => handleSubmit(e, showEditModal)} className="space-y-6">

              {/* Photo */}
              <div className="flex justify-center mb-6">
                <div className="relative">
                  <div className="w-32 h-32 rounded-full overflow-hidden bg-gray-100 border-2 border-dashed border-gray-300 flex items-center justify-center">
                    {avatarPreview ? (
                      <img src={avatarPreview} alt="Preview" className="w-full h-full object-cover" />
                    ) : (
                      <User size={48} className="text-gray-400" />
                    )}
                  </div>
                  <label className="absolute bottom-0 right-0 bg-brand-gold text-white p-2 rounded-full cursor-pointer hover:bg-brand-gold/90 transition-colors shadow-lg">
                    <Camera size={16} />
                    <input type="file" accept="image/*" className="hidden" onChange={handleAvatarChange} />
                  </label>
                  {avatarPreview && (
                    <button type="button" onClick={removeAvatar} className="absolute top-0 right-0 bg-red-500 text-white p-1 rounded-full shadow-lg hover:bg-red-600">
                      <X size={12} />
                    </button>
                  )}
                </div>
              </div>

              {/* Basic Info */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700">Nome *</label>
                  <input required type="text" value={formData.nome} onChange={e => setFormData({ ...formData, nome: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Função *</label>
                  <select required value={formData.funcao_profissional_id} onChange={e => setFormData({ ...formData, funcao_profissional_id: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border">
                    <option value="">Selecione...</option>
                    {roles.map(r => <option key={r.id} value={r.id}>{r.nome}</option>)}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Email</label>
                  <input type="email" value={formData.email} onChange={e => setFormData({ ...formData, email: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">WhatsApp</label>
                  <input type="text" value={formData.whatsapp} onChange={e => setFormData({ ...formData, whatsapp: maskPhone(e.target.value) })} maxLength={15} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">CPF/CNPJ Titular</label>
                  <input type="text" value={formData.cpf_cnpj_titular} onChange={e => setFormData({ ...formData, cpf_cnpj_titular: maskCpfCnpj(e.target.value) })} maxLength={18} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
                </div>
              </div>

              <h3 className="text-lg font-medium text-gray-900 border-b pb-2 mt-4">Endereço</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700">CEP</label>
                  <div className="relative">
                    <input
                      type="text"
                      maxLength={9}
                      value={formData.cep || ""}
                      onChange={(e) => {
                        const val = e.target.value.replace(/\D/g, "").replace(/^(\d{5})(\d)/, "$1-$2");
                        setFormData({ ...formData, cep: val });
                      }}
                      onBlur={handleCepBlur}
                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border"
                      placeholder="00000-000"
                    />
                    {isLoadingCep && <span className="absolute right-2 top-3 text-xs text-gray-400">Buscando...</span>}
                  </div>
                </div>
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700">Endereço Completo</label>
                  <input type="text" value={formData.endereco} onChange={e => setFormData({ ...formData, endereco: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Cidade</label>
                  <input type="text" value={formData.cidade} onChange={e => setFormData({ ...formData, cidade: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">UF</label>
                  <select value={formData.uf} onChange={e => setFormData({ ...formData, uf: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border">
                    <option value="">UF</option>
                    {ufs.map(uf => <option key={uf} value={uf}>{uf}</option>)}
                  </select>
                </div>
              </div>

              {/* Banking */}
              <h3 className="text-lg font-medium text-gray-900 border-b pb-2 mt-4">Dados Bancários</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700">Banco</label>
                  <input type="text" value={formData.banco} onChange={e => setFormData({ ...formData, banco: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Agência</label>
                  <input type="text" value={formData.agencia} onChange={e => setFormData({ ...formData, agencia: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Chave Pix / Conta</label>
                  <input type="text" value={formData.conta_pix} onChange={e => setFormData({ ...formData, conta_pix: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Tipo Cartão</label>
                  <input type="text" value={formData.tipo_cartao} onChange={e => setFormData({ ...formData, tipo_cartao: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" placeholder="SD, XQD..." />
                </div>
              </div>

              {/* Resources */}
              <h3 className="text-lg font-medium text-gray-900 border-b pb-2 mt-4">Recursos</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <label className="flex items-center gap-2">
                  <input type="checkbox" checked={formData.carro_disponivel} onChange={e => setFormData({ ...formData, carro_disponivel: e.target.checked })} />
                  <span>Carro Disponível</span>
                </label>
                <label className="flex items-center gap-2">
                  <input type="checkbox" checked={formData.tem_estudio} onChange={e => setFormData({ ...formData, tem_estudio: e.target.checked })} />
                  <span>Possui Estúdio</span>
                </label>
                {formData.tem_estudio && (
                  <div>
                    <label className="block text-sm font-medium text-gray-700">Qtd Estúdios</label>
                    <input type="number" min="0" value={formData.qtd_estudio} onChange={e => setFormData({ ...formData, qtd_estudio: Math.max(0, parseInt(e.target.value)) })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
                  </div>
                )}
              </div>

              {/* Ratings */}
              <h3 className="text-lg font-medium text-gray-900 border-b pb-2 mt-4">Avaliações e Valores</h3>
              <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                <div>
                  <label className="block text-xs font-medium text-gray-700 mb-1 leading-tight">Qual. Técnica / Aparência</label>
                  <input type="number" min="0" max="5" step="1" value={formData.qual_tec} onChange={e => setFormData({ ...formData, qual_tec: parseInt(e.target.value) || 0 })} className="block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
                </div>
                <div>
                  <label className="block text-xs font-medium text-gray-700 mb-1 leading-tight">Simpatia</label>
                  <input type="number" min="0" max="5" step="1" value={formData.educacao_simpatia} onChange={e => setFormData({ ...formData, educacao_simpatia: parseInt(e.target.value) || 0 })} className="block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
                </div>
                <div>
                  <label className="block text-xs font-medium text-gray-700 mb-1 leading-tight">Desempenho</label>
                  <input type="number" min="0" max="5" step="1" value={formData.desempenho_evento} onChange={e => setFormData({ ...formData, desempenho_evento: parseInt(e.target.value) || 0 })} className="block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
                </div>
                <div>
                  <label className="block text-xs font-medium text-gray-700 mb-1 leading-tight">Disp. Horário</label>
                  <input type="number" min="0" max="5" step="1" value={formData.disp_horario} onChange={e => setFormData({ ...formData, disp_horario: parseInt(e.target.value) || 0 })} className="block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
                </div>
                <div className="bg-gray-100 p-2 rounded text-center flex flex-col justify-center">
                  <span className="block text-xs text-gray-500 font-bold uppercase tracking-wider">Média</span>
                  <span className="text-2xl font-bold text-brand-gold">{formData.media ? (typeof formData.media === 'number' ? formData.media.toFixed(1) : parseFloat(formData.media).toFixed(1)) : "0.0"}</span>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700">Tabela Free</label>
                  <input type="text" value={formData.tabela_free} onChange={e => setFormData({ ...formData, tabela_free: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Equipamentos</label>
                  <textarea rows={3} value={formData.equipamentos} onChange={e => setFormData({ ...formData, equipamentos: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border" placeholder="Liste os equipamentos..." />
                  <label className="flex items-center gap-2 mt-2">
                    <input type="checkbox" checked={formData.extra_por_equipamento} onChange={e => setFormData({ ...formData, extra_por_equipamento: e.target.checked })} />
                    <span>Extra por Equipamento</span>
                  </label>
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700">Observações</label>
                <textarea rows={3} value={formData.observacao} onChange={e => setFormData({ ...formData, observacao: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"></textarea>
              </div>

              <div className="flex justify-end gap-4 pt-4">
                <Button type="button" variant="secondary" onClick={() => { setShowAddModal(false); setShowEditModal(false); }}>Cancelar</Button>
                <Button type="submit" disabled={isSubmitting}>
                  {isSubmitting ? "Salvando..." : showEditModal ? "Salvar Alterações" : "Criar Profissional"}
                </Button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Delete Confirmation Modal */}
      {showDeleteModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg max-w-md w-full p-6 text-center">
            <AlertTriangle className="mx-auto text-red-500 mb-4" size={48} />
            <h3 className="text-xl font-bold mb-2">Confirmar Exclusão</h3>
            <p className="text-gray-600 mb-6">Tem certeza que deseja excluir <strong>{professionalToDelete?.nome}</strong>? Esta ação não pode ser desfeita.</p>
            <div className="flex justify-center gap-4">
              <Button variant="secondary" onClick={() => setShowDeleteModal(false)}>Cancelar</Button>
              <Button variant="primary" onClick={handleDelete} className="bg-red-600 hover:bg-red-700 text-white border-none">Excluir</Button>
            </div>
          </div>
        </div>
      )}

      {/* View Modal */}
      {viewProfessional && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto">
          <div className="bg-white rounded-xl max-w-2xl w-full p-0 overflow-hidden shadow-2xl">
            {/* Header / Avatar Section */}
            <div className="relative pt-12 pb-6 px-8 text-center bg-gradient-to-b from-gray-50 to-white">
              <button
                onClick={() => setViewProfessional(null)}
                className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors"
              >
                <X size={24} />
              </button>

              <div className="relative inline-block mb-4">
                <div className="w-32 h-32 rounded-full p-[3px] bg-gradient-to-tr from-brand-gold to-purple-600">
                  <img
                    className="w-full h-full rounded-full object-cover border-4 border-white"
                    src={viewProfessional.avatar_url || viewProfessional.avatar || GenericAvatar}
                    alt={viewProfessional.nome}
                  />
                </div>
              </div>

              <h2 className="text-3xl font-serif font-bold text-gray-900 mb-2">{viewProfessional.nome}</h2>

              <div className="flex justify-center items-center gap-3">
                <span className="px-3 py-1 rounded-full bg-brand-gold/10 text-brand-gold-dark text-sm font-semibold border border-brand-gold/20 flex items-center gap-2">
                  {(() => {
                    const RoleIcon = getRoleIcon(getRoleName(viewProfessional.funcao_profissional_id));
                    return <RoleIcon size={14} />;
                  })()}
                  {getRoleName(viewProfessional.funcao_profissional_id)}
                </span>
                {viewProfessional.media !== undefined && viewProfessional.media !== null && (
                  <span className="px-3 py-1 rounded-full bg-yellow-100 text-yellow-700 text-sm font-semibold border border-yellow-200 flex items-center gap-1">
                    <Star size={14} className="fill-current" />
                    {typeof viewProfessional.media === 'number' ? viewProfessional.media.toFixed(1) : parseFloat(viewProfessional.media).toFixed(1)}
                  </span>
                )}
              </div>
            </div>

            <div className="p-8">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                {/* Personal Data */}
                <div>
                  <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2 mb-4 border-b pb-2">
                    <User size={20} className="text-brand-gold" />
                    Dados Pessoais
                  </h3>
                  <div className="space-y-4">
                    {viewProfessional.email && (
                      <div className="flex items-start gap-3 text-gray-600">
                        <Mail size={18} className="mt-1 shrink-0 text-gray-400" />
                        <span className="break-all">{viewProfessional.email}</span>
                      </div>
                    )}
                    {viewProfessional.whatsapp && (
                      <div className="flex items-start gap-3 text-gray-600">
                        <Phone size={18} className="mt-1 shrink-0 text-gray-400" />
                        <span>{viewProfessional.whatsapp}</span>
                      </div>
                    )}
                    {(viewProfessional.cidade || viewProfessional.uf) && (
                      <div className="flex items-start gap-3 text-gray-600">
                        <MapPin size={18} className="mt-1 shrink-0 text-gray-400" />
                        <span>{viewProfessional.cidade}{viewProfessional.cidade && viewProfessional.uf ? ", " : ""}{viewProfessional.uf}</span>
                      </div>
                    )}
                    {viewProfessional.endereco && (
                      <div className="flex items-start gap-3 text-gray-600">
                        <Building size={18} className="mt-1 shrink-0 text-gray-400" />
                        <span className="text-sm">{viewProfessional.endereco}</span>
                      </div>
                    )}
                  </div>
                </div>

                {/* Equipment & Skills */}
                <div>
                  <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2 mb-4 border-b pb-2">
                    <Camera size={20} className="text-brand-gold" />
                    Equipamentos
                  </h3>
                  <div className="bg-gray-50 rounded-lg p-4 text-sm text-gray-700 whitespace-pre-wrap leading-relaxed border border-gray-100">
                    {viewProfessional.equipamentos || "Nenhum equipamento listado."}
                  </div>
                  <div className="mt-4 flex flex-wrap gap-2">
                    {viewProfessional.carro_disponivel && (
                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        <Car size={12} className="mr-1" /> Carro Próprio
                      </span>
                    )}
                    {viewProfessional.tem_estudio && (
                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                        <Building size={12} className="mr-1" /> Estúdio ({viewProfessional.qtd_estudio})
                      </span>
                    )}
                    {viewProfessional.extra_por_equipamento && (
                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                        <CreditCard size={12} className="mr-1" /> Extra p/ Equip.
                      </span>
                    )}
                  </div>
                </div>
              </div>

              {/* Performance / Observations */}
              {/* Financial Data */}
              <div className="mt-8">
                <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2 mb-4 border-b pb-2">
                  <DollarSign size={20} className="text-brand-gold" />
                  Dados Financeiros
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                  <div className="bg-gray-50 p-3 rounded-lg border border-gray-100">
                    <span className="block text-gray-500 text-xs uppercase tracking-wider font-semibold mb-1">CPF/CNPJ Titular</span>
                    <span className="font-medium text-gray-900">{viewProfessional.cpf_cnpj_titular || "-"}</span>
                  </div>
                  <div className="bg-gray-50 p-3 rounded-lg border border-gray-100">
                    <span className="block text-gray-500 text-xs uppercase tracking-wider font-semibold mb-1">Chave Pix</span>
                    <span className="font-medium text-gray-900">{viewProfessional.conta_pix || "-"}</span>
                  </div>
                  <div className="bg-gray-50 p-3 rounded-lg border border-gray-100">
                    <span className="block text-gray-500 text-xs uppercase tracking-wider font-semibold mb-1">Banco / Agência</span>
                    <span className="font-medium text-gray-900">
                      {viewProfessional.banco || "-"}{viewProfessional.agencia ? ` / ${viewProfessional.agencia}` : ""}
                    </span>
                  </div>
                  <div className="bg-gray-50 p-3 rounded-lg border border-gray-100">
                    <span className="block text-gray-500 text-xs uppercase tracking-wider font-semibold mb-1">Tabela Free</span>
                    <span className="font-medium text-gray-900">R$ {viewProfessional.tabela_free || "0,00"}</span>
                  </div>
                  <div className="bg-gray-50 p-3 rounded-lg border border-gray-100">
                    <span className="block text-gray-500 text-xs uppercase tracking-wider font-semibold mb-1">Tipo de Cartão</span>
                    <span className="font-medium text-gray-900">{viewProfessional.tipo_cartao || "-"}</span>
                  </div>
                </div>
              </div>

              {/* Performance / Observations */}
              <div className="mt-8 bg-brand-gold/5 rounded-xl p-6 border border-brand-gold/10">
                <div className="flex items-start gap-4">
                  <div className="p-2 bg-white rounded-full text-brand-gold shadow-sm">
                    <Star size={24} className="text-brand-gold fill-brand-gold" />
                  </div>
                  <div className="w-full">
                    <h4 className="text-lg font-bold text-gray-900 mb-4">Performance & Avaliação</h4>

                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                      <div className="text-center bg-white p-2 rounded shadow-sm">
                        <div className="text-xs text-gray-500 mb-1">Técnica</div>
                        <div className="font-bold text-lg text-gray-800">{viewProfessional.qual_tec || 0}</div>
                      </div>
                      <div className="text-center bg-white p-2 rounded shadow-sm">
                        <div className="text-xs text-gray-500 mb-1">Simpatia</div>
                        <div className="font-bold text-lg text-gray-800">{viewProfessional.educacao_simpatia || 0}</div>
                      </div>
                      <div className="text-center bg-white p-2 rounded shadow-sm">
                        <div className="text-xs text-gray-500 mb-1">Desempenho</div>
                        <div className="font-bold text-lg text-gray-800">{viewProfessional.desempenho_evento || 0}</div>
                      </div>
                      <div className="text-center bg-white p-2 rounded shadow-sm">
                        <div className="text-xs text-gray-500 mb-1">Horário</div>
                        <div className="font-bold text-lg text-gray-800">{viewProfessional.disp_horario || 0}</div>
                      </div>
                    </div>

                    <p className="text-gray-600 text-sm leading-relaxed mb-2">
                      Média Geral: <strong>{viewProfessional.media ? (typeof viewProfessional.media === 'number' ? viewProfessional.media.toFixed(1) : parseFloat(viewProfessional.media).toFixed(1)) : "N/A"}</strong>
                    </p>
                    {viewProfessional.observacao && (
                      <div className="mt-3 text-sm text-gray-500 italic border-t border-brand-gold/10 pt-2">
                        "{viewProfessional.observacao}"
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>

            {/* Footer */}
            <div className="p-6 bg-gray-50 border-t border-gray-100 flex justify-end gap-3">
              <Button
                variant="secondary"
                onClick={() => setViewProfessional(null)}
              >
                Fechar
              </Button>
              <Button
                onClick={() => {
                  setViewProfessional(null);
                  handleEditClick(viewProfessional);
                }}
              >
                <Edit2 size={16} className="mr-2" />
                Editar Dados
              </Button>
            </div>
          </div>
        </div>
      )}

    </div>
  );
};