import React, { useState } from 'react';
import { useTranslation, Trans } from 'react-i18next';
import { PublicLayout } from '../../components/layout';
import {
  MessageSquare,
  Mail,
  Phone,
  MapPin,
  Clock,
  Send,
  CheckCircle2,
  AlertCircle,
  HelpCircle
} from 'lucide-react';
import { publicContactService } from '../../api/services/publicContact';

interface ContactMethod {
  id: string;
  title: string;
  description: string;
  detail: string;
  icon: React.ComponentType<{ className?: string }>;
  action?: () => void;
  link?: string;
}

const ContactPage: React.FC = () => {
  const { t } = useTranslation(['contact', 'common']);
  const [formState, setFormState] = useState({
    name: '',
    email: '',
    phone: '',
    bakeryName: '',
    subject: '',
    message: '',
    type: 'general' as 'general' | 'technical' | 'sales' | 'feedback',
  });
  const [submitStatus, setSubmitStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');

  const contactMethods: ContactMethod[] = [
    {
      id: 'email',
      title: t('methods.email.title'),
      description: t('methods.email.description'),
      detail: t('methods.email.detail'),
      icon: Mail,
      link: `mailto:${t('methods.email.description')}`,
    },
    {
      id: 'phone',
      title: t('methods.phone.title'),
      description: t('methods.phone.description'),
      detail: t('methods.phone.detail'),
      icon: Phone,
      link: `tel:${t('methods.phone.description').replace(/\s/g, '')}`,
    },
    {
      id: 'office',
      title: t('methods.office.title'),
      description: t('methods.office.description'),
      detail: t('methods.office.detail'),
      icon: MapPin,
    },
  ];

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitStatus('loading');

    try {
      await publicContactService.submitContactForm({
        name: formState.name,
        email: formState.email,
        phone: formState.phone || undefined,
        bakery_name: formState.bakeryName || undefined,
        type: formState.type,
        subject: formState.subject,
        message: formState.message,
      });

      setSubmitStatus('success');
      setTimeout(() => {
        setSubmitStatus('idle');
        setFormState({
          name: '',
          email: '',
          phone: '',
          bakeryName: '',
          subject: '',
          message: '',
          type: 'general',
        });
      }, 3000);
    } catch (error) {
      console.error('Contact form submission error:', error);
      setSubmitStatus('error');
      setTimeout(() => setSubmitStatus('idle'), 5000);
    }
  };

  return (
    <PublicLayout
      variant="default"
      contentPadding="md"
      headerProps={{
        showThemeToggle: true,
        showAuthButtons: true,
        showLanguageSelector: true,
        variant: 'default',
      }}
    >
      {/* Hero Section */}
      <section className="bg-gradient-to-br from-[var(--bg-primary)] via-[var(--bg-secondary)] to-[var(--color-primary)]/5 py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-4xl mx-auto">
            <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
              <Mail className="w-4 h-4" />
              <span>{t('hero.badge')}</span>
            </div>
            <h1 className="text-4xl lg:text-6xl font-extrabold text-[var(--text-primary)] mb-6">
              {t('hero.title')}
              <span className="block text-[var(--color-primary)]">{t('hero.title_accent')}</span>
            </h1>
            <p className="text-xl text-[var(--text-secondary)] leading-relaxed mb-8">
              {t('hero.subtitle')}
            </p>
          </div>
        </div>
      </section>

      {/* Contact Methods */}
      <section className="py-20 bg-[var(--bg-primary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
              {t('methods.title')}
            </h2>
            <p className="text-xl text-[var(--text-secondary)]">
              {t('methods.subtitle')}
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
            {contactMethods.map((method) => {
              const ContactIcon = method.icon;
              const content = (
                <>
                  <div className="w-16 h-16 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-[var(--color-primary)] transition-colors">
                    <ContactIcon className="w-8 h-8 text-[var(--color-primary)] group-hover:text-white transition-colors" />
                  </div>
                  <h3 className="text-xl font-bold text-[var(--text-primary)] mb-2">
                    {method.title}
                  </h3>
                  <p className="text-sm text-[var(--text-secondary)] mb-1">
                    {method.description}
                  </p>
                  <p className="text-xs text-[var(--text-tertiary)]">
                    {method.detail}
                  </p>
                </>
              );

              if (method.link) {
                return (
                  <a
                    key={method.id}
                    href={method.link}
                    className="bg-[var(--bg-secondary)] rounded-2xl p-8 border border-[var(--border-primary)] hover:border-[var(--color-primary)] hover:shadow-xl transition-all text-center group"
                  >
                    {content}
                  </a>
                );
              }

              return (
                <div
                  key={method.id}
                  className="bg-[var(--bg-secondary)] rounded-2xl p-8 border border-[var(--border-primary)] text-center"
                >
                  {content}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Contact Form */}
      <section className="py-20 bg-[var(--bg-secondary)]">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
              {t('form.title')}
            </h2>
            <p className="text-xl text-[var(--text-secondary)]">
              {t('form.subtitle')}
            </p>
          </div>

          <form onSubmit={handleSubmit} className="bg-[var(--bg-primary)] rounded-2xl p-8 border border-[var(--border-primary)]">
            {/* Success/Error Messages */}
            {submitStatus === 'success' && (
              <div className="mb-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl flex items-center gap-3">
                <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0" />
                <p className="text-sm text-green-800 dark:text-green-200">
                  <strong>{t('form.success.title')}</strong> {t('form.success.message')}
                </p>
              </div>
            )}

            {submitStatus === 'error' && (
              <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl flex items-center gap-3">
                <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0" />
                <p className="text-sm text-red-800 dark:text-red-200">
                  <strong>{t('form.error.title')}</strong> {t('form.error.message')}
                </p>
              </div>
            )}

            <div className="grid md:grid-cols-2 gap-6">
              {/* Name */}
              <div>
                <label htmlFor="name" className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                  {t('form.fields.name')} <span className="text-red-500">{t('form.required_indicator')}</span>
                </label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  value={formState.name}
                  onChange={handleChange}
                  required
                  className="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-xl text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors"
                  placeholder={t('form.fields.name_placeholder')}
                />
              </div>

              {/* Email */}
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                  {t('form.fields.email')} <span className="text-red-500">{t('form.required_indicator')}</span>
                </label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  value={formState.email}
                  onChange={handleChange}
                  required
                  className="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-xl text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors"
                  placeholder={t('form.fields.email_placeholder')}
                />
              </div>

              {/* Phone */}
              <div>
                <label htmlFor="phone" className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                  {t('form.fields.phone')}
                </label>
                <input
                  type="tel"
                  id="phone"
                  name="phone"
                  value={formState.phone}
                  onChange={handleChange}
                  className="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-xl text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors"
                  placeholder={t('form.fields.phone_placeholder')}
                />
              </div>

              {/* Bakery Name */}
              <div>
                <label htmlFor="bakeryName" className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                  {t('form.fields.bakery_name')}
                </label>
                <input
                  type="text"
                  id="bakeryName"
                  name="bakeryName"
                  value={formState.bakeryName}
                  onChange={handleChange}
                  className="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-xl text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors"
                  placeholder={t('form.fields.bakery_name_placeholder')}
                />
              </div>

              {/* Type */}
              <div>
                <label htmlFor="type" className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                  {t('form.fields.type')} <span className="text-red-500">{t('form.required_indicator')}</span>
                </label>
                <select
                  id="type"
                  name="type"
                  value={formState.type}
                  onChange={handleChange}
                  required
                  className="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-xl text-[var(--text-primary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors"
                >
                  <option value="general">{t('form.fields.type_options.general')}</option>
                  <option value="technical">{t('form.fields.type_options.technical')}</option>
                  <option value="sales">{t('form.fields.type_options.sales')}</option>
                  <option value="feedback">{t('form.fields.type_options.feedback')}</option>
                </select>
              </div>

              {/* Subject */}
              <div>
                <label htmlFor="subject" className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                  {t('form.fields.subject')} <span className="text-red-500">{t('form.required_indicator')}</span>
                </label>
                <input
                  type="text"
                  id="subject"
                  name="subject"
                  value={formState.subject}
                  onChange={handleChange}
                  required
                  className="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-xl text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors"
                  placeholder={t('form.fields.subject_placeholder')}
                />
              </div>
            </div>

            {/* Message */}
            <div className="mt-6">
              <label htmlFor="message" className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                {t('form.fields.message')} <span className="text-red-500">{t('form.required_indicator')}</span>
              </label>
              <textarea
                id="message"
                name="message"
                value={formState.message}
                onChange={handleChange}
                required
                rows={6}
                className="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-xl text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors resize-none"
                placeholder={t('form.fields.message_placeholder')}
              />
            </div>

            {/* Submit Button */}
            <div className="mt-8">
              <button
                type="submit"
                disabled={submitStatus === 'loading'}
                className="w-full flex items-center justify-center gap-2 px-8 py-4 bg-[var(--color-primary)] text-white rounded-xl font-bold hover:shadow-xl transition-all hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
              >
                {submitStatus === 'loading' ? (
                  <>
                    <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                    <span>{t('form.sending')}</span>
                  </>
                ) : (
                  <>
                    <Send className="w-5 h-5" />
                    <span>{t('form.submit')}</span>
                  </>
                )}
              </button>
            </div>

            <p className="text-xs text-[var(--text-tertiary)] text-center mt-4">
              <Trans
                i18nKey="contact:form.privacy"
                components={{
                  privacyLink: <a href="/privacy" className="text-[var(--color-primary)] hover:underline" />
                }}
              />
            </p>
          </form>
        </div>
      </section>

      {/* Office Hours */}
      <section className="py-20 bg-[var(--bg-primary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-8">
            {/* Hours */}
            <div className="bg-[var(--bg-secondary)] rounded-2xl p-8 border border-[var(--border-primary)]">
              <div className="flex items-start gap-4 mb-6">
                <Clock className="w-6 h-6 text-[var(--color-primary)] flex-shrink-0 mt-1" />
                <div>
                  <h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
                    {t('footer.hours.title')}
                  </h3>
                  <div className="space-y-3 text-sm text-[var(--text-secondary)]">
                    <div>
                      <strong className="text-[var(--text-primary)]">{t('footer.hours.email.label')}</strong>
                      <p>{t('footer.hours.email.detail')}</p>
                    </div>
                    <div>
                      <strong className="text-[var(--text-primary)]">{t('footer.hours.phone.label')}</strong>
                      <p>{t('footer.hours.phone.detail')}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* FAQ Link */}
            <div className="bg-gradient-to-br from-[var(--color-primary)]/10 to-orange-600/10 rounded-2xl p-8 border border-[var(--color-primary)]/20">
              <div className="flex items-start gap-4">
                <HelpCircle className="w-6 h-6 text-[var(--color-primary)] flex-shrink-0 mt-1" />
                <div>
                  <h3 className="text-xl font-bold text-[var(--text-primary)] mb-2">
                    {t('footer.faq.title')}
                  </h3>
                  <p className="text-sm text-[var(--text-secondary)] mb-4">
                    {t('footer.faq.description')}
                  </p>
                  <div className="space-y-2">
                    <a
                      href="/help"
                      className="inline-flex items-center gap-2 text-[var(--color-primary)] hover:underline font-medium text-sm"
                    >
                      {t('footer.faq.help_center')}
                    </a>
                    <br />
                    <a
                      href="/help/docs"
                      className="inline-flex items-center gap-2 text-[var(--color-primary)] hover:underline font-medium text-sm"
                    >
                      {t('footer.faq.docs')}
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </PublicLayout>
  );
};

export default ContactPage;
