<script lang="ts" setup>
import {ref} from 'vue'
import {Github, Globe, Linkedin, Mail, MapPin, Phone} from 'lucide-vue-next'
import type {Profile} from '@/domain/models/Profile'
import { useToast } from "vue-toastification";
const toast = useToast();
defineProps<{
  profile: Profile
}>()

const form = ref({
  name: '',
  email: '',
  message: ''
})

const isSubmitting = ref(false)

function getSocialIcon(platform) {
  const icons = {
    github: Github,
    linkedin: Linkedin,
    portfolio: Globe
  }
  return icons[platform] || Globe
}

async function handleSubmit() {
  isSubmitting.value = true

  try {
    const payload = {
      from: form.value.email,
      subject: form.value.name,
      body: form.value.message
    }

    const response = await fetch(`${import.meta.env.VITE_MAIL_API_URL}/mail`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(payload)
    })

    if (!response.ok) {
      throw new Error(`Error en el envío: ${response.status}`)
    }

    form.value = {
      name: '',
      email: '',
      message: ''
    }

    toast.success("✅ ¡Mensaje enviado correctamente! Te responderé pronto.")
  } catch (error) {
    toast.error("❌ Hubo un error al enviar el mensaje. Inténtalo de nuevo.")
  } finally {
    isSubmitting.value = false
  }
}
</script>

<template>
  <section id="contact" class="py-20 bg-white dark:bg-gray-800">
    <div class="container mx-auto px-4">
      <div class="max-w-4xl mx-auto">
        <h2 class="text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">
          Contacto
        </h2>

        <div class="grid md:grid-cols-2 gap-12">
          <!-- Contact Info -->
          <div class="space-y-8">
            <div>
              <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">
                ¡Hablemos!
              </h3>
              <p class="text-gray-600 dark:text-gray-300 mb-6">
                Estoy siempre abierto a discutir nuevas oportunidades, proyectos interesantes o simplemente charlar sobre tecnología.
              </p>
            </div>

            <div class="space-y-4">
              <div class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
                  <Mail class="w-6 h-6 text-purple-600 dark:text-purple-400" />
                </div>
                <div>
                  <div class="font-semibold text-gray-900 dark:text-white">Email</div>
                  <a :href="`mailto:${profile?.email}`" class="text-purple-600 hover:underline">
                    {{ profile?.email }}
                  </a>
                </div>
              </div>

              <div v-if="profile?.phone" class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
                  <Phone class="w-6 h-6 text-purple-600 dark:text-purple-400" />
                </div>
                <div style="display:none">
                  <div class="font-semibold text-gray-900 dark:text-white">Teléfono</div>
                  <span class="text-gray-600 dark:text-gray-300">{{ profile?.phone }}</span>
                </div>
              </div>

              <div class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
                  <MapPin class="w-6 h-6 text-purple-600 dark:text-purple-400" />
                </div>
                <div>
                  <div class="font-semibold text-gray-900 dark:text-white">Ubicación</div>
                  <span class="text-gray-600 dark:text-gray-300">{{ profile?.location }}</span>
                </div>
              </div>
            </div>

            <!-- Social Links -->
            <div class="flex space-x-4">
              <a
                  v-for="social in profile?.social"
                  :key="social.platform"
                  :href="social.url"
                target="_blank"
                class="w-12 h-12 bg-gray-100 dark:bg-gray-700 hover:bg-purple-100 dark:hover:bg-purple-900 rounded-full flex items-center justify-center transition-colors"
              >
                <component :is="getSocialIcon(social.platform)" class="w-6 h-6 text-gray-600 dark:text-gray-300"/>
              </a>
            </div>
          </div>

          <!-- Contact Form -->
          <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-8">
            <form @submit.prevent="handleSubmit" class="space-y-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Nombre
                </label>
                <input
                  v-model="form.name"
                  type="text"
                  required
                  class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                />
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Email
                </label>
                <input
                  v-model="form.email"
                  type="email"
                  required
                  class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                />
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Mensaje
                </label>
                <textarea
                  v-model="form.message"
                  rows="4"
                  required
                  class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                ></textarea>
              </div>

              <button
                type="submit"
                :disabled="isSubmitting"
                class="w-full px-6 py-3 bg-purple-600 hover:bg-purple-700 disabled:opacity-50 text-white rounded-lg font-semibold transition-colors"
              >
                {{ isSubmitting ? 'Enviando...' : 'Enviar Mensaje' }}
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

