"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 { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import { Loader2, Truck, PackageCheck } from "lucide-react"

interface SellerTrackingPanelProps {
  orderId: string
  currentStatus: string | null
  currentTrackingNumber: string | null
  currentCourierName: string | null
  onTrackingUpdated: () => void
}

const statusOptions = [
  { value: 'confirmed', label: 'Order Confirmed' },
  { value: 'picked_up', label: 'Picked Up' },
  { value: 'in_transit', label: 'In Transit' },
  { value: 'out_for_delivery', label: 'Out for Delivery' },
  { value: 'delivered', label: 'Delivered' },
]

export function SellerTrackingPanel({
  orderId,
  currentStatus,
  currentTrackingNumber,
  currentCourierName,
  onTrackingUpdated,
}: SellerTrackingPanelProps) {
  const [trackingNumber, setTrackingNumber] = useState(currentTrackingNumber || '')
  const [courierName, setCourierName] = useState(currentCourierName || '')
  const [trackingStatus, setTrackingStatus] = useState(currentStatus || '')
  const [note, setNote] = useState('')
  const [loading, setLoading] = useState(false)
  const { toast } = useToast()

  const handleUpdate = async () => {
    if (!trackingStatus && !trackingNumber && !courierName) {
      toast({ title: "Error", description: "Please provide at least a status or tracking number", variant: "destructive" })
      return
    }

    setLoading(true)
    try {
      const res = await fetch(`/api/marketplace/orders/${orderId}/tracking`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          trackingNumber: trackingNumber || undefined,
          courierName: courierName || undefined,
          trackingStatus: trackingStatus || undefined,
          note: note || undefined,
        }),
      })

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

      toast({ title: "Success", description: "Tracking updated! Buyer has been notified." })
      setNote('')
      onTrackingUpdated()
    } catch (error: any) {
      toast({ title: "Error", description: error.message, variant: "destructive" })
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="border rounded-lg p-4 space-y-3 bg-gray-50">
      <div className="flex items-center gap-2">
        <Truck className="h-4 w-4 text-gray-600" />
        <Label className="text-sm font-semibold text-gray-700">Update Tracking</Label>
      </div>

      <div className="grid grid-cols-2 gap-3">
        <div className="space-y-1">
          <Label className="text-xs">Courier / Delivery Man</Label>
          <Input
            value={courierName}
            onChange={e => setCourierName(e.target.value)}
            placeholder="e.g. GIG Logistics"
            className="h-8 text-sm"
          />
        </div>
        <div className="space-y-1">
          <Label className="text-xs">Tracking Number</Label>
          <Input
            value={trackingNumber}
            onChange={e => setTrackingNumber(e.target.value)}
            placeholder="e.g. GIG-12345"
            className="h-8 text-sm"
          />
        </div>
      </div>

      <div className="space-y-1">
        <Label className="text-xs">Status</Label>
        <div className="flex flex-wrap gap-1.5">
          {statusOptions.map(opt => (
            <Badge
              key={opt.value}
              variant={trackingStatus === opt.value ? "default" : "outline"}
              className={`cursor-pointer text-xs ${trackingStatus === opt.value ? 'bg-purple-600 hover:bg-purple-700' : 'hover:bg-gray-100'}`}
              onClick={() => setTrackingStatus(opt.value)}
            >
              {opt.label}
            </Badge>
          ))}
        </div>
      </div>

      <div className="space-y-1">
        <Label className="text-xs">Note (optional)</Label>
        <Textarea
          value={note}
          onChange={e => setNote(e.target.value)}
          placeholder="e.g. Package handed to driver at 2pm..."
          rows={2}
          className="text-sm resize-none"
        />
      </div>

      <Button
        onClick={handleUpdate}
        disabled={loading}
        size="sm"
        className="w-full bg-purple-600 hover:bg-purple-700 text-white"
      >
        {loading ? <><Loader2 className="h-3 w-3 mr-2 animate-spin" /> Updating...</> : <><PackageCheck className="h-3 w-3 mr-2" /> Update Tracking</>}
      </Button>
    </div>
  )
}