import { useState } from 'react';
import BackToAppHeader from '../components/BackToAppHeader';
import Footer from '../components/Footer';
import { PageSEO } from '../components/seo';
import { helpPageSEO } from '../lib/seo';
import {
  Search,
  HelpCircle,
  BookOpen,
  Wrench,
  Shield,
  AlertCircle,
  ChevronDown,
  ChevronUp
} from 'lucide-react';

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

export default function Help() {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [expandedFaq, setExpandedFaq] = useState<number | null>(null);

  const faqs: FAQ[] = [
    {
      question: "How does Vexxa work?",
      answer: "Vexxa connects you with verified vacuum excavator providers across the UK. Simply search for equipment based on your location and requirements, compare options, and book directly through our platform.",
      category: "general"
    },
    {
      question: "What information do I need to make a booking?",
      answer: "To make a booking, you'll need to provide your project details, desired dates, location, and any specific equipment requirements. You'll also need to create an account if you haven't already.",
      category: "booking"
    },
    {
      question: "How do I cancel or modify a booking?",
      answer: "You can cancel or modify your booking through your account dashboard. Please note that cancellation policies vary by provider and are clearly stated at the time of booking.",
      category: "booking"
    },
    {
      question: "What safety certifications do providers need?",
      answer: "All providers must maintain valid insurance, operator certifications, and equipment safety certificates. We regularly verify these credentials to ensure compliance.",
      category: "safety"
    },
    {
      question: "How are equipment prices determined?",
      answer: "Prices are set by individual providers and typically include the equipment, operator, and basic accessories. Additional services or equipment may incur extra charges.",
      category: "pricing"
    }
  ];

  const categories = [
    { id: 'all', label: 'All Categories', icon: HelpCircle },
    { id: 'general', label: 'General', icon: BookOpen },
    { id: 'booking', label: 'Booking', icon: Wrench },
    { id: 'safety', label: 'Safety', icon: Shield },
    { id: 'pricing', label: 'Pricing', icon: AlertCircle }
  ];

  const filteredFaqs = faqs.filter(faq => {
    const matchesSearch = faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         faq.answer.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCategory = selectedCategory === 'all' || faq.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  // Convert FAQs to the format needed for SEO schema
  const faqItems = faqs.map(faq => ({
    question: faq.question,
    answer: faq.answer
  }));

  return (
    <div className="min-h-screen flex flex-col">
      <PageSEO {...helpPageSEO(faqItems)} />
      <BackToAppHeader />
      <div className="flex-grow pt-16">
        <div className="max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h1 className="text-3xl font-bold text-gray-900 sm:text-4xl mb-4">
              Help & Advice
            </h1>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Find answers to common questions and learn more about vacuum excavation services.
            </p>
          </div>

          <div className="max-w-2xl mx-auto mb-8">
            <div className="relative">
              <input
                type="text"
                placeholder="Search help articles..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent"
              />
              <Search className="w-6 h-6 text-gray-400 absolute left-4 top-1/2 transform -translate-y-1/2" />
            </div>
          </div>

          <div className="flex flex-wrap justify-center gap-4 mb-12">
            {categories.map((category) => (
              <button
                key={category.id}
                onClick={() => setSelectedCategory(category.id)}
                className={`flex items-center px-4 py-2 rounded-lg transition-colors ${
                  selectedCategory === category.id
                    ? 'bg-[#004a80] hover:bg-[#00224f] text-white'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                }`}
              >
                <category.icon className="w-5 h-5 mr-2" />
                {category.label}
              </button>
            ))}
          </div>

          <div className="max-w-3xl mx-auto space-y-4">
            {filteredFaqs.map((faq, index) => (
              <div
                key={index}
                className="bg-white rounded-lg shadow-md overflow-hidden"
              >
                <button
                  onClick={() => setExpandedFaq(expandedFaq === index ? null : index)}
                  className="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50"
                >
                  <span className="font-medium text-gray-900">{faq.question}</span>
                  {expandedFaq === index ? (
                    <ChevronUp className="w-5 h-5 text-gray-500" />
                  ) : (
                    <ChevronDown className="w-5 h-5 text-gray-500" />
                  )}
                </button>
                {expandedFaq === index && (
                  <div className="px-6 py-4 bg-gray-50 border-t border-gray-100">
                    <p className="text-gray-600">{faq.answer}</p>
                  </div>
                )}
              </div>
            ))}
          </div>

          <div className="mt-12 text-center">
            <p className="text-gray-600 mb-4">
              Can't find what you're looking for?
            </p>
            <a
              href="mailto:support@vacexdispatch.com"
              className="btn-primary bg-gradient-to-b from-[#003580] to-[#002255] inline-flex items-center"
            >
              Contact Support
            </a>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}