import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { EmailService, ContactFormData } from '../../services/email.service';

@Component({
  selector: 'app-contact',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `
    <div class="min-h-screen bg-gray-50">
      <!-- Header -->
      <section class="bg-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 class="text-4xl md:text-5xl font-serif font-bold text-gray-900 mb-6">
            Kontakt
          </h1>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            Haben Sie Fragen oder möchten Sie ein unverbindliches Angebot für Ihr Event? 
            Wir freuen uns auf Ihre Nachricht und beraten Sie gerne persönlich.
          </p>
        </div>
      </section>

      <section class="py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <!-- Contact Form -->
            <div class="card">
              <h2 class="text-2xl font-serif font-bold text-gray-900 mb-6">
                Anfrage senden
              </h2>
              
              <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" class="space-y-6">
                <!-- Personal Information -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label for="firstName" class="block text-sm font-medium text-gray-700 mb-2">
                      Vorname *
                    </label>
                    <input 
                      type="text" 
                      id="firstName" 
                      formControlName="firstName"
                      class="input-field"
                      [class.border-red-500]="contactForm.get('firstName')?.invalid && contactForm.get('firstName')?.touched">
                    <div *ngIf="contactForm.get('firstName')?.invalid && contactForm.get('firstName')?.touched" 
                         class="text-red-500 text-sm mt-1">
                      Vorname ist erforderlich
                    </div>
                  </div>
                  
                  <div>
                    <label for="lastName" class="block text-sm font-medium text-gray-700 mb-2">
                      Nachname *
                    </label>
                    <input 
                      type="text" 
                      id="lastName" 
                      formControlName="lastName"
                      class="input-field"
                      [class.border-red-500]="contactForm.get('lastName')?.invalid && contactForm.get('lastName')?.touched">
                    <div *ngIf="contactForm.get('lastName')?.invalid && contactForm.get('lastName')?.touched" 
                         class="text-red-500 text-sm mt-1">
                      Nachname ist erforderlich
                    </div>
                  </div>
                </div>

                <div>
                  <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                    E-Mail-Adresse *
                  </label>
                  <input 
                    type="email" 
                    id="email" 
                    formControlName="email"
                    class="input-field"
                    [class.border-red-500]="contactForm.get('email')?.invalid && contactForm.get('email')?.touched">
                  <div *ngIf="contactForm.get('email')?.invalid && contactForm.get('email')?.touched" 
                       class="text-red-500 text-sm mt-1">
                    <span *ngIf="contactForm.get('email')?.errors?.['required']">E-Mail ist erforderlich</span>
                    <span *ngIf="contactForm.get('email')?.errors?.['email']">Bitte geben Sie eine gültige E-Mail ein</span>
                  </div>
                </div>

                <div>
                  <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
                    Telefonnummer
                  </label>
                  <input 
                    type="tel" 
                    id="phone" 
                    formControlName="phone"
                    class="input-field">
                </div>

                <!-- Event Details -->
                <div class="border-t pt-6">
                  <h3 class="text-lg font-semibold text-gray-900 mb-4">Event-Details</h3>
                  
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label for="eventType" class="block text-sm font-medium text-gray-700 mb-2">
                        Art des Events *
                      </label>
                      <select 
                        id="eventType" 
                        formControlName="eventType"
                        class="input-field"
                        [class.border-red-500]="contactForm.get('eventType')?.invalid && contactForm.get('eventType')?.touched">
                        <option value="">Bitte wählen</option>
                        <option value="wedding">Hochzeit</option>
                        <option value="funeral">Beerdigung</option>
                        <option value="corporate">Firmenevent</option>
                        <option value="birthday">Geburtstag</option>
                        <option value="anniversary">Jubiläum</option>
                        <option value="other">Sonstiges</option>
                      </select>
                      <div *ngIf="contactForm.get('eventType')?.invalid && contactForm.get('eventType')?.touched" 
                           class="text-red-500 text-sm mt-1">
                        Bitte wählen Sie eine Event-Art
                      </div>
                    </div>

                    <div>
                      <label for="eventDate" class="block text-sm font-medium text-gray-700 mb-2">
                        Gewünschtes Datum
                      </label>
                      <input 
                        type="date" 
                        id="eventDate" 
                        formControlName="eventDate"
                        class="input-field"
                        [min]="minDate">
                    </div>
                  </div>

                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label for="guestCount" class="block text-sm font-medium text-gray-700 mb-2">
                        Anzahl Gäste (ca.)
                      </label>
                      <input 
                        type="number" 
                        id="guestCount" 
                        formControlName="guestCount"
                        class="input-field"
                        min="1">
                    </div>

                    <div>
                      <label for="budget" class="block text-sm font-medium text-gray-700 mb-2">
                        Budget (ca.)
                      </label>
                      <select 
                        id="budget" 
                        formControlName="budget"
                        class="input-field">
                        <option value="">Bitte wählen</option>
                        <option value="under-500">Unter 500€</option>
                        <option value="500-1000">500€ - 1.000€</option>
                        <option value="1000-2500">1.000€ - 2.500€</option>
                        <option value="2500-5000">2.500€ - 5.000€</option>
                        <option value="over-5000">Über 5.000€</option>
                      </select>
                    </div>
                  </div>
                </div>

                <div>
                  <label for="message" class="block text-sm font-medium text-gray-700 mb-2">
                    Ihre Nachricht *
                  </label>
                  <textarea 
                    id="message" 
                    formControlName="message"
                    rows="5"
                    class="textarea-field"
                    [class.border-red-500]="contactForm.get('message')?.invalid && contactForm.get('message')?.touched"
                    placeholder="Beschreiben Sie uns Ihre Wünsche und Vorstellungen für Ihr Event..."></textarea>
                  <div *ngIf="contactForm.get('message')?.invalid && contactForm.get('message')?.touched" 
                       class="text-red-500 text-sm mt-1">
                    Bitte beschreiben Sie Ihre Anfrage
                  </div>
                </div>

                <!-- Privacy Checkbox -->
                <div class="flex items-start">
                  <input 
                    type="checkbox" 
                    id="privacy" 
                    formControlName="privacy"
                    class="mt-1 h-4 w-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500">
                  <label for="privacy" class="ml-3 text-sm text-gray-700">
                    Ich stimme der Verarbeitung meiner Daten gemäß der 
                    <a href="#" class="text-primary-600 hover:text-primary-700">Datenschutzerklärung</a> zu. *
                  </label>
                </div>
                <div *ngIf="contactForm.get('privacy')?.invalid && contactForm.get('privacy')?.touched" 
                     class="text-red-500 text-sm">
                  Bitte stimmen Sie der Datenschutzerklärung zu
                </div>

                <!-- Submit Button -->
                <div class="pt-4">
                  <button 
                    type="submit" 
                    [disabled]="contactForm.invalid || isSubmitting"
                    class="btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed">
                    <span *ngIf="!isSubmitting">Anfrage senden</span>
                    <span *ngIf="isSubmitting" class="flex items-center justify-center">
                      <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                      </svg>
                      Wird gesendet...
                    </span>
                  </button>
                </div>
              </form>

              <!-- Success Message -->
              <div *ngIf="showSuccessMessage" 
                   class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
                <div class="flex items-center">
                  <svg class="w-5 h-5 text-green-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                  </svg>
                  <span class="text-green-800 font-medium">Vielen Dank für Ihre Anfrage!</span>
                </div>
                <p class="text-green-700 mt-1">Wir werden uns schnellstmöglich bei Ihnen melden.</p>
              </div>
            </div>

            <!-- Contact Information -->
            <div class="space-y-8">
              <!-- Contact Details -->
              <div class="card">
                <h2 class="text-2xl font-serif font-bold text-gray-900 mb-6">
                  Kontaktinformationen
                </h2>
                
                <div class="space-y-4">
                  <div class="flex items-start">
                    <svg class="w-6 h-6 text-primary-600 mr-3 mt-1" fill="currentColor" viewBox="0 0 20 20">
                      <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
                      <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
                    </svg>
                    <div>
                      <h3 class="font-medium text-gray-900">E-Mail</h3>
                      <p class="text-gray-600">info&#64;florale-emotion.de</p>
                    </div>
                  </div>

                  <div class="flex items-start">
                    <svg class="w-6 h-6 text-primary-600 mr-3 mt-1" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
                    </svg>
                    <div>
                      <h3 class="font-medium text-gray-900">Werkstatt</h3>
                      <p class="text-gray-600">
                        Rasenweg 3<br>
                        37434 Krebeck<br>
                        (Region Göttingen / Südniedersachsen)
                      </p>
                      <p class="text-sm text-amber-700 mt-2 bg-amber-50 rounded px-2 py-1">
                        Reiner Werkstattbetrieb — kein Ladenlokal.<br>
                        Beratung erfolgt digital oder direkt bei Ihnen vor Ort.
                      </p>
                    </div>
                  </div>

                  <div class="flex items-start">
                    <svg class="w-6 h-6 text-primary-600 mr-3 mt-1" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
                    </svg>
                    <div>
                      <h3 class="font-medium text-gray-900">Beratungszeiten</h3>
                      <p class="text-gray-600">
                        Montag - Freitag: 9:00 - 18:00<br>
                        Samstag: 10:00 - 16:00<br>
                        Sonntag: Nach Vereinbarung
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Team -->
              <div class="card">
                <h2 class="text-2xl font-serif font-bold text-gray-900 mb-6">
                  Unser Team
                </h2>
                
                <div class="space-y-6">
                  <div class="flex items-center">
                    <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mr-4">
                      <span class="text-primary-600 font-semibold text-lg">V</span>
                    </div>
                    <div>
                      <h3 class="font-semibold text-gray-900">Veronika</h3>
                      <p class="text-gray-600">Floristmeisterin & Geschäftsführung</p>
                      <p class="text-sm text-gray-500">veronika&#64;florale-emotion.de</p>
                    </div>
                  </div>

                  <div class="flex items-center">
                    <div class="w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center mr-4">
                      <span class="text-secondary-600 font-semibold text-lg">C</span>
                    </div>
                    <div>
                      <h3 class="font-semibold text-gray-900">Corinna</h3>
                      <p class="text-gray-600">Floristin & Eventplanung</p>
                      <p class="text-sm text-gray-500">corinna&#64;florale-emotion.de</p>
                    </div>
                  </div>
                </div>
              </div>

              <!-- FAQ -->
              <div class="card">
                <h2 class="text-2xl font-serif font-bold text-gray-900 mb-6">
                  Häufige Fragen
                </h2>
                
                <div class="space-y-4">
                  <div>
                    <h3 class="font-medium text-gray-900 mb-2">Wie weit im Voraus sollte ich buchen?</h3>
                    <p class="text-gray-600 text-sm">Für Hochzeiten empfehlen wir eine Buchung 3-6 Monate im Voraus. Bei anderen Events reichen meist 2-4 Wochen.</p>
                  </div>
                  
                  <div>
                    <h3 class="font-medium text-gray-900 mb-2">In welchem Gebiet sind Sie tätig?</h3>
                    <p class="text-gray-600 text-sm">Unser Haupteinzugsgebiet umfasst die Region Göttingen und Südniedersachsen (ca. 50 km Radius: Göttingen, Northeim, Duderstadt, Herzberg, Einbeck). Für Hochzeiten und größere Events kommen wir auch bis Hannover, Kassel oder Braunschweig.</p>
                  </div>

                  <div>
                    <h3 class="font-medium text-gray-900 mb-2">Wie läuft die Beratung ab?</h3>
                    <p class="text-gray-600 text-sm">Wir kommen gerne zu Ihnen — ob zu Ihrer Hochzeitslocation, zum Bestatter oder nach Hause. Alternativ bieten wir Beratung per Video, Telefon und E-Mail an. Wir betreiben keinen öffentlichen Verkaufsladen.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  `
})
export class ContactComponent {
  contactForm: FormGroup;
  isSubmitting = false;
  showSuccessMessage = false;
  minDate: string;

  constructor(
    private fb: FormBuilder,
    private emailService: EmailService
  ) {
    // Set minimum date to today
    const today = new Date();
    this.minDate = today.toISOString().split('T')[0];

    this.contactForm = this.fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      phone: [''],
      eventType: ['', Validators.required],
      eventDate: [''],
      guestCount: [''],
      budget: [''],
      message: ['', Validators.required],
      privacy: [false, Validators.requiredTrue]
    });
  }

  onSubmit() {
    if (this.contactForm.valid) {
      this.isSubmitting = true;
      
      const formData: ContactFormData = this.contactForm.value;
      
      this.emailService.sendContactForm(formData).subscribe({
        next: (response) => {
          this.isSubmitting = false;
          this.showSuccessMessage = true;
          this.contactForm.reset();
          
          // Hide success message after 5 seconds
          setTimeout(() => {
            this.showSuccessMessage = false;
          }, 5000);
        },
        error: (error) => {
          this.isSubmitting = false;
          console.error('Error sending contact form:', error);
          // You could show an error message here
        }
      });
    } else {
      // Mark all fields as touched to show validation errors
      Object.keys(this.contactForm.controls).forEach(key => {
        this.contactForm.get(key)?.markAsTouched();
      });
    }
  }
}