"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { getServiceById, getAvailablePlumbers, calculateEstimatedPrice, type Plumber } from "@/lib/services"
import Header from "@/components/layout/header"
import PlumberCard from "@/components/services/plumber-card"
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Calendar, MapPin, User, AlertCircle } from "lucide-react"
import { Alert, AlertDescription } from "@/components/ui/alert"

interface BookServicePageProps {
  params: {
    serviceId: string
  }
}

export default function BookServicePage({ params }: BookServicePageProps) {
  const router = useRouter()
  const [service, setService] = useState(getServiceById(params.serviceId))
  const [selectedPlumber, setSelectedPlumber] = useState<Plumber | null>(null)
  const [availablePlumbers, setAvailablePlumbers] = useState<Plumber[]>([])
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    phone: "",
    address: "",
    city: "",
    scheduledDate: "",
    scheduledTime: "",
    urgency: "medium" as "low" | "medium" | "high" | "emergency",
    description: "",
  })

  useEffect(() => {
    if (service && formData.city) {
      const plumbers = getAvailablePlumbers(service.id, formData.city)
      setAvailablePlumbers(plumbers)
    }
  }, [service, formData.city])

  if (!service) {
    return (
      <div className="min-h-screen bg-[var(--bg-color)]">
        <Header />
        <div className="container mx-auto px-4 py-16 text-center">
          <h1 className="text-2xl font-bold text-[var(--dark-color)] mb-4">الخدمة غير موجودة</h1>
          <Button onClick={() => router.push("/services")}>العودة للخدمات</Button>
        </div>
      </div>
    )
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!selectedPlumber) {
      alert("يرجى اختيار سباك")
      return
    }

    setLoading(true)

    try {
      const bookingData = {
        serviceId: service.id,
        plumberId: selectedPlumber.id,
        ...formData,
        estimatedPrice: calculateEstimatedPrice(service, selectedPlumber),
      }

      // هنا سيتم إرسال البيانات للخادم
      console.log("Booking data:", bookingData)

      // محاكاة API call
      await new Promise((resolve) => setTimeout(resolve, 2000))

      alert("تم حجز الخدمة بنجاح! سيتم التواصل معك قريباً")
      router.push("/dashboard")
    } catch (error) {
      alert("حدث خطأ في الحجز. يرجى المحاولة مرة أخرى")
    } finally {
      setLoading(false)
    }
  }

  const estimatedPrice = selectedPlumber ? calculateEstimatedPrice(service, selectedPlumber) : service.basePrice

  return (
    <div className="min-h-screen bg-[var(--bg-color)]">
      <Header />

      <div className="container mx-auto px-4 py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-[var(--dark-color)] mb-2">حجز خدمة: {service.name}</h1>
          <p className="text-[var(--parg-color)]">{service.description}</p>
        </div>

        <form onSubmit={handleSubmit} className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Booking Form */}
          <div className="lg:col-span-2 space-y-6">
            {/* Personal Information */}
            <Card className="border-[var(--border-color)]">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-[var(--dark-color)]">
                  <User className="w-5 h-5" />
                  البيانات الشخصية
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="name" className="text-[var(--dark-color)]">
                      الاسم الكامل
                    </Label>
                    <Input
                      id="name"
                      value={formData.name}
                      onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
                      required
                      className="text-right"
                      placeholder="أدخل اسمك الكامل"
                    />
                  </div>
                  <div>
                    <Label htmlFor="phone" className="text-[var(--dark-color)]">
                      رقم الهاتف
                    </Label>
                    <Input
                      id="phone"
                      value={formData.phone}
                      onChange={(e) => setFormData((prev) => ({ ...prev, phone: e.target.value }))}
                      required
                      className="text-right"
                      placeholder="01234567890"
                    />
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Location Information */}
            <Card className="border-[var(--border-color)]">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-[var(--dark-color)]">
                  <MapPin className="w-5 h-5" />
                  معلومات الموقع
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label htmlFor="city" className="text-[var(--dark-color)]">
                    المدينة
                  </Label>
                  <Select
                    value={formData.city}
                    onValueChange={(value) => setFormData((prev) => ({ ...prev, city: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="اختر المدينة" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="القاهرة">القاهرة</SelectItem>
                      <SelectItem value="الجيزة">الجيزة</SelectItem>
                      <SelectItem value="الإسكندرية">الإسكندرية</SelectItem>
                      <SelectItem value="القليوبية">القليوبية</SelectItem>
                      <SelectItem value="الدقهلية">الدقهلية</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label htmlFor="address" className="text-[var(--dark-color)]">
                    العنوان التفصيلي
                  </Label>
                  <Textarea
                    id="address"
                    value={formData.address}
                    onChange={(e) => setFormData((prev) => ({ ...prev, address: e.target.value }))}
                    required
                    className="text-right"
                    placeholder="أدخل العنوان التفصيلي مع رقم الشقة والدور"
                    rows={3}
                  />
                </div>
              </CardContent>
            </Card>

            {/* Schedule Information */}
            <Card className="border-[var(--border-color)]">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-[var(--dark-color)]">
                  <Calendar className="w-5 h-5" />
                  موعد الخدمة
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="scheduledDate" className="text-[var(--dark-color)]">
                      التاريخ
                    </Label>
                    <Input
                      id="scheduledDate"
                      type="date"
                      value={formData.scheduledDate}
                      onChange={(e) => setFormData((prev) => ({ ...prev, scheduledDate: e.target.value }))}
                      required
                      min={new Date().toISOString().split("T")[0]}
                    />
                  </div>
                  <div>
                    <Label htmlFor="scheduledTime" className="text-[var(--dark-color)]">
                      الوقت
                    </Label>
                    <Input
                      id="scheduledTime"
                      type="time"
                      value={formData.scheduledTime}
                      onChange={(e) => setFormData((prev) => ({ ...prev, scheduledTime: e.target.value }))}
                      required
                    />
                  </div>
                </div>

                <div>
                  <Label htmlFor="urgency" className="text-[var(--dark-color)]">
                    مستوى الأولوية
                  </Label>
                  <Select
                    value={formData.urgency}
                    onValueChange={(value: any) => setFormData((prev) => ({ ...prev, urgency: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="low">عادي</SelectItem>
                      <SelectItem value="medium">متوسط</SelectItem>
                      <SelectItem value="high">عاجل</SelectItem>
                      <SelectItem value="emergency">طارئ</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
            </Card>

            {/* Service Description */}
            <Card className="border-[var(--border-color)]">
              <CardHeader>
                <CardTitle className="text-[var(--dark-color)]">وصف المشكلة</CardTitle>
              </CardHeader>
              <CardContent>
                <Textarea
                  value={formData.description}
                  onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
                  className="text-right"
                  placeholder="اشرح المشكلة بالتفصيل لمساعدة السباك في التحضير المناسب"
                  rows={4}
                />
              </CardContent>
            </Card>

            {/* Available Plumbers */}
            {formData.city && (
              <Card className="border-[var(--border-color)]">
                <CardHeader>
                  <CardTitle className="text-[var(--dark-color)]">اختيار السباك</CardTitle>
                </CardHeader>
                <CardContent>
                  {availablePlumbers.length > 0 ? (
                    <div className="space-y-4">
                      {availablePlumbers.map((plumber) => (
                        <PlumberCard
                          key={plumber.id}
                          plumber={plumber}
                          onSelect={setSelectedPlumber}
                          isSelected={selectedPlumber?.id === plumber.id}
                        />
                      ))}
                    </div>
                  ) : (
                    <Alert>
                      <AlertCircle className="h-4 w-4" />
                      <AlertDescription>
                        لا يوجد سباكين متاحين في هذه المنطقة حالياً. يرجى اختيار مدينة أخرى أو المحاولة لاحقاً.
                      </AlertDescription>
                    </Alert>
                  )}
                </CardContent>
              </Card>
            )}
          </div>

          {/* Order Summary */}
          <div className="lg:col-span-1">
            <Card className="border-[var(--border-color)] sticky top-24">
              <CardHeader>
                <CardTitle className="text-[var(--dark-color)]">ملخص الطلب</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <h3 className="font-semibold text-[var(--dark-color)] mb-2">{service.name}</h3>
                  <p className="text-sm text-[var(--parg-color)] mb-3">{service.description}</p>

                  {service.isEmergency && (
                    <Badge className="bg-[var(--dark-red)] text-white mb-3">خدمة طوارئ 24/7</Badge>
                  )}
                </div>

                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span className="text-[var(--parg-color)]">سعر الخدمة الأساسي:</span>
                    <span className="font-medium text-[var(--dark-color)]">{service.basePrice} جنيه</span>
                  </div>

                  {selectedPlumber && (
                    <>
                      <div className="flex justify-between">
                        <span className="text-[var(--parg-color)]">أجر العمالة:</span>
                        <span className="font-medium text-[var(--dark-color)]">
                          {((service.duration / 60) * selectedPlumber.pricePerHour).toFixed(0)} جنيه
                        </span>
                      </div>

                      <div className="flex justify-between">
                        <span className="text-[var(--parg-color)]">السباك المختار:</span>
                        <span className="font-medium text-[var(--dark-color)]">{selectedPlumber.name}</span>
                      </div>
                    </>
                  )}

                  <div className="flex justify-between">
                    <span className="text-[var(--parg-color)]">المدة المتوقعة:</span>
                    <span className="font-medium text-[var(--dark-color)]">
                      {Math.floor(service.duration / 60)} ساعة{" "}
                      {service.duration % 60 > 0 && `${service.duration % 60} دقيقة`}
                    </span>
                  </div>
                </div>

                <div className="border-t border-[var(--border-color)] pt-4">
                  <div className="flex justify-between">
                    <span className="text-lg font-semibold text-[var(--dark-color)]">السعر المتوقع:</span>
                    <span className="text-lg font-bold text-[var(--name-item)]">{estimatedPrice} جنيه</span>
                  </div>
                </div>

                <Button
                  type="submit"
                  disabled={loading || !selectedPlumber || !formData.city}
                  className="w-full bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)] font-medium"
                >
                  {loading ? "جاري الحجز..." : "تأكيد الحجز"}
                </Button>

                <p className="text-xs text-[var(--p-color)] text-center">
                  * السعر النهائي قد يختلف حسب طبيعة العمل المطلوب
                </p>
              </CardContent>
            </Card>
          </div>
        </form>
      </div>
    </div>
  )
}