"use client";

import React, { useState } from "react";
import { motion } from "framer-motion";
import { Send, User, Mail, MessageSquare, Sparkles } from "lucide-react";
import { ShimmerButton as MagicShimmerButton } from "@/components/magicui/shimmer-button";

// --- CONFIGURAÇÃO DE ENGENHARIA ---
// Substitua pelo seu número real: CódigoPaís + DDD + Número (sem espaços ou símbolos)
const WHATSAPP_NUMBER = "5547992742365"; 

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

/**
 * Wrapper Component: Resolve o erro de tipagem TS2322 (IntrinsicAttributes)
 * Estendemos a interface para aceitar propriedades de estilo customizadas.
 */
interface ExtendedShimmerProps extends React.ComponentProps<typeof MagicShimmerButton> {
  shimmerColor?: string;
  shimmerSize?: string;
  type?: "button" | "submit" | "reset";
  disabled?: boolean;
}

const CustomShimmerButton = ({
  children,
  className,
  shimmerColor = "#3b82f6",
  shimmerSize = "0.1em",
  ...props
}: ExtendedShimmerProps) => {
  return (
    <MagicShimmerButton
      {...props}
      className={className}
      // @ts-ignore - Ignora restrição de tipos da lib original se necessário
      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);

    await new Promise((resolve) => setTimeout(resolve, 800));

    // Definimos os emojis via Unicode Escape para máxima compatibilidade
    const icons = {
      rocket: "\u{1F680}",
      person: "\u{1F464}",
      email: "\u{1F4E7}",
      tools: "\u{1F6E0}",
      chat: "\u{1F4AC}"
    };

    const messageTemplate = `*NOVA REQUISICAO DE PROJETO*

*Origem:* Portfolio Profissional
*Prioridade:* Alta (Lead Qualificado)

---
 *CLIENTE:* ${formData.name}
 *EMAIL:* ${formData.email}
 *AREA:* ${formData.subject.toUpperCase()}

 *DESCRICAO:*
"${formData.message}"
---
_Mensagem gerada via Evandro.dev | Garuva, SC_`;

    const encodedMessage = encodeURIComponent(messageTemplate);
    const whatsappUrl = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodedMessage}`;

    window.open(whatsappUrl, "_blank", "noopener,noreferrer");
    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">
          <div className="space-y-2">
            <label className={labelStyles}>
              <User className="w-3 h-3" /> Nome_Completo
            </label>
            <input
              required
              type="text"
              placeholder="Ex: Alan Turing"
              className={inputStyles}
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            />
          </div>

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

        <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 Sênior</option>
          </select>
        </div>

        <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 sistema..."
            className={`${inputStyles} resize-none`}
            value={formData.message}
            onChange={(e) => setFormData({ ...formData, message: e.target.value })}
          />
        </div>

        <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}
          >
            <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">
                    Executar 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">
            Engenharia de Software de Alta Performance | Garuva, SC
          </p>
        </footer>
      </form>
    </section>
  );
}