import { useState } from 'react'
import { Button } from '@/components/ui/button.jsx'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.jsx'
import { Input } from '@/components/ui/input.jsx'
import { Label } from '@/components/ui/label.jsx'
import { Textarea } from '@/components/ui/textarea.jsx'
import { Checkbox } from '@/components/ui/checkbox.jsx'
import { Badge } from '@/components/ui/badge.jsx'
import { Globe, Mail, User, MessageSquare, CheckCircle, AlertCircle, DollarSign } from 'lucide-react'
import { Link } from 'react-router-dom'
import { loadStripe } from '@stripe/stripe-js'

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the Stripe object on every render.
// This is your publishable key.
const stripePromise = loadStripe('pk_test_TYooMQauvdEDq5XKxTMn5jxK') // Replace with your actual publishable key

function DirectBuy() {
  const [currentStep, setCurrentStep] = useState(1)
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    country: '',
    uniqueNamePart1: '',
    uniqueNamePart2: '',
    experience: '',
    whyInterested: '',
    tipsForInfo: '',
    newsletter: false,
    terms: false
  })
  
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitStatus, setSubmitStatus] = useState(null) // 'success', 'error', or null
  const [uniqueNameError, setUniqueNameError] = useState('')
  const [uniqueNameValid, setUniqueNameValid] = useState(false)

  const handleInputChange = (e) => {
    const { id, value, type, checked } = e.target
    setFormData(prev => ({
      ...prev,
      [id]: type === 'checkbox' ? checked : value
    }))
  }

  const validateUniqueNamePart = (part) => {
    const regex = /^[a-z]{6,}$/
    return regex.test(part)
  }

  const validateStep1 = () => {
    const { name, email, uniqueNamePart1, uniqueNamePart2 } = formData
    if (!name || !email) {
      setSubmitStatus('error')
      setUniqueNameValid(false) // Set to false if other required fields are missing
      return false
    }

    let isValid = true
    if (!validateUniqueNamePart(uniqueNamePart1)) {
      setUniqueNameError('First part must be at least 6 lowercase letters.')
      isValid = false
    } else if (!validateUniqueNamePart(uniqueNamePart2)) {
      setUniqueNameError('Second part must be at least 6 lowercase letters.')
      isValid = false
    } else {
      setUniqueNameError('')
    }

    setUniqueNameValid(isValid)
    if (!isValid) {
      setSubmitStatus('error')
      return false
    }
    setSubmitStatus(null)
    return true
  }

  const validateStep2 = () => {
    const { terms } = formData
    if (!terms) {
      setSubmitStatus('error')
      return false
    }
    setSubmitStatus(null)
    return true
  }

  const handleNext = () => {
    setSubmitStatus(null) // Clear previous status
    if (currentStep === 1 && !validateStep1()) {
      return
    }
    if (currentStep === 2 && !validateStep2()) {
      return
    }
    setCurrentStep(prev => prev + 1)
  }

  const handlePrev = () => {
    setSubmitStatus(null) // Clear previous status
    setCurrentStep(prev => prev - 1)
  }

  const handleBuy = async (e) => {
    e.preventDefault()
    setIsSubmitting(true)
    setSubmitStatus(null)

    try {
      // Create a Checkout Session on your backend
      // Replace with your actual API endpoint
      const response = await fetch('https://your-backend.com/create-checkout-session', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: formData.name,
          email: formData.email,
          country: formData.country,
          uniqueName: `${formData.uniqueNamePart1}.${formData.uniqueNamePart2}`,
          experience: formData.experience,
          whyInterested: formData.whyInterested,
          tipsForInfo: formData.tipsForInfo,
          newsletter: formData.newsletter,
          priceId: 'price_12345', // Replace with your actual Stripe Price ID for $20/month
        }),
      })

      if (!response.ok) {
        throw new Error('Failed to create Stripe Checkout Session')
      }

      const { sessionId } = await response.json()

      const stripe = await stripePromise
      const { error } = await stripe.redirectToCheckout({
        sessionId,
      })

      if (error) {
        console.error('Stripe checkout error:', error)
        setSubmitStatus('error')
      }

    } catch (error) {
      console.error('Purchase error:', error)
      setSubmitStatus('error')
    } finally {
      setIsSubmitting(false)
    }
  }

  const renderStepContent = () => {
    switch (currentStep) {
      case 1:
        return (
          <>
            <CardHeader className="text-center">
              <CardTitle className="text-2xl">Step 1: Personal Information</CardTitle>
              <CardDescription>
                Tell us about yourself and choose your unique identifier.
              </CardDescription>
            </CardHeader>
            <CardContent>
              {submitStatus === 'error' && (
                <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
                  <AlertCircle className="h-5 w-5 text-red-600" />
                  <div>
                    <h4 className="font-semibold text-red-800">Validation Error</h4>
                    <p className="text-red-700">Please fill in all required fields and correct any errors.</p>
                  </div>
                </div>
              )}
              <div className="space-y-6">
                {/* Personal Information */}
                <div className="space-y-4">
                  <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
                    <User className="h-5 w-5" />
                    Your Details
                  </h3>
                  
                  <div className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="name">Full Name *</Label>
                      <Input
                        id="name"
                        type="text"
                        value={formData.name}
                        onChange={handleInputChange}
                        placeholder="Your full name"
                        required
                      />
                    </div>
                    
                    <div className="space-y-2">
                      <Label htmlFor="email">Email Address *</Label>
                      <Input
                        id="email"
                        type="email"
                        value={formData.email}
                        onChange={handleInputChange}
                        placeholder="your@email.com"
                        required
                      />
                    </div>
                  </div>
                  
                  <div className="space-y-2">
                    <Label htmlFor="country">Country/Region</Label>
                    <Input
                      id="country"
                      type="text"
                      value={formData.country}
                      onChange={handleInputChange}
                      placeholder="Your country or region"
                    />
                  </div>
                </div>

                {/* Unique Name */}
                <div className="space-y-4">
                  <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
                    <Globe className="h-5 w-5" />
                    Choose Your Unique Name
                  </h3>
                  <p className="text-sm text-slate-600">This will be your unique identifier (e.g., firstpart.secondpart). Each part must be 7 lowercase letters.</p>
                  <div className="grid md:grid-cols-2 gap-4 items-end">
                    <div className="space-y-2">
                      <Label htmlFor="uniqueNamePart1">First Part *</Label>
                      <Input
                        id="uniqueNamePart1"
                        type="text"
                        value={formData.uniqueNamePart1}
                        onChange={(e) => {
                          setFormData(prev => ({ ...prev, uniqueNamePart1: e.target.value.toLowerCase() }))
                          setUniqueNameError('')
                        }}
                        placeholder="at least 6 lowercase letters"
                        required
                        className={uniqueNameError && formData.uniqueNamePart1 ? 'border-red-500' : uniqueNameValid && formData.uniqueNamePart1 ? 'border-green-500' : ''}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="uniqueNamePart2">Second Part *</Label>
                      <Input
                        id="uniqueNamePart2"
                        type="text"
                        value={formData.uniqueNamePart2}
                        onChange={(e) => {
                          setFormData(prev => ({ ...prev, uniqueNamePart2: e.target.value.toLowerCase() }))
                          setUniqueNameError('')
                        }}
                        placeholder="at least 6 lowercase letters"
                        required
                        className={uniqueNameError && formData.uniqueNamePart2 ? 'border-red-500' : uniqueNameValid && formData.uniqueNamePart2 ? 'border-green-500' : ''}
                      />
                    </div>
                  </div>
                  {uniqueNameError && <p className="text-red-500 text-sm">{uniqueNameError}</p>}
                </div>

                <Button type="button" onClick={handleNext} className="w-full bg-blue-600 hover:bg-blue-700 text-lg py-3">
                  Next: About You & Preferences
                </Button>
              </div>
            </CardContent>
          </>
        )
      case 2:
        return (
          <>
            <CardHeader className="text-center">
              <CardTitle className="text-2xl">Step 2: About You & Preferences</CardTitle>
              <CardDescription>
                Share more about your interests and communication preferences.
              </CardDescription>
            </CardHeader>
            <CardContent>
              {submitStatus === 'error' && (
                <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
                  <AlertCircle className="h-5 w-5 text-red-600" />
                  <div>
                    <h4 className="font-semibold text-red-800">Validation Error</h4>
                    <p className="text-red-700">Please fill in all required fields and agree to the terms.</p>
                  </div>
                </div>
              )}
              <div className="space-y-6">
                {/* Tell Us About Yourself (Optional) */}
                <div className="space-y-4">
                  <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
                    <MessageSquare className="h-5 w-5" />
                    Tell Us About Yourself (Optional)
                  </h3>
                  
                  <div className="space-y-2">
                    <Label htmlFor="experience">Relevant Experience</Label>
                    <Textarea
                      id="experience"
                      value={formData.experience}
                      onChange={handleInputChange}
                      placeholder="Tell us about your background in technology, governance, cooperatives, or related fields..."
                      rows={4}
                    />
                  </div>
                  
                  <div className="space-y-2">
                    <Label htmlFor="whyInterested">Why are you interested in this service? *</Label>
                    <Textarea
                      id="whyInterested"
                      value={formData.whyInterested}
                      onChange={handleInputChange}
                      placeholder="What motivates you to join ThreeFold Galaxy Coop? What do you hope to contribute or gain?"
                      rows={4}
                    />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="tipsForInfo">Any tips to make info more smooth? (Optional)</Label>
                    <Textarea
                      id="tipsForInfo"
                      value={formData.tipsForInfo}
                      onChange={handleInputChange}
                      placeholder="Share any suggestions for improving our information delivery or onboarding process."
                      rows={4}
                    />
                  </div>
                </div>

                {/* Preferences */}
                <div className="space-y-4">
                  <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
                    <Mail className="h-5 w-5" />
                    Communication Preferences
                  </h3>
                  
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="newsletter"
                      checked={formData.newsletter}
                      onCheckedChange={(checked) => setFormData(prev => ({ ...prev, newsletter: checked }))}
                    />
                    <Label htmlFor="newsletter" className="text-sm">
                      I'd like to receive updates about ThreeFold Galaxy Coop's development and launch
                    </Label>
                  </div>
                </div>

                {/* Terms */}
                <div className="space-y-4">
                  <div className="flex items-start space-x-2">
                    <Checkbox
                      id="terms"
                      checked={formData.terms}
                      onCheckedChange={(checked) => setFormData(prev => ({ ...prev, terms: checked }))}
                      required
                    />
                    <Label htmlFor="terms" className="text-sm">
                      I agree to the <Link to="/terms" className="text-blue-600 hover:underline">Terms of Service</Link> and <Link to="/privacy" className="text-blue-600 hover:underline">Privacy Policy</Link> for my ThreeFold Galaxy Coop membership. *
                    </Label>
                  </div>
                </div>

                <div className="flex justify-between gap-4">
                  <Button type="button" onClick={handlePrev} className="w-1/2 bg-gray-300 hover:bg-gray-400 text-gray-800 text-lg py-3">
                    Previous
                  </Button>
                  <Button type="button" onClick={handleNext} className="w-1/2 bg-blue-600 hover:bg-blue-700 text-lg py-3">
                    Next: Payment
                  </Button>
                </div>
              </div>
            </CardContent>
          </>
        )
      case 3:
        return (
          <>
            <CardHeader className="text-center">
              <CardTitle className="text-2xl">Step 3: Payment</CardTitle>
              <CardDescription>
                Secure your $20 USD/month membership via Stripe.
              </CardDescription>
            </CardHeader>
            <CardContent>
              {submitStatus === 'success' && (
                <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-3">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <div>
                    <h4 className="font-semibold text-green-800">Purchase Initiated!</h4>
                    <p className="text-green-700">Redirecting to secure Stripe checkout...</p>
                  </div>
                </div>
              )}

              {submitStatus === 'error' && (
                <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
                  <AlertCircle className="h-5 w-5 text-red-600" />
                  <div>
                    <h4 className="font-semibold text-red-800">Purchase Failed</h4>
                    <p className="text-red-700">There was an error processing your purchase. Please try again or contact support.</p>
                  </div>
                </div>
              )}

              <div className="space-y-6">
                <p className="text-md text-slate-700 text-center">
                  You are about to purchase a membership to ThreeFold Galaxy Coop for <span className="font-bold">$20 USD per month</span>.
                </p>
                <p className="text-sm text-slate-600 text-center">
                  Click "Proceed to Payment" to be redirected to Stripe's secure checkout page.
                </p>

                <div className="flex justify-between gap-4">
                  <Button type="button" onClick={handlePrev} className="w-1/2 bg-gray-300 hover:bg-gray-400 text-gray-800 text-lg py-3">
                    Previous
                  </Button>
                  <Button
                    type="submit"
                    onClick={handleBuy}
                    className="w-1/2 bg-green-600 hover:bg-green-700 text-lg py-3"
                    disabled={isSubmitting}
                  >
                    {isSubmitting ? 'Processing...' : 'Proceed to Payment'}
                  </Button>
                </div>
              </div>
            </CardContent>
          </>
        )
      default:
        return null
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}

      {/* Hero Section */}
      <section className="py-24 pb-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto text-center space-y-8">
          <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">Direct Purchase</Badge>
          <h1 className="text-4xl md:text-6xl font-bold text-slate-900 leading-tight">
            Become A <span className="text-blue-600">Member</span>
          </h1>
          <p className="text-xl text-slate-600 leading-relaxed max-w-3xl mx-auto">
            Join ThreeFold Galaxy Coop's sovereign digital freezone for $20 USD per month.
          </p>
        </div>
      </section>

      {/* Purchase Form */}
      <section className="pb-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-2xl mx-auto">
          <Card className="shadow-xl">
            {renderStepContent()}
          </Card>
        </div>
      </section>

      {/* What Happens Next */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div className="max-w-4xl mx-auto">
          <div className="text-center space-y-8 mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">What Happens Next?</h2>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8">
            <Card className="text-center">
              <CardHeader>
                <div className="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-white font-bold">1</span>
                </div>
                <CardTitle className="text-blue-600">Confirm Your Membership</CardTitle>
              </CardHeader>
              <CardContent>
                Complete your secure Stripe checkout to confirm your ThreeFold Galaxy Coop membership.
              </CardContent>
            </Card>
            
            <Card className="text-center">
              <CardHeader>
                <div className="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-white font-bold">2</span>
                </div>
                <CardTitle className="text-green-600">Access Your Benefits</CardTitle>
              </CardHeader>
              <CardContent>
                Gain immediate access to member-exclusive content, tools, and community forums.
              </CardContent>
            </Card>
            
            <Card className="text-center">
              <CardHeader>
                <div className="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-white font-bold">3</span>
                </div>
                <CardTitle className="text-purple-600">Engage & Govern</CardTitle>
              </CardHeader>
              <CardContent>
                Participate in cooperative governance, shape the future, and contribute to the digital freezone.
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
        <div className="max-w-6xl mx-auto text-center">
          <div className="flex items-center justify-center space-x-2 mb-4">
            <Globe className="h-6 w-6 text-blue-400" />
            <span className="text-xl font-bold">ThreeFold Galaxy Coop</span>
          </div>
          <p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy Coop. A cooperative for digital freedom.</p>
        </div>
      </footer>
    </div>
  )
}

export default DirectBuy