import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { PublicLayout } from '../../components/layout';
import {
  HelpCircle,
  Search,
  BookOpen,
  MessageSquare,
  FileText,
  Users,
  Settings,
  CreditCard,
  Shield,
  TrendingUp,
  Package,
  ChevronDown,
  ChevronUp,
  ExternalLink,
  Mail,
  Phone,
  Clock
} from 'lucide-react';

interface FAQItem {
  question: string;
  answer: string;
  category: string;
}

interface HelpCategory {
  id: string;
  title: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
  link: string;
}

const HelpCenterPage: React.FC = () => {
  const { t } = useTranslation();
  const [searchQuery, setSearchQuery] = useState('');
  const [expandedFAQ, setExpandedFAQ] = useState<number | null>(null);

  const categories: HelpCategory[] = [
    {
      id: 'getting-started',
      title: 'Primeros Pasos',
      description: 'Configura tu cuenta y aprende los conceptos básicos',
      icon: BookOpen,
      link: '/help/docs#getting-started',
    },
    {
      id: 'features',
      title: 'Funcionalidades',
      description: 'Guías completas sobre todas las características',
      icon: Package,
      link: '/help/docs#features',
    },
    {
      id: 'billing',
      title: 'Facturación y Planes',
      description: 'Información sobre precios, pagos y suscripciones',
      icon: CreditCard,
      link: '/help/docs#billing',
    },
    {
      id: 'account',
      title: 'Gestión de Cuenta',
      description: 'Administra tu perfil, equipo y configuración',
      icon: Settings,
      link: '/help/docs#account',
    },
    {
      id: 'privacy',
      title: 'Privacidad y Seguridad',
      description: 'RGPD, seguridad de datos y cumplimiento',
      icon: Shield,
      link: '/help/docs#privacy',
    },
    {
      id: 'analytics',
      title: 'Análisis y Predicciones',
      description: 'Interpreta datos e insights de IA',
      icon: TrendingUp,
      link: '/help/docs#analytics',
    },
  ];

  const faqs: FAQItem[] = [
    {
      category: 'general',
      question: '¿Qué es Panadería IA y cómo funciona?',
      answer: 'Panadería IA es una plataforma de gestión inteligente para panaderías. Utiliza inteligencia artificial para predecir la demanda de tus productos, optimizar la producción, reducir desperdicios y aumentar la rentabilidad. Conectas tus datos de ventas históricas y el sistema aprende tus patrones para hacer predicciones precisas.',
    },
    {
      category: 'general',
      question: '¿Cuánto tiempo toma configurar el sistema?',
      answer: 'La configuración inicial toma entre 10-15 minutos. Necesitas: 1) Crear tu cuenta, 2) Subir tu catálogo de productos, 3) Importar historial de ventas (opcional pero recomendado), 4) Configurar preferencias básicas. El sistema empieza a generar predicciones desde el primer día, mejorando su precisión con el tiempo.',
    },
    {
      category: 'general',
      question: '¿Necesito conocimientos técnicos para usarlo?',
      answer: 'No. Panadería IA está diseñado para panaderos, no para ingenieros. La interfaz es intuitiva, con tutoriales paso a paso. Si sabes usar WhatsApp o un correo electrónico, puedes usar nuestra plataforma. Además, ofrecemos soporte 24/7 en español.',
    },
    {
      category: 'pricing',
      question: '¿Cuánto cuesta el programa piloto?',
      answer: 'El programa piloto es GRATIS durante los primeros 3 meses. Después, pagas solo €49/mes con un 20% de descuento de por vida (precio normal: €79/mes). Sin contratos de permanencia, cancela cuando quieras. Las primeras 20 panaderías obtienen este beneficio.',
    },
    {
      category: 'pricing',
      question: '¿Necesito tarjeta de crédito para empezar el piloto?',
      answer: 'SÍ, necesitas registrar una tarjeta, pero NO se te cobrará durante los 3 meses de prueba gratuita. Esto nos ayuda a asegurar que solo participan panaderías realmente interesadas. Puedes cancelar antes de que termine el periodo gratuito sin ningún cargo.',
    },
    {
      category: 'pricing',
      question: '¿Qué pasa después de los 3 meses gratis?',
      answer: 'Tienes 3 opciones: 1) Continuar con el plan Basic (€49/mes con tu descuento del 20%), 2) Actualizar a un plan superior, 3) Cancelar sin penalización. Te avisaremos 7 días antes de que termine tu periodo gratuito.',
    },
    {
      category: 'technical',
      question: '¿Cómo importo mis datos históricos de ventas?',
      answer: 'Aceptamos varios formatos: Excel (.xlsx), CSV, o exportaciones directas de tu TPV si es compatible. También puedes introducir datos manualmente si prefieres. Cuanto más historial proporciones (recomendamos mínimo 3 meses), más precisas serán las predicciones.',
    },
    {
      category: 'technical',
      question: '¿El sistema se integra con mi TPV actual?',
      answer: 'Actualmente estamos trabajando en integraciones directas con los principales TPV del mercado español. Por ahora, puedes exportar datos de tu TPV e importarlos manualmente (es más fácil de lo que suena). Las integraciones automáticas llegarán en Q2 2025.',
    },
    {
      category: 'technical',
      question: '¿Qué pasa si mis predicciones no son precisas?',
      answer: 'El sistema mejora con el tiempo. Las primeras semanas puede tener un margen de error del 15-20%. Después del primer mes, esto baja al 10%. Con 3+ meses de datos, alcanzamos >90% de precisión. Puedes ajustar manualmente las predicciones y el sistema aprende de tus correcciones.',
    },
    {
      category: 'privacy',
      question: '¿Dónde se almacenan mis datos?',
      answer: 'TODOS tus datos se almacenan en servidores físicamente ubicados en España (Barcelona y Madrid), cumpliendo 100% con RGPD. Nunca compartimos, vendemos ni transferimos tus datos fuera de la UE. Tienes control total y puedes exportar o eliminar tus datos en cualquier momento.',
    },
    {
      category: 'privacy',
      question: '¿Quién puede ver mis datos de ventas?',
      answer: 'Solo TÚ y los miembros de tu equipo que tú autorices. Ni siquiera nuestro equipo técnico puede acceder a tus datos sin tu permiso explícito (y solo lo haríamos para soporte técnico con tu aprobación). Los datos están encriptados end-to-end.',
    },
    {
      category: 'support',
      question: '¿Qué tipo de soporte ofrecen?',
      answer: 'Soporte 24/7 en español por: Email (respuesta en <4h), Chat en vivo (9:00-21:00), Videollamada (con cita previa). Durante el piloto, también tienes acceso directo a los fundadores por WhatsApp. Además, biblioteca completa de tutoriales en vídeo.',
    },
    {
      category: 'support',
      question: '¿Puedo hablar con alguien antes de registrarme?',
      answer: 'Por supuesto. Agenda una videollamada de 15 minutos con nuestro equipo para ver el producto en acción, hacer todas tus preguntas y confirmar que es adecuado para tu panadería. Sin compromiso. Contacto: hola@panaderia-ia.com o el formulario de contacto.',
    },
    {
      category: 'general',
      question: '¿Funciona para obradores centrales con múltiples puntos de venta?',
      answer: 'SÍ. Nuestro sistema está diseñado para adaptarse a ambos modelos: producción local (un solo punto) y obrador central con distribución a múltiples puntos de venta. Para obradores centrales, ofrecemos predicción de demanda agregada y granular por cada POS, gestión de distribución multi-ubicación, y un dashboard centralizado con visibilidad por punto de venta. La IA optimiza tanto la producción total como la distribución entre ubicaciones.',
    },
    {
      category: 'general',
      question: '¿Qué modelo de negocio es mejor para mi panadería?',
      answer: 'Depende de tus objetivos. Producción Local es ideal si valoras máximo control, flexibilidad y frescura instantánea, o si estás empezando. Obrador Central + Puntos de Venta es mejor si quieres escalar a múltiples ubicaciones, aprovechar economías de escala, o tener presencia en varios barrios/ciudades. Lo bueno: nuestro sistema funciona para ambos modelos y puede evolucionar contigo si decides cambiar o crecer.',
    },
  ];

  const filteredFAQs = searchQuery
    ? faqs.filter(
        (faq) =>
          faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
          faq.answer.toLowerCase().includes(searchQuery.toLowerCase())
      )
    : faqs;

  const toggleFAQ = (index: number) => {
    setExpandedFAQ(expandedFAQ === index ? null : index);
  };

  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">
              <HelpCircle className="w-4 h-4" />
              <span>Centro de Ayuda</span>
            </div>
            <h1 className="text-4xl lg:text-6xl font-extrabold text-[var(--text-primary)] mb-6">
              ¿Cómo Podemos
              <span className="block text-[var(--color-primary)]">Ayudarte Hoy?</span>
            </h1>
            <p className="text-xl text-[var(--text-secondary)] leading-relaxed mb-8">
              Encuentra respuestas rápidas, guías completas y contacto directo con nuestro equipo
            </p>

            {/* Search Bar */}
            <div className="max-w-2xl mx-auto">
              <div className="relative">
                <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--text-tertiary)]" />
                <input
                  type="text"
                  placeholder="Buscar en la ayuda... (ej: ¿cómo importo datos?)"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full pl-12 pr-4 py-4 bg-[var(--bg-primary)] border-2 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"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Quick Links / Categories */}
      <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">
              Explora por Categoría
            </h2>
            <p className="text-xl text-[var(--text-secondary)]">
              Encuentra lo que necesitas más rápido
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {categories.map((category) => (
              <Link
                key={category.id}
                to={category.link}
                className="bg-[var(--bg-secondary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:border-[var(--color-primary)] hover:shadow-xl transition-all duration-300 group"
              >
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:bg-[var(--color-primary)] transition-colors">
                    <category.icon className="w-6 h-6 text-[var(--color-primary)] group-hover:text-white transition-colors" />
                  </div>
                  <div className="flex-1">
                    <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2 group-hover:text-[var(--color-primary)] transition-colors">
                      {category.title}
                    </h3>
                    <p className="text-sm text-[var(--text-secondary)]">{category.description}</p>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* FAQs */}
      <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">
              Preguntas Frecuentes
            </h2>
            <p className="text-xl text-[var(--text-secondary)]">
              {filteredFAQs.length} {filteredFAQs.length === 1 ? 'respuesta' : 'respuestas'}{' '}
              {searchQuery && 'encontradas'}
            </p>
          </div>

          <div className="space-y-4">
            {filteredFAQs.map((faq, index) => (
              <div
                key={index}
                className="bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)] overflow-hidden"
              >
                <button
                  onClick={() => toggleFAQ(index)}
                  className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-[var(--bg-secondary)] transition-colors"
                >
                  <span className="text-lg font-bold text-[var(--text-primary)] pr-4">
                    {faq.question}
                  </span>
                  {expandedFAQ === index ? (
                    <ChevronUp className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0" />
                  ) : (
                    <ChevronDown className="w-5 h-5 text-[var(--text-tertiary)] flex-shrink-0" />
                  )}
                </button>
                {expandedFAQ === index && (
                  <div className="px-6 pb-4 text-[var(--text-secondary)] leading-relaxed">
                    {faq.answer}
                  </div>
                )}
              </div>
            ))}
          </div>

          {filteredFAQs.length === 0 && (
            <div className="text-center py-12">
              <HelpCircle className="w-16 h-16 text-[var(--text-tertiary)] mx-auto mb-4" />
              <p className="text-[var(--text-secondary)] text-lg">
                No encontramos resultados para "{searchQuery}".{' '}
                <Link to="/help/support" className="text-[var(--color-primary)] hover:underline">
                  Contacta con soporte
                </Link>
              </p>
            </div>
          )}
        </div>
      </section>

      {/* Contact Support */}
      <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">
              ¿No Encuentras lo Que Buscas?
            </h2>
            <p className="text-xl text-[var(--text-secondary)]">
              Nuestro equipo está aquí para ayudarte
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-6">
            <Link
              to="/help/support"
              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"
            >
              <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">
                <MessageSquare 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">
                Chat en Vivo
              </h3>
              <p className="text-sm text-[var(--text-secondary)] mb-4">
                Respuesta inmediata de 9:00 a 21:00
              </p>
              <span className="text-[var(--color-primary)] font-medium group-hover:underline">
                Iniciar Chat →
              </span>
            </Link>

            <a
              href="mailto:soporte@panaderia-ia.com"
              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"
            >
              <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">
                <Mail 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">
                Email
              </h3>
              <p className="text-sm text-[var(--text-secondary)] mb-4">
                Respuesta en menos de 4 horas
              </p>
              <span className="text-[var(--color-primary)] font-medium group-hover:underline">
                Enviar Email →
              </span>
            </a>

            <Link
              to="/help/docs"
              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"
            >
              <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">
                <FileText 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">
                Documentación
              </h3>
              <p className="text-sm text-[var(--text-secondary)] mb-4">
                Guías completas y tutoriales
              </p>
              <span className="text-[var(--color-primary)] font-medium group-hover:underline">
                Ver Docs →
              </span>
            </Link>
          </div>
        </div>
      </section>

      {/* Contact Hours */}
      <section className="py-12 bg-[var(--bg-secondary)]">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-[var(--bg-primary)] rounded-2xl p-8 border border-[var(--border-primary)]">
            <div className="flex items-start gap-4">
              <Clock className="w-6 h-6 text-[var(--color-primary)] flex-shrink-0 mt-1" />
              <div>
                <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2">
                  Horario de Atención
                </h3>
                <div className="space-y-1 text-sm text-[var(--text-secondary)]">
                  <p><strong>Chat en Vivo:</strong> Lunes a Viernes 9:00 - 21:00, Sábados 10:00 - 18:00</p>
                  <p><strong>Email:</strong> 24/7 (respuesta en menos de 4 horas en horario laboral)</p>
                  <p><strong>Teléfono:</strong> Lunes a Viernes 10:00 - 19:00 (solo para clientes activos)</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </PublicLayout>
  );
};

export default HelpCenterPage;
