"use client"

import { Suspense, useEffect, useState } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
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 { useToast } from "@/hooks/use-toast"
import { Loader2, Save, ArrowLeft, Bike, Mail } from "lucide-react"
import Link from "next/link"

interface DeliveryMan {
  id: string
  fullName: string
  email: string | null
  phone: string
  alternatePhone: string | null
  state: string
  city: string
  areasCovered: string | null
  vehicleType: string
  photo: string | null
  yearsExperience: number
  bio: string | null
  isApproved: boolean
  isActive: boolean
}

export default function DeliveryManEditPage() {
  return (
    <Suspense fallback={
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-purple-600" />
      </div>
    }>
      <DeliveryManEditContent />
    </Suspense>
  )
}

function DeliveryManEditContent() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const token = searchParams.get("token")
  const { toast } = useToast()

  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [deliveryMan, setDeliveryMan] = useState<DeliveryMan | null>(null)
  const [form, setForm] = useState<Partial<DeliveryMan>>({})
  const [photoFile, setPhotoFile] = useState<File | null>(null)
  const [photoPreview, setPhotoPreview] = useState<string | null>(null)
  const [uploadingPhoto, setUploadingPhoto] = useState(false)

  // Request edit link form
  const [requestEmail, setRequestEmail] = useState("")
  const [requesting, setRequesting] = useState(false)

  useEffect(() => {
    if (!token) return
    const fetchProfile = async () => {
      try {
        const res = await fetch(`/api/delivery-men/edit?token=${token}`)
        if (!res.ok) throw new Error("Invalid or expired edit link")
        const data = await res.json()
        setDeliveryMan(data)
        setForm(data)
        if (data.photo) setPhotoPreview(data.photo)
      } catch (e: any) {
        toast({ title: "Error", description: e.message || "Could not load profile", variant: "destructive" })
      } finally {
        setLoading(false)
      }
    }
    fetchProfile()
  }, [token])

  const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    if (!file.type.startsWith("image/")) {
      toast({ title: "Error", description: "Please select an image file", variant: "destructive" })
      return
    }
    if (file.size > 5 * 1024 * 1024) {
      toast({ title: "Error", description: "Photo must be under 5MB", variant: "destructive" })
      return
    }
    setPhotoFile(file)
    setPhotoPreview(URL.createObjectURL(file))
  }

  const handleSave = async () => {
    if (!deliveryMan) return
    setSaving(true)
    try {
      let photoUrl = form.photo

      if (photoFile) {
        setUploadingPhoto(true)
        const fd = new FormData()
        fd.append("image", photoFile)
        fd.append("folder", "delivery-profile")
        const uploadRes = await fetch("/api/upload/image", { method: "POST", body: fd })
        const uploadData = await uploadRes.json()
        if (!uploadRes.ok) throw new Error(uploadData.error || "Failed to upload photo")
        photoUrl = uploadData.imageUrl
        setUploadingPhoto(false)
      }

      const res = await fetch(`/api/delivery-men/${deliveryMan.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json", "x-edit-token": token! },
        body: JSON.stringify({ ...form, photo: photoUrl, yearsExperience: Number(form.yearsExperience) || 0 }),
      })

      if (!res.ok) {
        const data = await res.json()
        throw new Error(data.error || "Failed to save")
      }

      toast({ title: "Saved!", description: "Your profile has been updated." })
      router.refresh()
    } catch (e: any) {
      toast({ title: "Error", description: e.message, variant: "destructive" })
    } finally {
      setSaving(false)
      setUploadingPhoto(false)
    }
  }

  const handleRequestLink = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!requestEmail) return
    setRequesting(true)
    try {
      const res = await fetch("/api/delivery-men/request-edit-link", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: requestEmail }),
      })
      const data = await res.json()
      if (!res.ok) throw new Error(data.error || "Failed to send link")
      toast({ title: "Check Your Email", description: "If your email is registered, we've sent you an edit link." })
    } catch (e: any) {
      toast({ title: "Error", description: e.message, variant: "destructive" })
    } finally {
      setRequesting(false)
    }
  }

  // If no token, show the "request edit link" form
  if (!token) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
        <Card className="max-w-md w-full">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Bike className="h-5 w-5 text-purple-600" />
              Edit Delivery Profile
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-gray-500 mb-4">
              Enter the email you used during registration. We'll send you a link to edit your profile.
            </p>
            <form onSubmit={handleRequestLink} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="reqEmail">Registered Email</Label>
                <Input
                  id="reqEmail"
                  type="email"
                  value={requestEmail}
                  onChange={e => setRequestEmail(e.target.value)}
                  placeholder="you@example.com"
                  required
                />
              </div>
              <Button type="submit" disabled={requesting} className="w-full bg-purple-600 hover:bg-purple-700">
                {requesting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Mail className="h-4 w-4 mr-2" />}
                Send Edit Link
              </Button>
            </form>
            <div className="mt-4 text-center">
              <Link href="/delivery-men" className="text-sm text-purple-600 hover:underline flex items-center justify-center gap-1">
                <ArrowLeft className="h-3 w-3" /> Back to Delivery Board
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-purple-600" />
      </div>
    )
  }

  if (!deliveryMan) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
        <Card className="max-w-md w-full text-center">
          <CardContent className="pt-6">
            <p className="text-gray-500 mb-4">Invalid or expired edit link.</p>
            <Link href="/delivery-men/edit" className="text-purple-600 hover:underline">Request a new link</Link>
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50 pb-24">
      <div className="max-w-lg mx-auto p-4">
        <Link href="/delivery-men" className="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-purple-600 mb-4">
          <ArrowLeft className="h-4 w-4" /> Back to Board
        </Link>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-lg">
              <Bike className="h-5 w-5 text-purple-600" />
              Edit Your Profile
              {deliveryMan.isApproved ? (
                <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">Approved</span>
              ) : (
                <span className="text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full">Pending</span>
              )}
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {/* Photo */}
            <div className="space-y-2">
              <Label>Profile Photo</Label>
              <div className="flex items-center gap-3">
                {photoPreview ? (
                  <div className="relative h-20 w-20 rounded-lg overflow-hidden border-2 border-purple-300">
                    <img src={photoPreview} alt="Preview" className="h-full w-full object-cover" />
                  </div>
                ) : (
                  <div className="h-20 w-20 rounded-lg border-2 border-dashed border-gray-300 flex items-center justify-center text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                  </div>
                )}
                <Input type="file" accept="image/*" onChange={handlePhotoChange} disabled={uploadingPhoto} />
              </div>
            </div>

            {/* Name */}
            <div className="space-y-2">
              <Label>Full Name</Label>
              <Input value={form.fullName || ""} onChange={e => setForm(p => ({ ...p, fullName: e.target.value }))} />
            </div>

            {/* Phone */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Phone</Label>
                <Input value={form.phone || ""} onChange={e => setForm(p => ({ ...p, phone: e.target.value }))} />
              </div>
              <div className="space-y-2">
                <Label>Alt Phone</Label>
                <Input value={form.alternatePhone || ""} onChange={e => setForm(p => ({ ...p, alternatePhone: e.target.value }))} />
              </div>
            </div>

            {/* Location */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>State</Label>
                <Input value={form.state || ""} onChange={e => setForm(p => ({ ...p, state: e.target.value }))} />
              </div>
              <div className="space-y-2">
                <Label>City</Label>
                <Input value={form.city || ""} onChange={e => setForm(p => ({ ...p, city: e.target.value }))} />
              </div>
            </div>

            {/* Areas */}
            <div className="space-y-2">
              <Label>Areas Covered</Label>
              <Input value={form.areasCovered || ""} onChange={e => setForm(p => ({ ...p, areasCovered: e.target.value }))} placeholder="e.g. Ikeja, Ogba, Agege" />
            </div>

            {/* Vehicle & Experience */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Vehicle Type</Label>
                <Select value={form.vehicleType || "MOTORCYCLE"} onValueChange={v => setForm(p => ({ ...p, vehicleType: v }))}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="MOTORCYCLE">Motorcycle</SelectItem>
                    <SelectItem value="CAR">Car</SelectItem>
                    <SelectItem value="VAN">Van</SelectItem>
                    <SelectItem value="TRUCK">Truck</SelectItem>
                    <SelectItem value="BICYCLE">Bicycle</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>Years Experience</Label>
                <Input type="number" min={0} max={50} value={form.yearsExperience || 0} onChange={e => setForm(p => ({ ...p, yearsExperience: Number(e.target.value) }))} />
              </div>
            </div>

            {/* Bio */}
            <div className="space-y-2">
              <Label>Bio</Label>
              <Textarea value={form.bio || ""} onChange={e => setForm(p => ({ ...p, bio: e.target.value }))} rows={3} className="resize-none" />
            </div>

            {/* Save */}
            <Button onClick={handleSave} disabled={saving || uploadingPhoto} className="w-full bg-purple-600 hover:bg-purple-700">
              {saving ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Save className="h-4 w-4 mr-2" />}
              Save Changes
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}