import React, { useState, useEffect } from "react";
import { Button } from "./Button";
import { Input } from "./Input";
import { getFunctions } from "../services/apiService";

interface ProfessionalFormProps {
  onSubmit: (data: ProfessionalData) => void;
  onCancel: () => void;
  isLoading?: boolean;
}

export interface ProfessionalData {
  nome: string;
  email: string;
  senha: string;
  confirmarSenha: string;
  avatar?: File | null;
  funcaoId: string;
  funcoesIds: string[]; // New
  cep: string;
  rua: string;
  numero: string;
  complemento: string;
  bairro: string;
  cidade: string;
  uf: string;
  whatsapp: string;
  cpfCnpj: string;
  banco: string;
  agencia: string;
  conta: string;
  pix: string;
  carroDisponivel: string;
  possuiEstudio: string;
  qtdEstudios: string;
  tipoCartao: string;
  equipamentos: string;
  observacao: string;
  funcaoLabel?: string;
  regiao: string; // New field
}

export const ProfessionalForm: React.FC<ProfessionalFormProps> = ({
  onSubmit,
  onCancel,
  isLoading = false,
}) => {
  const [functions, setFunctions] = useState<
    Array<{ id: string; nome: string }>
  >([]);
  const [isLoadingFunctions, setIsLoadingFunctions] = useState(false);
  const [functionsError, setFunctionsError] = useState(false);
  const [isLoadingCep, setIsLoadingCep] = useState(false);
  const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
  const [formData, setFormData] = useState<ProfessionalData>({
    nome: "",
    email: "",
    senha: "",
    confirmarSenha: "",
    avatar: null,
    funcaoId: "",
    funcoesIds: [],
    cep: "",
    rua: "",
    numero: "",
    complemento: "",
    bairro: "",
    cidade: "",
    uf: "",
    whatsapp: "",
    cpfCnpj: "",
    banco: "",
    agencia: "",
    conta: "",
    pix: "",
    carroDisponivel: "nao",
    possuiEstudio: "nao",
    qtdEstudios: "0",
    tipoCartao: "",
    equipamentos: "",
    observacao: "",
    regiao: "SP", // Default to SP
  });

  useEffect(() => {
    const loadFunctions = async () => {
      setIsLoadingFunctions(true);
      setFunctionsError(false);
      try {
        const result = await getFunctions();
        if (result.data) {
          setFunctions(result.data);
        } else {
          setFunctionsError(true);
        }
      } catch (error) {
        setFunctionsError(true);
      }
      setIsLoadingFunctions(false);
    };
    loadFunctions();
  }, []);

  const handleChange = (field: keyof ProfessionalData, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setFormData((prev) => ({ ...prev, avatar: file }));
      // Create preview URL
      const reader = new FileReader();
      reader.onloadend = () => {
        setAvatarPreview(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };



  const handleCpfBlur = async () => {
    const cpf = formData.cpfCnpj.replace(/\D/g, "");
    if (cpf.length < 11) return;

    try {
      const response = await fetch(`${import.meta.env.VITE_API_URL || "http://localhost:8080"}/api/profissionais/check?cpf=${cpf}`);
      if (response.ok) {
        const data = await response.json();
        if (data.exists) {
          if (data.claimed) {
            alert(`O CPF ${cpf} já está cadastrado e possui um usuário associado. Por favor, faça login.`);
            window.location.href = "/entrar";
          } else {
            alert(`Encontramos um cadastro para o CPF ${cpf} (${data.name}). Continue para criar seu acesso.`);
            // Optional: Autofill name?
            setFormData(prev => ({ ...prev, nome: data.name || prev.nome }));
          }
        }
      }
    } catch (error) {
      console.error("Erro ao verificar CPF:", error);
    }
  };

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

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

      if (data.erro) throw new Error("CEP não encontrado");

      setFormData((prev) => ({
        ...prev,
        rua: data.logradouro || prev.rua,
        bairro: data.bairro || prev.bairro,
        cidade: data.localidade || prev.cidade,
        uf: data.uf || prev.uf,
      }));
    } catch (error) {
      console.error("Erro ao buscar CEP:", error);
      // Opcional: mostrar erro para usuário
    } finally {
      setIsLoadingCep(false);
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (isLoading) return;

    // Validação de foto de perfil
    if (!formData.avatar) {
      alert("A foto de perfil é obrigatória!");
      return;
    }

    // Validação de senha
    if (formData.senha !== formData.confirmarSenha) {
      alert("As senhas não coincidem!");
      return;
    }

    if (formData.senha.length < 6) {
      alert("A senha deve ter pelo menos 6 caracteres!");
      return;
    }

    const selectedFunction = functions.find(f => f.id === formData.funcaoId);
    onSubmit({
      ...formData,
      funcaoLabel: selectedFunction?.nome
    });
  };

  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",
  ];

  return (
    <div className="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 sm:p-8 max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
      {/* Logo dentro do card */}
      <div className="flex justify-center mb-4">
        <img
          src="/logo.png"
          alt="Photum Formaturas"
          className="h-18 sm:h-30 w-auto max-w-[200px] object-contain"
        />
      </div>

      <div className="text-center mb-6">
        <span
          className="font-bold tracking-widest uppercase text-xs sm:text-sm"
          style={{ color: "#B9CF33" }}
        >
          Cadastro de Profissional
        </span>
        <h2 className="mt-2 text-2xl sm:text-3xl font-serif font-bold text-gray-900">
          Crie sua conta profissional
        </h2>
        <p className="mt-2 text-xs sm:text-sm text-gray-600">
          Já tem uma conta?{" "}
          <button
            type="button"
            onClick={() => (window.location.href = "/entrar")}
            className="font-medium hover:opacity-80 transition-opacity"
            style={{ color: "#B9CF33" }}
          >
            Voltar ao login
          </button>
        </p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-4">
        {/* Seleção de Função (Movido para o topo) */}
        <div className="space-y-4">
            <h3 className="font-semibold text-lg text-gray-700 border-b pb-2">
            Função e Região
            </h3>
            
            {/* Region Selector */}
            <div className="mb-4">
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Região de Atuação *
              </label>
              <select
                required
                value={formData.regiao}
                onChange={(e) => handleChange("regiao", e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent"
              >
                <option value="SP">São Paulo (SP)</option>
                <option value="MG">Minas Gerais (MG)</option>
              </select>
              <p className="text-xs text-gray-500 mt-1">
                Selecione a região onde você prestará serviços principalmente.
              </p>
            </div>

            <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
                Função Profissional *
            </label>
            {isLoadingFunctions ? (
                <p className="text-sm text-gray-500">Carregando funções...</p>
            ) : functionsError ? (
                <p className="text-sm text-red-500">
                ❌ Erro ao carregar funções. Verifique se o backend está
                rodando.
                </p>
            ) : (
                <div className="flex flex-wrap gap-4 bg-gray-50 p-4 rounded-lg border border-gray-200">
                    {functions.map((func) => (
                        <label key={func.id} className="flex items-center gap-2 cursor-pointer bg-white px-3 py-2 rounded shadow-sm border border-gray-100 hover:border-brand-gold transition-colors">
                            <input
                                type="checkbox"
                                value={func.id}
                                checked={formData.funcoesIds?.includes(func.id)}
                                onChange={(e) => {
                                    const checked = e.target.checked;
                                    const currentIds = formData.funcoesIds || [];
                                    let newIds: string[] = [];
                                    if (checked) {
                                        newIds = [...currentIds, func.id];
                                    } else {
                                        newIds = currentIds.filter((id) => id !== func.id);
                                    }
                                    setFormData((prev) => ({
                                        ...prev,
                                        funcoesIds: newIds,
                                        funcaoId: newIds.length > 0 ? newIds[0] : "", // Update primary
                                        funcaoLabel: functions.find(f=>f.id === (newIds.length > 0 ? newIds[0] : ""))?.nome
                                    }));
                                }}
                                className="w-5 h-5 text-[#B9CF33] rounded border-gray-300 focus:ring-[#B9CF33]"
                            />
                            <span className="text-sm text-gray-700 font-medium">{func.nome}</span>
                        </label>
                    ))}
                </div>
            )}
            </div>
        </div>

        {/* Informações Pessoais */}
        <div className="space-y-4">
          <h3 className="font-semibold text-lg text-gray-700 border-b pb-2">
            Informações Pessoais
          </h3>

          <Input
            label="Nome Completo *"
            type="text"
            required
            value={formData.nome}
            onChange={(e) => handleChange("nome", e.target.value)}
          />

          {/* Conditional CPF Display */}
          {(!formData.funcoesIds?.every(id => functions.find(f => f.id === id)?.nome.toLowerCase().includes("pesquisa")) || (formData.funcoesIds?.length === 0)) && (
             <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                CPF ou CNPJ do Titular *
                </label>
                <input
                type="text"
                required
                value={formData.cpfCnpj}
                onChange={(e) => {
                    const value = e.target.value.replace(/\D/g, "");
                    let formatted = "";
                    if (value.length <= 11) {
                    // CPF: 000.000.000-00
                    formatted = value.replace(
                        /(\d{3})(\d{3})(\d{3})(\d{0,2})/,
                        "$1.$2.$3-$4"
                    );
                    } else {
                    // CNPJ: 00.000.000/0000-00
                    formatted = value
                        .slice(0, 14)
                        .replace(
                        /(\d{2})(\d{3})(\d{3})(\d{4})(\d{0,2})/,
                        "$1.$2.$3/$4-$5"
                        );
                    }
                    handleChange("cpfCnpj", formatted);
                }}
                onBlur={handleCpfBlur}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent"
                placeholder="000.000.000-00 ou 00.000.000/0000-00"
                />
                <p className="text-xs text-gray-500 mt-1">
                Informe seu CPF para verificarmos se você já possui cadastro.
                </p>
            </div>
          )}

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Foto de Perfil *
            </label>
            <div className="flex items-center gap-4">
              {avatarPreview ? (
                <div className="relative w-24 h-24 rounded-full overflow-hidden border-4 border-[#B9CF33] shadow-lg">
                  <img
                    src={avatarPreview}
                    alt="Preview"
                    className="w-full h-full object-cover"
                  />
                  <button
                    type="button"
                    onClick={() => {
                      setAvatarPreview(null);
                      setFormData((prev) => ({ ...prev, avatar: null }));
                    }}
                    className="absolute top-0 right-0 bg-red-500 text-white rounded-full p-1 hover:bg-red-600 transition-colors"
                    title="Remover foto"
                  >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
              ) : (
                <div className="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center border-2 border-dashed border-gray-300">
                  <svg className="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                  </svg>
                </div>
              )}
              <div className="flex-1">
                <label className="cursor-pointer inline-flex items-center px-4 py-2 bg-[#B9CF33] text-white rounded-lg hover:opacity-90 transition-opacity">
                  <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                  Escolher Foto
                  <input
                    type="file"
                    accept="image/*"
                    onChange={handleAvatarChange}
                    className="hidden"
                  />
                </label>
                <p className="text-xs text-gray-500 mt-1">PNG, JPG ou JPEG até 5MB</p>
              </div>
            </div>
          </div>

          <Input
            label="E-mail *"
            type="email"
            required
            placeholder="nome@exemplo.com"
            value={formData.email}
            onChange={(e) => handleChange("email", e.target.value)}
          />

          <Input
            label="Senha *"
            type="password"
            required
            minLength={6}
            placeholder="••••••••"
            value={formData.senha}
            onChange={(e) => handleChange("senha", e.target.value)}
          />

          <Input
            label="Confirmar Senha *"
            type="password"
            required
            minLength={6}
            placeholder="••••••••"
            value={formData.confirmarSenha}
            onChange={(e) => handleChange("confirmarSenha", e.target.value)}
          />
        </div>

        {/* Endereço */}
        {(!formData.funcoesIds?.every(id => functions.find(f => f.id === id)?.nome.toLowerCase().includes("pesquisa")) || (formData.funcoesIds?.length === 0)) && (
        <div className="space-y-4">
          <h3 className="font-semibold text-lg text-gray-700 border-b pb-2">
            Endereço
          </h3>

          <Input
            label="CEP *"
            type="text"
            required
            placeholder="00000-000"
            value={formData.cep}
            onChange={(e) => {
              const value = e.target.value.replace(/\D/g, "");
              const formatted = value.replace(/^(\d{5})(\d)/, "$1-$2");
              handleChange("cep", formatted);
            }}
            onBlur={handleCepBlur}
            maxLength={9}
          />
          {isLoadingCep && (
            <p className="text-xs text-blue-500">Buscando endereço...</p>
          )}

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div className="sm:col-span-2">
              <Input
                label="Rua *"
                type="text"
                required
                value={formData.rua}
                onChange={(e) => handleChange("rua", e.target.value)}
              />
            </div>
            <Input
              label="Número *"
              type="text"
              required
              value={formData.numero}
              onChange={(e) => {
                const value = e.target.value.replace(/\D/g, "");
                handleChange("numero", value);
              }}
            />
          </div>

          <Input
            label="Complemento"
            type="text"
            value={formData.complemento}
            onChange={(e) => handleChange("complemento", e.target.value)}
          />

          <Input
            label="Bairro *"
            type="text"
            required
            value={formData.bairro}
            onChange={(e) => handleChange("bairro", e.target.value)}
          />

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <Input
              label="Cidade *"
              type="text"
              required
              value={formData.cidade}
              onChange={(e) => handleChange("cidade", e.target.value)}
            />

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                UF *
              </label>
              <select
                required
                value={formData.uf}
                onChange={(e) => handleChange("uf", e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent"
              >
                <option value="">Selecione</option>
                {ufs.map((uf) => (
                  <option key={uf} value={uf}>
                    {uf}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>
        )}

        {/* Contato */}
        <div className="space-y-4">
          <h3 className="font-semibold text-lg text-gray-700 border-b pb-2">
            Contato
          </h3>

          <Input
            label="WhatsApp *"
            type="tel"
            required
            placeholder="(00) 00000-0000"
            value={formData.whatsapp}
            onChange={(e) => handleChange("whatsapp", e.target.value)}
            mask="phone"
          />
        </div>

        {/* Dados Bancários */}
        {(!formData.funcoesIds?.every(id => functions.find(f => f.id === id)?.nome.toLowerCase().includes("pesquisa")) || (formData.funcoesIds?.length === 0)) && (
        <>
            <div className="space-y-4">
            <h3 className="font-semibold text-lg text-gray-700 border-b pb-2">
                Dados Bancários
            </h3>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <Input
                label="Banco *"
                type="text"
                required
                value={formData.banco}
                onChange={(e) => handleChange("banco", e.target.value)}
                />
                <Input
                label="Agência *"
                type="text"
                required
                value={formData.agencia}
                onChange={(e) => {
                    const value = e.target.value.replace(/\D/g, "");
                    handleChange("agencia", value);
                }}
                />
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <Input
                label="Conta *"
                type="text"
                required
                value={formData.conta}
                onChange={(e) => handleChange("conta", e.target.value)}
                />
                <Input
                label="PIX *"
                type="text"
                required
                placeholder="E-mail, telefone, CPF ou chave aleatória"
                value={formData.pix}
                onChange={(e) => handleChange("pix", e.target.value)}
                />
            </div>
            </div>

            {/* Informações Profissionais - Resources */}
            <div className="space-y-4">
            <h3 className="font-semibold text-lg text-gray-700 border-b pb-2">
                Informações Profissionais
            </h3>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                    Carro Disponível para uso? *
                </label>
                <select
                    required
                    value={formData.carroDisponivel}
                    onChange={(e) =>
                    handleChange("carroDisponivel", e.target.value)
                    }
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent"
                >
                    <option value="sim">Sim</option>
                    <option value="nao">Não</option>
                </select>
                </div>

                <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                    Possui estúdio? *
                </label>
                <select
                    required
                    value={formData.possuiEstudio}
                    onChange={(e) => {
                    handleChange("possuiEstudio", e.target.value);
                    if (e.target.value === "nao") {
                        handleChange("qtdEstudios", "0");
                    }
                    }}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent"
                >
                    <option value="sim">Sim</option>
                    <option value="nao">Não</option>
                </select>
                </div>
            </div>

            {formData.possuiEstudio === "sim" && (
                <Input
                label="Quantidade de Estúdios *"
                type="number"
                required
                min="1"
                value={formData.qtdEstudios}
                onChange={(e) => handleChange("qtdEstudios", e.target.value)}
                />
            )}

            <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                Equipamentos
                </label>
                <textarea
                value={formData.equipamentos}
                onChange={(e) => handleChange("equipamentos", e.target.value)}
                rows={3}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent resize-none"
                placeholder="Descreva os equipamentos que você possui (câmeras, lentes, flashes, etc.)"
                />
            </div>

            <Input
                label="Tipo de Cartão (Cartão de Memória) *"
                type="text"
                required
                placeholder="Ex: SD, CF, XQD"
                value={formData.tipoCartao}
                onChange={(e) => handleChange("tipoCartao", e.target.value)}
            />

            <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                Observações
                </label>
                <textarea
                value={formData.observacao}
                onChange={(e) => handleChange("observacao", e.target.value)}
                rows={3}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent resize-none"
                placeholder="Qualquer observação relevante..."
                />
            </div>
            </div>
        </>
        )}

        {/* Botões */}
        <div className="flex justify-end gap-3 pt-6 border-t font-medium">
            <Button type="button" variant="outline" onClick={onCancel} disabled={isLoading}>
              Cancelar
            </Button>
            <Button type="submit" disabled={isLoading}>
              {isLoading ? "Cadastrando..." : "Cadastrar Profissional"}
            </Button>
          </div>
      </form>
    </div>
  );
};