'use client';

import { useState } from "react";
import type { Metadata } from "next";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
import Button from "@/components/Button";

export default function ContactPage() {
  const [formData, setFormData] = useState({
    fullName: '',
    email: '',
    subject: '',
    message: '',
    notRobot: false,
  });
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData(prev => ({ ...prev, notRobot: e.target.checked }));
  };

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

    // Simulation d'envoi
    await new Promise(resolve => setTimeout(resolve, 1500));

    console.log('Form submitted:', formData);
    alert('Votre message a été envoyé avec succès !');

    // Reset form
    setFormData({
      fullName: '',
      email: '',
      subject: '',
      message: '',
      notRobot: false,
    });
    setIsSubmitting(false);
  };

  return (
    <div className="py-12">
      {/* Hero Section */}
      <section className="text-center mb-16">
        <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
          Contactez-nous
        </h1>
        <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
          Une question, une suggestion ? Notre équipe est là pour vous accompagner.
        </p>
      </section>

      <div className="grid lg:grid-cols-2 gap-12 mb-16">
        {/* Contact Form */}
        <div>
          <Card className="shadow-xl">
            <CardHeader className="bg-gradient-to-r from-primary-50 to-green-50">
              <CardTitle className="text-2xl text-primary-800">
                Envoyez-nous un message
              </CardTitle>
            </CardHeader>
            <CardContent className="pt-6">
              <form onSubmit={handleSubmit} className="space-y-6">
                {/* Nom complet */}
                <div>
                  <label htmlFor="fullName" className="block text-sm font-medium text-gray-700 mb-2">
                    Nom complet <span className="text-red-500">*</span>
                  </label>
                  <input
                    id="fullName"
                    name="fullName"
                    type="text"
                    required
                    value={formData.fullName}
                    onChange={handleChange}
                    placeholder="Votre nom et prénom"
                    className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                  />
                </div>

                {/* Email */}
                <div>
                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
                    Email <span className="text-red-500">*</span>
                  </label>
                  <input
                    id="email"
                    name="email"
                    type="email"
                    required
                    value={formData.email}
                    onChange={handleChange}
                    placeholder="votre@email.com"
                    className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                  />
                </div>

                {/* Sujet */}
                <div>
                  <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
                    Sujet <span className="text-red-500">*</span>
                  </label>
                  <input
                    id="subject"
                    name="subject"
                    type="text"
                    required
                    value={formData.subject}
                    onChange={handleChange}
                    placeholder="L'objet de votre message"
                    className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                  />
                </div>

                {/* Message */}
                <div>
                  <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
                    Message <span className="text-red-500">*</span>
                  </label>
                  <textarea
                    id="message"
                    name="message"
                    required
                    value={formData.message}
                    onChange={handleChange}
                    placeholder="Décrivez votre demande..."
                    rows={6}
                    className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none"
                  />
                </div>

                {/* Checkbox Robot */}
                <div className="flex items-center gap-3">
                  <input
                    id="notRobot"
                    name="notRobot"
                    type="checkbox"
                    required
                    checked={formData.notRobot}
                    onChange={handleCheckboxChange}
                    className="w-5 h-5 text-primary-600 border-gray-300 rounded focus:ring-2 focus:ring-primary-500"
                  />
                  <label htmlFor="notRobot" className="text-gray-700 select-none cursor-pointer">
                    Je ne suis pas un robot 🤖
                  </label>
                </div>

                {/* Submit Button */}
                <div>
                  <Button
                    type="submit"
                    isLoading={isSubmitting}
                    disabled={isSubmitting}
                    size="lg"
                    className="w-full"
                  >
                    {isSubmitting ? "Envoi en cours..." : "Envoyer le message"}
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        </div>

        {/* Contact Info */}
        <div className="space-y-6">
          <Card className="shadow-lg">
            <CardHeader>
              <CardTitle className="text-2xl">Nos coordonnées</CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Adresse */}
              <div className="flex items-start gap-4">
                <div className="text-3xl">📍</div>
                <div>
                  <h3 className="font-semibold text-gray-900 mb-1">Adresse</h3>
                  <p className="text-gray-600">
                    123 Avenue des Thés<br />
                    06000 Nice, France
                  </p>
                </div>
              </div>

              {/* Téléphone */}
              <div className="flex items-start gap-4">
                <div className="text-3xl">📞</div>
                <div>
                  <h3 className="font-semibold text-gray-900 mb-1">Téléphone</h3>
                  <p className="text-gray-600">
                    <a href="tel:+33187673218" className="hover:text-primary-600 transition-colors">
                      +33 1 87 67 32 18
                    </a>
                  </p>
                </div>
              </div>

              {/* Email */}
              <div className="flex items-start gap-4">
                <div className="text-3xl">✉️</div>
                <div>
                  <h3 className="font-semibold text-gray-900 mb-1">Email</h3>
                  <p className="text-gray-600">
                    <a href="mailto:contact@the-tip-top.com" className="hover:text-primary-600 transition-colors">
                      contact@the-tip-top.com
                    </a>
                  </p>
                </div>
              </div>

              {/* Horaires */}
              <div className="flex items-start gap-4">
                <div className="text-3xl">🕐</div>
                <div>
                  <h3 className="font-semibold text-gray-900 mb-1">Horaires d'ouverture</h3>
                  <p className="text-gray-600 text-sm">
                    Lundi - Vendredi : 9h - 19h<br />
                    Samedi : 9h - 18h<br />
                    Dimanche : 10h - 17h
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Localisation */}
          <Card className="shadow-lg">
            <CardHeader>
              <CardTitle className="text-xl">Localisation</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="rounded-lg overflow-hidden h-64">
                <iframe
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2885.2563866557893!2d7.261953!1d43.7031922!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12cdd0106a852d31%3A0x40819a5fd970220!2sNice%2C%20France!5e0!3m2!1sfr!2sfr!4v1234567890123"
                  width="100%"
                  height="100%"
                  style={{ border: 0 }}
                  allowFullScreen
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                  title="Localisation Thé Tip Top Nice"
                />
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Boutiques Section */}
      <section className="bg-gradient-to-r from-primary-50 to-green-50 py-12 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-center text-gray-900 mb-4">
            Nos boutiques
          </h2>
          <p className="text-center text-gray-600 mb-12">
            Retrouvez-nous dans nos points de vente niçois
          </p>

          <div className="grid md:grid-cols-3 gap-8">
            {/* Boutique Centre-Ville */}
            <Card className="bg-white hover:shadow-xl transition-shadow">
              <CardHeader>
                <div className="text-4xl text-center mb-2">🏪</div>
                <CardTitle className="text-center text-xl">Boutique Centre-Ville</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="text-center">
                  <p className="text-gray-700 font-medium">15 rue de la Paix</p>
                  <p className="text-gray-600 text-sm">06000 Nice</p>
                </div>
                <div className="text-center pt-3 border-t border-gray-200">
                  <p className="text-primary-600 font-semibold mb-1">
                    <a href="tel:+33493123456" className="hover:text-primary-700">
                      04 93 12 34 56
                    </a>
                  </p>
                  <p className="text-gray-600 text-sm">
                    9h-19h du lundi au samedi
                  </p>
                </div>
              </CardContent>
            </Card>

            {/* Boutique Vieux-Nice */}
            <Card className="bg-white hover:shadow-xl transition-shadow">
              <CardHeader>
                <div className="text-4xl text-center mb-2">🏪</div>
                <CardTitle className="text-center text-xl">Boutique Vieux-Nice</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="text-center">
                  <p className="text-gray-700 font-medium">28 rue des Rosiers</p>
                  <p className="text-gray-600 text-sm">06300 Nice</p>
                </div>
                <div className="text-center pt-3 border-t border-gray-200">
                  <p className="text-primary-600 font-semibold mb-1">
                    <a href="tel:+33494872416" className="hover:text-primary-700">
                      04 94 87 24 16
                    </a>
                  </p>
                  <p className="text-gray-600 text-sm">
                    10h-20h du lundi au dimanche
                  </p>
                </div>
              </CardContent>
            </Card>

            {/* Boutique Promenade */}
            <Card className="bg-white hover:shadow-xl transition-shadow">
              <CardHeader>
                <div className="text-4xl text-center mb-2">🏪</div>
                <CardTitle className="text-center text-xl">Boutique Promenade</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="text-center">
                  <p className="text-gray-700 font-medium">42 Promenade des Anglais</p>
                  <p className="text-gray-600 text-sm">06000 Nice</p>
                </div>
                <div className="text-center pt-3 border-t border-gray-200">
                  <p className="text-primary-600 font-semibold mb-1">
                    <a href="tel:+33493296714" className="hover:text-primary-700">
                      04 93 29 67 14
                    </a>
                  </p>
                  <p className="text-gray-600 text-sm">
                    9h30-19h30 du mardi au samedi
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
    </div>
  );
}