import { useState } from 'react';
import { motion } from 'motion/react';
import { 
  Mail, 
  Phone, 
  MessageCircle, 
  HelpCircle, 
  FileText, 
  CreditCard,
  Upload,
  Send,
  ChevronRight,
  CheckCircle
} from 'lucide-react';
import { Button } from '../components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { Input } from '../components/ui/input';
import { Label } from '../components/ui/label';
import { Textarea } from '../components/ui/textarea';
import Navbar from '../components/Navbar';
import { Footer } from '../components/Footer';

interface ContactUsPageProps {
  onBackClick: () => void;
  onHomeClick: () => void;
  onPassesClick: () => void;
  onCheckoutClick: () => void;
  onSignInClick: () => void;
  onSignOutClick?: () => void;
  onAttractionsClick: () => void;
  onBlogsClick: () => void;
  onHowItWorksClick: () => void;
  onFAQClick: () => void;
  onPrivacyPolicyClick: () => void;
  onAboutUsClick: () => void;
  onProfileClick: () => void;
  onCityCardsClick: () => void;
  onMagicItineraryClick: () => void;
  onPostCardsClick: () => void;
  onOffersClick: () => void;
  onEsimsClick: () => void;
  onHotelDiscountsClick: () => void;
  currentPage?: string;
  user?: { email: string; name: string } | null;
}

interface CommonQuestion {
  id: string;
  question: string;
  category: string;
  icon: typeof HelpCircle;
  iconBgColor: string;
}

export function ContactUsPage({
  onBackClick,
  onHomeClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onEsimsClick,
  onHotelDiscountsClick,
  currentPage,
  user
}: ContactUsPageProps) {
  const [formData, setFormData] = useState({
    subject: '',
    description: '',
    email: user?.email || '',
    phone: ''
  });
  const [fileName, setFileName] = useState<string>('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const commonQuestions: CommonQuestion[] = [
    {
      id: '1',
      question: 'How to redeem passes?',
      category: 'Guide',
      icon: HelpCircle,
      iconBgColor: 'bg-blue-100 text-blue-600'
    },
    {
      id: '2',
      question: 'Refund Policy',
      category: 'Policy',
      icon: FileText,
      iconBgColor: 'bg-orange-100 text-orange-600'
    },
    {
      id: '3',
      question: 'Payment Issues',
      category: 'Billing and Payments',
      icon: CreditCard,
      iconBgColor: 'bg-green-100 text-green-600'
    },
    {
      id: '4',
      question: 'Refund Policy',
      category: 'Policy',
      icon: FileText,
      iconBgColor: 'bg-orange-100 text-orange-600'
    },
    {
      id: '5',
      question: 'How to redeem passes?',
      category: 'Guide',
      icon: HelpCircle,
      iconBgColor: 'bg-blue-100 text-blue-600'
    },
    {
      id: '6',
      question: 'Payment Issues',
      category: 'Billing and Payments',
      icon: CreditCard,
      iconBgColor: 'bg-green-100 text-green-600'
    },
    {
      id: '7',
      question: 'Refund Policy',
      category: 'Policy',
      icon: FileText,
      iconBgColor: 'bg-orange-100 text-orange-600'
    }
  ];

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setFileName(file.name);
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    // Simulate API call
    setTimeout(() => {
      setIsSubmitting(false);
      setIsSubmitted(true);
      
      // Reset form after 3 seconds
      setTimeout(() => {
        setIsSubmitted(false);
        setFormData({
          subject: '',
          description: '',
          email: user?.email || '',
          phone: ''
        });
        setFileName('');
      }, 3000);
    }, 1500);
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <Navbar
        activeCity="Paris"
        onCityChange={() => {}}
        onHomeClick={onHomeClick}
        onPassesClick={onPassesClick}
        onCheckoutClick={onCheckoutClick}
        onSignInClick={onSignInClick}
        onSignOutClick={onSignOutClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onAboutUsClick={onAboutUsClick}
        onProfileClick={onProfileClick}
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        onEsimsClick={onEsimsClick}
        onHotelDiscountsClick={onHotelDiscountsClick}
        currentPage={currentPage}
        user={user}
      />

      {/* Hero Section */}
      <section className="pt-32 pb-16 bg-gradient-to-br from-primary/5 via-white to-secondary/5">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-center max-w-3xl mx-auto"
          >
            <div className="inline-flex items-center justify-center w-20 h-20 bg-primary/10 rounded-full mb-6">
              <MessageCircle className="w-10 h-10 text-primary" />
            </div>
            <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl mb-4">
              <span className="font-medium">Help &</span>{' '}
              <span className="font-semibold text-primary">Support</span>
            </h1>
            <p className="font-poppins text-xl text-gray-600 font-normal">
              Get assistance with your CityCards experience
            </p>
          </motion.div>
        </div>
      </section>

      {/* Main Content */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-12 max-w-7xl mx-auto">
            
            {/* Left Column - Common Questions */}
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              <div className="mb-8">
                <h2 className="font-merchant text-3xl md:text-4xl mb-3">
                  <span className="font-medium">Common</span>{' '}
                  <span className="font-semibold text-primary">Questions</span>
                </h2>
                <p className="font-poppins text-base text-gray-600 font-normal">
                  Quick answers to frequently asked questions
                </p>
              </div>

              <div className="space-y-4 mb-8">
                {commonQuestions.map((question, index) => (
                  <motion.div
                    key={question.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, delay: 0.1 * index }}
                  >
                    <Card className="cursor-pointer hover:shadow-lg transition-all duration-300 group border-2 hover:border-primary/20">
                      <CardContent className="p-5">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-4 flex-1">
                            <div className={`w-12 h-12 rounded-full ${question.iconBgColor} flex items-center justify-center flex-shrink-0`}>
                              <question.icon className="w-6 h-6" />
                            </div>
                            <div className="flex-1">
                              <h3 className="font-poppins font-medium text-base mb-1">
                                {question.question}
                              </h3>
                              <p className="font-poppins text-sm text-gray-500 font-normal">
                                {question.category}
                              </p>
                            </div>
                          </div>
                          <ChevronRight className="w-5 h-5 text-gray-400 group-hover:text-primary transition-colors" />
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                ))}
              </div>

              <div className="flex flex-col sm:flex-row gap-4">
                <Button
                  onClick={onFAQClick}
                  className="flex-1 h-14 font-poppins font-semibold bg-primary hover:bg-primary/90"
                >
                  Browse FAQ
                </Button>
              </div>
            </motion.div>

            {/* Right Column - Support Form */}
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.3 }}
            >
              <Card className="shadow-xl border-2">
                <CardHeader className="border-b bg-gray-50/50">
                  <CardTitle className="font-merchant text-2xl font-semibold">
                    Contact Support
                  </CardTitle>
                  <p className="font-poppins text-sm text-gray-600 font-normal mt-2">
                    Need help? We're here for you. Raise a ticket and our support team will get back to you shortly
                  </p>
                </CardHeader>
                <CardContent className="p-6">
                  {isSubmitted ? (
                    <motion.div
                      initial={{ opacity: 0, scale: 0.9 }}
                      animate={{ opacity: 1, scale: 1 }}
                      className="text-center py-12"
                    >
                      <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <CheckCircle className="w-10 h-10 text-green-600" />
                      </div>
                      <h3 className="font-merchant text-2xl font-semibold mb-2">
                        Ticket Submitted!
                      </h3>
                      <p className="font-poppins text-base text-gray-600 font-normal">
                        We'll get back to you shortly
                      </p>
                    </motion.div>
                  ) : (
                    <form onSubmit={handleSubmit} className="space-y-6">
                      {/* Subject */}
                      <div>
                        <Label className="font-poppins font-normal text-base mb-2 block">
                          Subject
                        </Label>
                        <Input
                          type="text"
                          placeholder="Enter Subject"
                          value={formData.subject}
                          onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                          required
                          className="h-12 font-poppins font-normal"
                        />
                      </div>

                      {/* Description */}
                      <div>
                        <Label className="font-poppins font-normal text-base mb-2 block">
                          Description
                        </Label>
                        <Textarea
                          placeholder="Enter Description"
                          value={formData.description}
                          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                          required
                          rows={6}
                          className="font-poppins font-normal resize-none"
                        />
                      </div>

                      {/* File Upload */}
                      <div>
                        <Label className="font-poppins font-normal text-base mb-2 block">
                          File upload
                        </Label>
                        <div className="relative">
                          <Input
                            type="file"
                            onChange={handleFileChange}
                            className="hidden"
                            id="file-upload"
                            accept="image/*,.pdf,.doc,.docx"
                          />
                          <label
                            htmlFor="file-upload"
                            className="flex items-center justify-between h-12 px-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-primary/30 transition-colors bg-white"
                          >
                            <span className="font-poppins font-normal text-base text-gray-500">
                              {fileName || 'Upload File'}
                            </span>
                            <Upload className="w-5 h-5 text-gray-400" />
                          </label>
                        </div>
                      </div>

                      {/* Contact Details */}
                      <div className="pt-4 border-t">
                        <h3 className="font-merchant text-xl font-semibold mb-4">
                          Contact Details
                        </h3>
                        
                        <div className="space-y-4">
                          {/* Email */}
                          <div className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg">
                            <Mail className="w-5 h-5 text-primary flex-shrink-0" />
                            <div className="flex-1">
                              <p className="font-poppins text-sm text-gray-500 font-normal mb-1">
                                Email
                              </p>
                              {user ? (
                                <p className="font-poppins font-medium text-base">
                                  {user.email}
                                </p>
                              ) : (
                                <Input
                                  type="email"
                                  placeholder="your.email@example.com"
                                  value={formData.email}
                                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                                  required
                                  className="h-10 font-poppins font-normal mt-1"
                                />
                              )}
                            </div>
                          </div>

                          {/* Phone */}
                          <div className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg">
                            <Phone className="w-5 h-5 text-primary flex-shrink-0" />
                            <div className="flex-1">
                              <p className="font-poppins text-sm text-gray-500 font-normal mb-1">
                                Phone
                              </p>
                              <Input
                                type="tel"
                                placeholder="(+971) 050 4245 564"
                                value={formData.phone}
                                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                                className="h-10 font-poppins font-normal mt-1"
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      {/* Submit Button */}
                      <Button
                        type="submit"
                        disabled={isSubmitting}
                        className="w-full h-14 font-poppins font-semibold bg-primary hover:bg-primary/90 text-lg"
                      >
                        {isSubmitting ? (
                          <>
                            <span className="animate-spin mr-2">⏳</span>
                            Submitting...
                          </>
                        ) : (
                          <>
                            <Send className="w-5 h-5 mr-2" />
                            Submit Ticket
                          </>
                        )}
                      </Button>
                    </form>
                  )}
                </CardContent>
              </Card>

              {/* Additional Contact Info */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.5 }}
                className="mt-6 p-6 bg-gradient-to-br from-primary/5 to-secondary/5 rounded-lg"
              >
                <h3 className="font-merchant text-lg font-semibold mb-3">
                  Other Ways to Reach Us
                </h3>
                <div className="space-y-3">
                  <div className="flex items-center gap-3">
                    <Mail className="w-5 h-5 text-primary" />
                    <a href="mailto:support@citycards.com" className="font-poppins text-base font-normal hover:text-primary transition-colors">
                      support@citycards.com
                    </a>
                  </div>
                  <div className="flex items-center gap-3">
                    <Phone className="w-5 h-5 text-primary" />
                    <a href="tel:+97105042455564" className="font-poppins text-base font-normal hover:text-primary transition-colors">
                      (+971) 050 4245 564
                    </a>
                  </div>
                </div>
              </motion.div>
            </motion.div>

          </div>
        </div>
      </section>

      <Footer
        onHomeClick={onHomeClick}
        onPassesClick={onPassesClick}
        onCheckoutClick={onCheckoutClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onAboutUsClick={onAboutUsClick}
        onContactUsClick={() => {}}
      />
    </div>
  );
}
