"use client";

import React, { useState } from "react";
import { motion } from "framer-motion"; // Ajustado para o padrão mais estável
import { Send, User, Mail, MessageSquare, Sparkles } from "lucide-react";
// Importamos o componente original.
// Nota: Se o erro de tipo persistir, corrigiremos a interface aqui no wrapper.
import { ShimmerButton as MagicShimmerButton } from "@/components/magicui/shimmer-button";

interface FormData {
  name: string;
  email: string;
  subject: string;
  message: string;
}

/**
 * Wrapper Component para corrigir o erro de tipagem TS2322
 * Aqui garantimos que o componente aceite as cores e tamanhos
 */
interface ExtendedShimmerProps {
  children: React.ReactNode;
  className?: string;
  shimmerColor?: string;
  shimmerSize?: string;
  onClick?: () => void;
  type?: "button" | "submit" | "reset";
  disabled?: boolean;
}

const CustomShimmerButton = ({
  children,
  className,
  shimmerColor = "#3b82f6",
  shimmerSize = "0.1em",
  ...props
}: ExtendedShimmerProps) => {
  return (
    <MagicShimmerButton
      {...props}
      className={className}
      // Passamos como variáveis CSS se o componente original suportar,
      // ou apenas omitimos se o componente da MagicUI for estático.
      // @ts-ignore - Ignoramos se a lib original tiver tipos restritos
      shimmerColor={shimmerColor}
      shimmerSize={shimmerSize}
    >
      {children}
    </MagicShimmerButton>
  );
};

export default function Contact() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [formData, setFormData] = useState<FormData>({
    name: "",
    email: "",
    subject: "full-stack",
    message: "",
  });

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

    // Simulação de latência de rede (Princípio de UX Feedback)
    await new Promise((resolve) => setTimeout(resolve, 1500));

    console.log("Payload de Engenharia enviado:", formData);
    setIsSubmitting(false);
  };

  const inputStyles =
    "w-full bg-slate-950/50 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 placeholder:text-slate-600 focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/10 outline-none transition-all duration-300 font-mono text-sm";
  const labelStyles =
    "text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 flex items-center gap-2";

  return (
    <section id="contact" className="w-full max-w-2xl mx-auto p-6">
      <form onSubmit={handleSubmit} className="space-y-6">
        <div className="grid md:grid-cols-2 gap-6">
          {/* Nome */}
          <div className="space-y-2">
            <label className={labelStyles}>
              <User className="w-3 h-3" /> Nome_Completo
            </label>
            <input
              required
              type="text"
              placeholder="Digite seu nome"
              className={inputStyles}
              value={formData.name}
              onChange={(e) =>
                setFormData({ ...formData, name: e.target.value })
              }
            />
          </div>

          {/* Email */}
          <div className="space-y-2">
            <label className={labelStyles}>
              <Mail className="w-3 h-3" /> Endpoint_Email
            </label>
            <input
              required
              type="email"
              placeholder="seuemail@gmail.com"
              className={inputStyles}
              value={formData.email}
              onChange={(e) =>
                setFormData({ ...formData, email: e.target.value })
              }
            />
          </div>
        </div>

        {/* Tipo de Requisição */}
        <div className="space-y-2">
          <label className={labelStyles}>
            <Sparkles className="w-3 h-3" /> Tipo_de_Requisicao
          </label>
          <select
            className={inputStyles}
            value={formData.subject}
            onChange={(e) =>
              setFormData({ ...formData, subject: e.target.value })
            }
          >
            <option value="full-stack">Desenvolvimento Full-Stack</option>
            <option value="cloud">Cloud & Infrastructure</option>
            <option value="iot">Internet of Things (IoT)</option>
            <option value="consultancy">Consultoria Técnica</option>
          </select>
        </div>

        {/* Mensagem */}
        <div className="space-y-2">
          <label className={labelStyles}>
            <MessageSquare className="w-3 h-3" /> Descricao_do_Projeto
          </label>
          <textarea
            required
            rows={5}
            placeholder="Descreva os requisitos técnicos e objetivos do seu sistema..."
            className={`${inputStyles} resize-none`}
            value={formData.message}
            onChange={(e) =>
              setFormData({ ...formData, message: e.target.value })
            }
          />
        </div>

        {/* Botão de Submissão */}
        <motion.div
          whileHover={{ scale: 1.01 }}
          whileTap={{ scale: 0.99 }}
          className="pt-4"
        >
          <CustomShimmerButton
            type="submit"
            className="w-full h-14 rounded-xl shadow-2xl"
            shimmerColor="#3b82f6"
            shimmerSize="0.2em"
            disabled={isSubmitting}
          >
            {/* CONTAINER INTERNO (FAIL-SAFE): 
    Forçamos um novo contexto flex-row aqui. 
    O 'w-full' e 'h-full' garantem que ele ocupe todo o botão.
  */}
            <div className="flex flex-row items-center justify-center gap-3 w-full h-full">
              {isSubmitting ? (
                <div className="w-6 h-6 border-2 border-white/30 border-t-white rounded-full animate-spin" />
              ) : (
                <>
                  <span className="text-white font-bold tracking-widest uppercase text-sm leading-none">
                    Enviar request
                  </span>
                  <Send className="w-4 h-4 text-white" />
                </>
              )}
            </div>
          </CustomShimmerButton>
        </motion.div>

        <footer className="pt-4">
          <p className="text-[10px] text-center text-slate-600 font-mono uppercase tracking-tighter">
            Qualidade ponta-ponta garantida | Garuva, SC
          </p>
        </footer>
      </form>
    </section>
  );
}