'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Textarea } from '@/components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Checkbox } from '@/components/ui/checkbox'
import { ArrowLeft, Car, Upload, Loader2, CheckCircle } from 'lucide-react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { UserSidebar } from '@/components/user-sidebar'

interface FormData {
  fullName: string
  placeOfBirth: string
  dateOfBirth: string
  gender: string
  nationality: string
  religion: string
  occupation: string
  address: string
  village: string
  district: string
  regency: string
  province: string
  phone: string
  email: string
  identityNumber: string
  serviceType: string
  vehicleType: string
  vehicleBrand: string
  vehicleTypeDetail: string
  vehicleColor: string
  vehicleNumber: string
  vehicleEngineNumber: string
  vehicleChassisNumber: string
  purpose: string
  additionalInfo: string
  agreeToTerms: boolean
}

export default function LaluLintasForm() {
  const router = useRouter()
  const [currentStep, setCurrentStep] = useState(1)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)
  const [trackingNumber, setTrackingNumber] = useState('')
  const [formData, setFormData] = useState<FormData>({
    fullName: '',
    placeOfBirth: '',
    dateOfBirth: '',
    gender: '',
    nationality: 'Indonesia',
    religion: '',
    occupation: '',
    address: '',
    village: '',
    district: '',
    regency: '',
    province: '',
    phone: '',
    email: '',
    identityNumber: '',
    serviceType: '',
    vehicleType: '',
    vehicleBrand: '',
    vehicleTypeDetail: '',
    vehicleColor: '',
    vehicleNumber: '',
    vehicleEngineNumber: '',
    vehicleChassisNumber: '',
    purpose: '',
    additionalInfo: '',
    agreeToTerms: false
  })

  const handleInputChange = (field: keyof FormData, value: string | boolean) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }))
  }

  const validateStep = (step: number): boolean => {
    switch (step) {
      case 1:
        return !!(formData.fullName && formData.placeOfBirth && formData.dateOfBirth && 
                 formData.gender && formData.religion && formData.nationality)
      case 2:
        return !!(formData.occupation && formData.address && 
                 formData.village && formData.district && formData.regency && formData.province)
      case 3:
        return !!(formData.phone && formData.email && formData.identityNumber && 
                 formData.serviceType && formData.vehicleType)
      case 4:
        return !!(formData.vehicleBrand && formData.vehicleColor && formData.purpose && formData.agreeToTerms)
      default:
        return false
    }
  }

  const nextStep = () => {
    if (validateStep(currentStep)) {
      setCurrentStep(prev => Math.min(prev + 1, 4))
    }
  }

  const prevStep = () => {
    setCurrentStep(prev => Math.max(prev - 1, 1))
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    if (!validateStep(4)) {
      return
    }

    setIsSubmitting(true)

    try {
      const response = await fetch('/api/service-requests', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          serviceSlug: 'lalu-lintas',
          submissionData: formData
        })
      })

      const data = await response.json()

      if (response.ok) {
        setTrackingNumber(data.trackingNumber)
        setIsSubmitted(true)
      } else {
        alert(data.message || 'Terjadi kesalahan saat mengajukan permohonan')
      }
    } catch (error) {
      alert('Terjadi kesalahan jaringan. Silakan coba lagi.')
    } finally {
      setIsSubmitting(false)
    }
  }

  if (isSubmitted) {
    return (
      <UserSidebar>
        <div className="max-w-2xl mx-auto">
          <Card className="text-center">
            <CardHeader>
              <div className="mx-auto mb-4 p-3 bg-green-100 rounded-full text-green-600 w-fit">
                <CheckCircle className="w-8 h-8" />
              </div>
              <CardTitle className="text-2xl text-green-600">Pengajuan Berhasil!</CardTitle>
              <CardDescription>
                Permohonan layanan lalu lintas Anda telah berhasil diajukan
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="p-4 bg-blue-50 rounded-lg">
                <p className="text-sm text-gray-600 mb-1">Nomor Pelacakan:</p>
                <p className="text-xl font-mono font-bold text-blue-600">{trackingNumber}</p>
              </div>
              <p className="text-sm text-gray-600">
                Simpan nomor pelacakan ini untuk memantau status pengajuan Anda. 
                Anda juga akan menerima email konfirmasi.
              </p>
              <div className="flex gap-3 justify-center">
                <Link href="/lacak">
                  <Button variant="outline">
                    Lacak Pengajuan
                  </Button>
                </Link>
                <Link href="/">
                  <Button>
                    Kembali ke Beranda
                  </Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        </div>
      </UserSidebar>
    )
  }

  return (
    <UserSidebar>
      {/* Header */}
      <div className="bg-blue-600 text-white -mx-4 -mt-4 px-4 py-8 rounded-b-lg">
        <div className="max-w-4xl mx-auto">
          <div className="flex items-center gap-4 mb-4">
            <Link href="/" className="text-white hover:bg-blue-700 p-2 rounded">
              <ArrowLeft className="w-4 h-4" />
            </Link>
          </div>
          <div className="text-center">
            <h1 className="text-3xl font-bold mb-2">Pengajuan Layanan Lalu Lintas</h1>
            <p className="opacity-90">SIM, STNK, dan layanan lalu lintas lainnya</p>
          </div>
        </div>
      </div>

      {/* Progress Steps */}
      <div className="bg-white border-b -mx-4 px-4 py-6 mb-6">
        <div className="max-w-4xl mx-auto">
          <div className="flex items-center justify-between">
            {[1, 2, 3, 4].map((step) => (
              <div key={step} className="flex items-center">
                <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
                  currentStep >= step 
                    ? 'bg-blue-600 text-white' 
                    : 'bg-gray-200 text-gray-600'
                }`}>
                  {step}
                </div>
                <span className={`ml-2 text-sm ${
                  currentStep >= step ? 'text-blue-600 font-medium' : 'text-gray-600'
                }`}>
                  {step === 1 && 'Data Diri'}
                  {step === 2 && 'Alamat'}
                  {step === 3 && 'Layanan'}
                  {step === 4 && 'Detail Kendaraan'}
                </span>
                {step < 4 && (
                  <div className={`w-16 h-1 mx-4 ${
                    currentStep > step ? 'bg-blue-600' : 'bg-gray-200'
                  }`} />
                )}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Form */}
      <div className="max-w-4xl mx-auto">
        <form onSubmit={handleSubmit} className="space-y-6">
            {/* Step 1: Personal Data */}
            {currentStep === 1 && (
              <Card>
                <CardHeader>
                  <CardTitle>Data Diri</CardTitle>
                  <CardDescription>
                    Lengkapi data pribadi Anda dengan benar
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="fullName">Nama Lengkap *</Label>
                      <Input
                        id="fullName"
                        value={formData.fullName}
                        onChange={(e) => handleInputChange('fullName', e.target.value)}
                        placeholder="Masukkan nama lengkap"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="placeOfBirth">Tempat Lahir *</Label>
                      <Input
                        id="placeOfBirth"
                        value={formData.placeOfBirth}
                        onChange={(e) => handleInputChange('placeOfBirth', e.target.value)}
                        placeholder="Masukkan tempat lahir"
                        required
                      />
                    </div>
                  </div>
                  
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="dateOfBirth">Tanggal Lahir *</Label>
                      <Input
                        id="dateOfBirth"
                        type="date"
                        value={formData.dateOfBirth}
                        onChange={(e) => handleInputChange('dateOfBirth', e.target.value)}
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="gender">Jenis Kelamin *</Label>
                      <Select value={formData.gender} onValueChange={(value) => handleInputChange('gender', value)}>
                        <SelectTrigger>
                          <SelectValue placeholder="Pilih jenis kelamin" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="L">Laki-laki</SelectItem>
                          <SelectItem value="P">Perempuan</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="nationality">Kewarganegaraan *</Label>
                      <Input
                        id="nationality"
                        value={formData.nationality}
                        onChange={(e) => handleInputChange('nationality', e.target.value)}
                        placeholder="Masukkan kewarganegaraan"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="religion">Agama *</Label>
                      <Select value={formData.religion} onValueChange={(value) => handleInputChange('religion', value)}>
                        <SelectTrigger>
                          <SelectValue placeholder="Pilih agama" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="Islam">Islam</SelectItem>
                          <SelectItem value="Kristen">Kristen</SelectItem>
                          <SelectItem value="Katolik">Katolik</SelectItem>
                          <SelectItem value="Hindu">Hindu</SelectItem>
                          <SelectItem value="Buddha">Buddha</SelectItem>
                          <SelectItem value="Konghucu">Konghucu</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  <div>
                    <Label htmlFor="occupation">Pekerjaan *</Label>
                    <Input
                      id="occupation"
                      value={formData.occupation}
                      onChange={(e) => handleInputChange('occupation', e.target.value)}
                      placeholder="Masukkan pekerjaan"
                      required
                    />
                  </div>
                </CardContent>
              </Card>
            )}

            {/* Step 2: Address */}
            {currentStep === 2 && (
              <Card>
                <CardHeader>
                  <CardTitle>Alamat</CardTitle>
                  <CardDescription>
                    Lengkapi data alamat tempat tinggal Anda
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <Label htmlFor="address">Alamat Lengkap *</Label>
                    <Textarea
                      id="address"
                      value={formData.address}
                      onChange={(e) => handleInputChange('address', e.target.value)}
                      placeholder="Masukkan alamat lengkap"
                      rows={3}
                      required
                    />
                  </div>

                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="village">Desa/Kelurahan *</Label>
                      <Input
                        id="village"
                        value={formData.village}
                        onChange={(e) => handleInputChange('village', e.target.value)}
                        placeholder="Masukkan desa/kelurahan"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="district">Kecamatan *</Label>
                      <Input
                        id="district"
                        value={formData.district}
                        onChange={(e) => handleInputChange('district', e.target.value)}
                        placeholder="Masukkan kecamatan"
                        required
                      />
                    </div>
                  </div>

                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="regency">Kabupaten/Kota *</Label>
                      <Input
                        id="regency"
                        value={formData.regency}
                        onChange={(e) => handleInputChange('regency', e.target.value)}
                        placeholder="Masukkan kabupaten/kota"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="province">Provinsi *</Label>
                      <Input
                        id="province"
                        value={formData.province}
                        onChange={(e) => handleInputChange('province', e.target.value)}
                        placeholder="Masukkan provinsi"
                        required
                      />
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}

            {/* Step 3: Service Type */}
            {currentStep === 3 && (
              <Card>
                <CardHeader>
                  <CardTitle>Layanan yang Dibutuhkan</CardTitle>
                  <CardDescription>
                    Pilih jenis layanan lalu lintas yang Anda ajukan
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="phone">Nomor Telepon *</Label>
                      <Input
                        id="phone"
                        type="tel"
                        value={formData.phone}
                        onChange={(e) => handleInputChange('phone', e.target.value)}
                        placeholder="Masukkan nomor telepon"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="email">Email *</Label>
                      <Input
                        id="email"
                        type="email"
                        value={formData.email}
                        onChange={(e) => handleInputChange('email', e.target.value)}
                        placeholder="Masukkan email"
                        required
                      />
                    </div>
                  </div>

                  <div>
                    <Label htmlFor="identityNumber">Nomor KTP *</Label>
                    <Input
                      id="identityNumber"
                      value={formData.identityNumber}
                      onChange={(e) => handleInputChange('identityNumber', e.target.value)}
                      placeholder="Masukkan nomor KTP"
                      required
                    />
                  </div>

                  <div>
                    <Label htmlFor="serviceType">Jenis Layanan *</Label>
                    <Select value={formData.serviceType} onValueChange={(value) => handleInputChange('serviceType', value)}>
                      <SelectTrigger>
                        <SelectValue placeholder="Pilih jenis layanan" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="sim-baru">SIM Baru</SelectItem>
                        <SelectItem value="sim-perpanjangan">Perpanjangan SIM</SelectItem>
                        <SelectItem value="sim-hilang">SIM Hilang/Rusak</SelectItem>
                        <SelectItem value="stnk-baru">STNK Baru</SelectItem>
                        <SelectItem value="stnk-perpanjangan">Perpanjangan STNK</SelectItem>
                          <SelectItem value="stnk-hilang">STNK Hilang/Rusak</SelectItem>
                        <SelectItem value="balik-nama">Balik Nama Kendaraan</SelectItem>
                        <SelectItem value="mutasi">Mutasi Kendaraan</SelectItem>
                        <SelectItem value="lainnya">Lainnya</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div>
                    <Label htmlFor="vehicleType">Jenis Kendaraan *</Label>
                    <Select value={formData.vehicleType} onValueChange={(value) => handleInputChange('vehicleType', value)}>
                      <SelectTrigger>
                        <SelectValue placeholder="Pilih jenis kendaraan" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="motor">Sepeda Motor</SelectItem>
                        <SelectItem value="mobil">Mobil</SelectItem>
                        <SelectItem value="bus">Bus</SelectItem>
                        <SelectItem value="truk">Truk</SelectItem>
                        <SelectItem value="lainnya">Lainnya</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </CardContent>
              </Card>
            )}

            {/* Step 4: Vehicle Details */}
            {currentStep === 4 && (
              <Card>
                <CardHeader>
                  <CardTitle>Detail Kendaraan & Konfirmasi</CardTitle>
                  <CardDescription>
                    Lengkapi informasi kendaraan dan konfirmasi pengajuan
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="vehicleBrand">Merek Kendaraan *</Label>
                      <Input
                        id="vehicleBrand"
                        value={formData.vehicleBrand}
                        onChange={(e) => handleInputChange('vehicleBrand', e.target.value)}
                        placeholder="Masukkan merek kendaraan"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="vehicleTypeDetail">Tipe Kendaraan</Label>
                      <Input
                        id="vehicleTypeDetail"
                        value={formData.vehicleTypeDetail}
                        onChange={(e) => handleInputChange('vehicleTypeDetail', e.target.value)}
                        placeholder="Masukkan tipe kendaraan"
                      />
                    </div>
                  </div>

                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="vehicleColor">Warna Kendaraan *</Label>
                      <Input
                        id="vehicleColor"
                        value={formData.vehicleColor}
                        onChange={(e) => handleInputChange('vehicleColor', e.target.value)}
                        placeholder="Masukkan warna kendaraan"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="vehicleNumber">Nomor Polisi</Label>
                      <Input
                        id="vehicleNumber"
                        value={formData.vehicleNumber}
                        onChange={(e) => handleInputChange('vehicleNumber', e.target.value)}
                        placeholder="Masukkan nomor polisi"
                      />
                    </div>
                  </div>

                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="vehicleEngineNumber">Nomor Mesin</Label>
                      <Input
                        id="vehicleEngineNumber"
                        value={formData.vehicleEngineNumber}
                        onChange={(e) => handleInputChange('vehicleEngineNumber', e.target.value)}
                        placeholder="Masukkan nomor mesin"
                      />
                    </div>
                    <div>
                      <Label htmlFor="vehicleChassisNumber">Nomor Rangka</Label>
                      <Input
                        id="vehicleChassisNumber"
                        value={formData.vehicleChassisNumber}
                        onChange={(e) => handleInputChange('vehicleChassisNumber', e.target.value)}
                        placeholder="Masukkan nomor rangka"
                      />
                    </div>
                  </div>

                  <div>
                    <Label htmlFor="purpose">Keperluan *</Label>
                    <Textarea
                      id="purpose"
                      value={formData.purpose}
                      onChange={(e) => handleInputChange('purpose', e.target.value)}
                      placeholder="Jelaskan keperluan pengajuan layanan ini"
                      rows={3}
                      required
                    />
                  </div>

                  <div>
                    <Label htmlFor="additionalInfo">Informasi Tambahan</Label>
                    <Textarea
                      id="additionalInfo"
                      value={formData.additionalInfo}
                      onChange={(e) => handleInputChange('additionalInfo', e.target.value)}
                      placeholder="Masukkan informasi tambahan jika diperlukan"
                      rows={2}
                    />
                  </div>

                  <div className="border-t pt-4">
                    <div className="flex items-start gap-3">
                      <Checkbox
                        id="agreeToTerms"
                        checked={formData.agreeToTerms}
                        onCheckedChange={(checked) => handleInputChange('agreeToTerms', checked as boolean)}
                      />
                      <div className="text-sm">
                        <Label htmlFor="agreeToTerms" className="font-normal">
                          Saya menyatakan bahwa data yang saya masukkan adalah benar dan dapat dipertanggungjawabkan. 
                          Saya memahami bahwa memberikan informasi palsu dapat dikenakan sanksi sesuai dengan peraturan perundang-undangan yang berlaku.
                        </Label>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}

            {/* Navigation Buttons */}
            <div className="flex justify-between">
              <Button
                type="button"
                variant="outline"
                onClick={prevStep}
                disabled={currentStep === 1}
              >
                Sebelumnya
              </Button>

              {currentStep < 4 ? (
                <Button
                  type="button"
                  onClick={nextStep}
                  disabled={!validateStep(currentStep)}
                  className="bg-blue-600 hover:bg-blue-700"
                >
                  Selanjutnya
                </Button>
              ) : (
                <Button
                  type="submit"
                  disabled={!validateStep(4) || isSubmitting}
                  className="bg-blue-600 hover:bg-blue-700"
                >
                  {isSubmitting ? (
                    <>
                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                      Mengajukan...
                    </>
                  ) : (
                    'Ajukan Permohonan'
                  )}
                </Button>
              )}
            </div>
          </form>
        </div>
      </UserSidebar>
    )
  }
}