'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { Header } from '@/components/header'
import { Footer } from '@/components/footer'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, 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 { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Badge } from '@/components/ui/badge'
import {
  Clock,
  Calendar,
  CalendarDays,
  Users,
  Code,
  Briefcase,
  CheckCircle,
  AlertCircle,
  Star,
} from 'lucide-react'
import { useAuth } from '@/contexts/AuthContext'
import { useToast } from '@/hooks/use-toast'
import { formatCurrency, validateBalance } from '@/lib/balance-service'

interface DeveloperPlan {
  id: string
  name: string
  price: string
  value: number
  icon: React.ReactNode
  popular: boolean
  features: string[]
  description: string
}

export default function HumanDeveloperPage() {
  const router = useRouter()
  const { user, balance, refreshBalance } = useAuth()
  const { toast } = useToast()
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')

  // Form state
  const [selectedPlan, setSelectedPlan] = useState('')
  const [requirements, setRequirements] = useState('')
  const [contactInfo, setContactInfo] = useState({
    name: user?.name || '',
    email: user?.email || '',
    phone: '',
  })

  // Available developer plans
  const plans: DeveloperPlan[] = [
    {
      id: 'hourly',
      name: 'Hourly',
      price: '₹2,000',
      value: 2000,
      icon: <Clock className="w-5 h-5" />,
      popular: false,
      description: 'Perfect for quick fixes and consultations',
      features: [
        'Flexible hours',
        'Pay as you go',
        'Minimum 2 hours',
        'Quick fixes & bug fixes',
        'Technical consultation',
      ],
    },
    {
      id: 'daily',
      name: 'Daily',
      price: '₹5,000',
      value: 5000,
      icon: <Calendar className="w-5 h-5" />,
      popular: true,
      description: 'Best for short-term projects and rapid development',
      features: [
        '8 hours per day',
        'Priority support',
        'Daily progress reports',
        'Dedicated developer',
        'Progress tracking',
      ],
    },
    {
      id: 'monthly',
      name: 'Monthly',
      price: '₹1,00,000',
      value: 100000,
      icon: <CalendarDays className="w-5 h-5" />,
      popular: false,
      description: 'Complete solution for large projects',
      features: [
        'Full-time developer (160+ hours)',
        'Dedicated project manager',
        'Weekly sprint planning',
        'Complete project planning',
        'Priority feature development',
      ],
    },
  ]

  // Technology expertise areas
  const techStack = [
    'React & Next.js',
    'Node.js',
    'Python',
    'PHP',
    'Laravel',
    'Vue.js',
    'Angular',
    'React Native',
    'Flutter',
    'WordPress',
    'Shopify',
    'Database Design',
    'API Development',
    'DevOps',
    'UI/UX Design',
    'Mobile Apps',
    'E-commerce',
    'CMS Development',
  ]

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
    setSuccess('')

    if (!user) {
      router.push('/auth?redirect=/services/human-developer')
      return
    }

    // Validate form
    if (!selectedPlan) {
      setError('Please select a plan')
      return
    }

    if (!requirements.trim()) {
      setError('Please describe your project requirements')
      return
    }

    if (!contactInfo.name || !contactInfo.email) {
      setError('Please fill in all contact information')
      return
    }

    const selectedPlanData = plans.find((p) => p.id === selectedPlan)
    if (!selectedPlanData) {
      setError('Invalid plan selected')
      return
    }

    // Check balance before proceeding
    const minimumDeposit = selectedPlanData.value * 0.5
    if (!validateBalance(balance || 0, minimumDeposit)) {
      setError(
        `Insufficient balance. Minimum deposit required: ${formatCurrency(minimumDeposit)}, Available: ${formatCurrency(balance || 0)}`
      )
      return
    }

    setLoading(true)

    try {
      const response = await fetch('/api/services/hire-developer', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          planId: selectedPlan,
          planName: selectedPlanData.name,
          planPrice: selectedPlanData.value,
          requirements: requirements.trim(),
          contactInfo: {
            name: contactInfo.name.trim(),
            email: contactInfo.email.trim(),
            phone: contactInfo.phone?.trim() || undefined,
          },
        }),
      })

      const data = await response.json()

      if (!response.ok) {
        throw new Error(data.error?.message || 'Failed to submit request')
      }

      if (data.success) {
        setSuccess(data.data.message)
        toast({
          title: 'Request Submitted Successfully!',
          description: `Deposit of ${formatCurrency(minimumDeposit)} has been deducted. Request ID: ${data.data.requestId}`,
        })

        // Refresh user balance
        await refreshBalance()

        // Reset form
        setSelectedPlan('')
        setRequirements('')
        setContactInfo({
          name: user?.name || '',
          email: user?.email || '',
          phone: '',
        })
      } else {
        throw new Error(data.error?.message || 'Failed to submit request')
      }
    } catch (err) {
      console.error('Developer hire error:', err)
      const errorMessage = err instanceof Error ? err.message : 'Failed to submit request'
      setError(errorMessage)
      toast({
        title: 'Request Failed',
        description: errorMessage,
        variant: 'destructive',
      })
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen bg-background">
      <Header />

      <div className="container mx-auto px-4 pt-24 pb-16">
        <div className="max-w-6xl mx-auto">
          {/* Page Header */}
          <div className="text-center mb-12">
            <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full mb-4">
              <Users className="w-8 h-8 text-white" />
            </div>
            <h1 className="text-4xl font-bold mb-4">Hire Expert Developers</h1>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              Get skilled developers for your projects. From quick fixes to full-scale applications.
            </p>
          </div>

          {!user && (
            <Alert className="mb-8">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>
                You need to be logged in to hire developers.{' '}
                <a
                  href="/auth?redirect=/services/human-developer"
                  className="text-primary underline"
                >
                  Click here to login
                </a>
              </AlertDescription>
            </Alert>
          )}

          {success && (
            <Alert className="mb-8">
              <CheckCircle className="h-4 w-4" />
              <AlertDescription>{success}</AlertDescription>
            </Alert>
          )}

          <form onSubmit={handleSubmit}>
            <div className="space-y-8">
              {/* Plan Selection */}
              <div>
                <h2 className="text-2xl font-semibold mb-6">Choose Your Plan</h2>
                <RadioGroup value={selectedPlan} onValueChange={setSelectedPlan}>
                  <div className="grid md:grid-cols-3 gap-6">
                    {plans.map((plan) => (
                      <div key={plan.id} className="relative">
                        <RadioGroupItem value={plan.id} id={plan.id} className="peer sr-only" />
                        <Label
                          htmlFor={plan.id}
                          className={`block cursor-pointer transition-all rounded-xl hover:shadow-lg ${
                            plan.popular ? 'ring-2 ring-primary' : ''
                          }`}
                        >
                          <Card
                            className={`h-full transition-all ${
                              selectedPlan === plan.id
                                ? 'border-primary border-2 shadow-lg bg-primary/5 ring-2 ring-primary/20'
                                : 'hover:border-primary/50'
                            }`}
                          >
                            {plan.popular && (
                              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                                <Badge className="bg-gradient-to-r from-blue-500 to-purple-600">
                                  <Star className="w-3 h-3 mr-1" />
                                  Most Popular
                                </Badge>
                              </div>
                            )}

                            {selectedPlan === plan.id && (
                              <div className="absolute -top-3 left-4">
                                <Badge className="bg-gradient-to-r from-blue-500 to-purple-600 text-white">
                                  <CheckCircle className="w-3 h-3 mr-1" />
                                  Selected
                                </Badge>
                              </div>
                            )}

                            <CardHeader className="text-center pb-4">
                              <div className="relative">
                                <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-3 text-white">
                                  {plan.icon}
                                </div>
                                {/* {selectedPlan === plan.id && (
                                  <div className="absolute -top-1 -right-1 w-6 h-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center border-2 border-white">
                                    <CheckCircle className="w-4 h-4 text-white" />
                                  </div>
                                )} */}
                              </div>
                              <CardTitle className="text-xl">{plan.name}</CardTitle>
                              <div className="text-3xl font-bold text-primary">
                                {plan.price}
                                <span className="text-sm font-normal text-muted-foreground">
                                  /{plan.id}
                                </span>
                              </div>
                              <CardDescription className="mt-2">{plan.description}</CardDescription>
                            </CardHeader>

                            <CardContent>
                              <ul className="space-y-2">
                                {plan.features.map((feature, idx) => (
                                  <li key={idx} className="flex items-start gap-2">
                                    <CheckCircle className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
                                    <span className="text-sm">{feature}</span>
                                  </li>
                                ))}
                              </ul>
                            </CardContent>
                          </Card>
                        </Label>
                      </div>
                    ))}
                  </div>
                </RadioGroup>
              </div>

              {/* Project Requirements */}
              <Card>
                <CardHeader>
                  <CardTitle>Project Requirements</CardTitle>
                  <CardDescription>
                    Describe your project in detail to help us match you with the right developer
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <Label htmlFor="requirements">Project Description *</Label>
                    <Textarea
                      id="requirements"
                      rows={6}
                      placeholder="Please describe your project requirements, technology stack, timeline, and any specific needs..."
                      value={requirements}
                      onChange={(e) => setRequirements(e.target.value)}
                      required
                    />
                  </div>

                  {/* Technology Stack */}
                  <div>
                    <Label>Our Technology Expertise</Label>
                    <div className="flex flex-wrap gap-2 mt-2">
                      {techStack.map((tech, idx) => (
                        <Badge key={idx} variant="secondary" className="text-xs">
                          {tech}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Contact Information */}
              <Card>
                <CardHeader>
                  <CardTitle>Contact Information</CardTitle>
                  <CardDescription>We'll use this to get in touch with you</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="name">Full Name *</Label>
                      <Input
                        id="name"
                        value={contactInfo.name}
                        onChange={(e) => setContactInfo({ ...contactInfo, name: e.target.value })}
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="email">Email Address *</Label>
                      <Input
                        id="email"
                        type="email"
                        value={contactInfo.email}
                        onChange={(e) => setContactInfo({ ...contactInfo, email: e.target.value })}
                        required
                      />
                    </div>
                  </div>
                  <div>
                    <Label htmlFor="phone">Phone Number</Label>
                    <Input
                      id="phone"
                      type="tel"
                      placeholder="+91 98765 43210"
                      value={contactInfo.phone}
                      onChange={(e) => setContactInfo({ ...contactInfo, phone: e.target.value })}
                    />
                  </div>
                </CardContent>
              </Card>

              {/* Balance Check & Order Summary */}
              {selectedPlan && (
                <Card>
                  <CardHeader>
                    <CardTitle>Order Summary</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Plan Selected</span>
                        <span>{plans.find((p) => p.id === selectedPlan)?.name}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Rate</span>
                        <span>{plans.find((p) => p.id === selectedPlan)?.price}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Minimum Deposit (50%)</span>
                        <span className="text-orange-600">
                          {formatCurrency(
                            (plans.find((p) => p.id === selectedPlan)?.value || 0) * 0.5
                          )}
                        </span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Your Balance</span>
                        <span
                          className={
                            balance &&
                            balance >= (plans.find((p) => p.id === selectedPlan)?.value || 0) * 0.5
                              ? 'text-green-600'
                              : 'text-red-600'
                          }
                        >
                          {formatCurrency(balance || 0)}
                        </span>
                      </div>
                      <div className="border-t pt-2">
                        <div className="flex justify-between font-semibold">
                          <span>Deposit Required</span>
                          <span className="text-primary">
                            {formatCurrency(
                              (plans.find((p) => p.id === selectedPlan)?.value || 0) * 0.5
                            )}
                          </span>
                        </div>
                      </div>
                    </div>
                    <div className="mt-4 p-3 bg-muted/50 rounded-lg">
                      <p className="text-xs text-muted-foreground">
                        * A 50% deposit is required to start. Final pricing will be discussed based
                        on your specific requirements and project scope.
                      </p>
                    </div>
                    {balance &&
                      balance < (plans.find((p) => p.id === selectedPlan)?.value || 0) * 0.5 && (
                        <Alert className="mt-4">
                          <AlertCircle className="h-4 w-4" />
                          <AlertDescription>
                            Insufficient balance. Please{' '}
                            <a href="/balance" className="text-primary underline">
                              add funds to your account
                            </a>{' '}
                            before proceeding.
                          </AlertDescription>
                        </Alert>
                      )}
                  </CardContent>
                </Card>
              )}

              {error && (
                <Alert variant="destructive">
                  <AlertCircle className="h-4 w-4" />
                  <AlertDescription>{error}</AlertDescription>
                </Alert>
              )}

              {/* Submit Button */}
              <Button type="submit" className="w-full" size="lg" disabled={loading || !user}>
                {loading ? 'Submitting Request...' : 'Submit Request & Proceed to Payment'}
              </Button>
            </div>
          </form>

          {/* Why Choose Us */}
          <div className="mt-16">
            <h3 className="text-2xl font-semibold mb-8 text-center">Why Choose Our Developers?</h3>
            <div className="grid md:grid-cols-4 gap-6">
              <Card>
                <CardContent className="pt-6">
                  <div className="text-center">
                    <div className="inline-flex items-center justify-center w-12 h-12 bg-primary/10 rounded-full mb-3">
                      <Code className="w-6 h-6 text-primary" />
                    </div>
                    <h4 className="font-semibold mb-2">Expert Skills</h4>
                    <p className="text-sm text-muted-foreground">
                      5+ years experience in modern tech stacks
                    </p>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardContent className="pt-6">
                  <div className="text-center">
                    <div className="inline-flex items-center justify-center w-12 h-12 bg-primary/10 rounded-full mb-3">
                      <CheckCircle className="w-6 h-6 text-primary" />
                    </div>
                    <h4 className="font-semibold mb-2">Quality Assured</h4>
                    <p className="text-sm text-muted-foreground">
                      Code reviews and testing included
                    </p>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardContent className="pt-6">
                  <div className="text-center">
                    <div className="inline-flex items-center justify-center w-12 h-12 bg-primary/10 rounded-full mb-3">
                      <Clock className="w-6 h-6 text-primary" />
                    </div>
                    <h4 className="font-semibold mb-2">On-Time Delivery</h4>
                    <p className="text-sm text-muted-foreground">
                      Meeting deadlines is our priority
                    </p>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardContent className="pt-6">
                  <div className="text-center">
                    <div className="inline-flex items-center justify-center w-12 h-12 bg-primary/10 rounded-full mb-3">
                      <Briefcase className="w-6 h-6 text-primary" />
                    </div>
                    <h4 className="font-semibold mb-2">Full Support</h4>
                    <p className="text-sm text-muted-foreground">
                      Post-delivery support and maintenance
                    </p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  )
}