"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { useToast } from "@/components/ui/use-toast"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  ArrowLeft,
  CheckCircle,
  XCircle,
  Clock,
  AlertCircle,
  CreditCard,
  FileText,
  Truck,
  Package,
  User,
  Building,
  Calendar,
  Ship,
  Send,
  Download,
  Upload,
} from "lucide-react"
import Link from "next/link"
import { Textarea } from "@/components/ui/textarea"

// Mock data for a single clearance request
const clearanceRequestData = {
  id: "CL-2023-003",
  client: "Saudi Logistics",
  clientEmail: "info@saudilogistics.com",
  clientPhone: "+966 12 345 6789",
  status: "processing",
  date: "2023-12-20",
  lastUpdated: "2023-12-21",

  // Consignee Details
  consignee: {
    name: "Saudi Logistics Co.",
    address: "Industrial Area, Building 45",
    city: "Riyadh",
    state: "Riyadh Province",
    country: "Saudi Arabia",
    zip: "12345",
    phone: "+966 12 345 6789",
    email: "receiving@saudilogistics.com",
  },

  // Consignor Details
  consignor: {
    name: "Global Manufacturing Inc.",
    address: "123 Export Street",
    city: "Shanghai",
    state: "Shanghai",
    country: "China",
    zip: "200000",
    phone: "+86 21 1234 5678",
    email: "shipping@globalmanufacturing.com",
  },

  // Cargo Details
  cargo: {
    commodity: "Industrial Machinery",
    description: "CNC Machine Parts and Components",
    quantity: "15000",
    unit: "kg",
    packagingType: "Pallets",
    packageName: "Industrial Equipment",
    packageQuantity: "25",
  },

  // Container Information
  container: {
    size: "40ft",
    type: "Standard",
    shippingLine: "Maersk Line",
    numbers: ["MAEU1234567", "MAEU7654321", "MAEU9876543"],
    billOfLading: "MAEU98765432109",
    sealNumbers: ["SL123456", "SL654321", "SL987654"],
  },

  // Transportation Information
  transport: {
    portOfLoading: "Shanghai Port",
    portOfDischarge: "King Abdulaziz Port, Dammam",
    eta: "2023-12-25",
    etd: "2023-12-05",
    vessel: "Maersk Sealand",
    voyage: "MSK123-E",
    bookingReference: "BOOK123456789",
  },

  // Documents
  documents: [
    { name: "Bill of Lading.pdf", type: "Bill of Lading", uploaded: "2023-12-20" },
    { name: "Commercial Invoice.pdf", type: "Commercial Invoice", uploaded: "2023-12-20" },
    { name: "Packing List.pdf", type: "Packing List", uploaded: "2023-12-20" },
    { name: "Certificate of Origin.pdf", type: "Certificate of Origin", uploaded: "2023-12-20" },
  ],

  // Timeline
  timeline: [
    { status: "Submitted", date: "2023-12-20 09:15", user: "Client" },
    { status: "Acknowledged", date: "2023-12-20 10:30", user: "System" },
    { status: "Accepted", date: "2023-12-20 14:45", user: "Admin" },
    { status: "Processing", date: "2023-12-21 08:30", user: "Agent" },
  ],
}

export default function ClearanceRequestDetailPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("overview")
  const [updateStatus, setUpdateStatus] = useState("")
  const [updateNote, setUpdateNote] = useState("")
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)

  // In a real app, you would fetch the data based on the ID
  const clearanceRequest = clearanceRequestData

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "pending":
        return (
          <Badge variant="outline" className="bg-yellow-100 text-yellow-800 hover:bg-yellow-100">
            Pending
          </Badge>
        )
      case "processing":
        return (
          <Badge variant="outline" className="bg-blue-100 text-blue-800 hover:bg-blue-100">
            Processing
          </Badge>
        )
      case "completed":
        return (
          <Badge variant="outline" className="bg-green-100 text-green-800 hover:bg-green-100">
            Completed
          </Badge>
        )
      case "invoiced":
        return (
          <Badge variant="outline" className="bg-purple-100 text-purple-800 hover:bg-purple-100">
            Invoiced
          </Badge>
        )
      case "paid":
        return (
          <Badge variant="outline" className="bg-emerald-100 text-emerald-800 hover:bg-emerald-100">
            Paid
          </Badge>
        )
      case "rejected":
        return (
          <Badge variant="outline" className="bg-red-100 text-red-800 hover:bg-red-100">
            Rejected
          </Badge>
        )
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "pending":
        return <AlertCircle className="h-5 w-5 text-yellow-600" />
      case "processing":
        return <Clock className="h-5 w-5 text-blue-600" />
      case "completed":
        return <CheckCircle className="h-5 w-5 text-green-600" />
      case "invoiced":
        return <CreditCard className="h-5 w-5 text-purple-600" />
      case "paid":
        return <CheckCircle className="h-5 w-5 text-emerald-600" />
      case "rejected":
        return <XCircle className="h-5 w-5 text-red-600" />
      default:
        return null
    }
  }

  const handleUpdateStatus = async () => {
    setIsSubmitting(true)

    try {
      // This would be an API call in a real app
      await new Promise((resolve) => setTimeout(resolve, 1500))

      toast({
        title: "Status updated",
        description: `Clearance request status updated to ${updateStatus}.`,
      })

      setIsDialogOpen(false)
      // In a real app, you would refresh the data here
    } catch (error) {
      toast({
        title: "Failed to update status",
        description: "There was an error updating the status. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  const handleGenerateInvoice = () => {
    toast({
      title: "Invoice generated",
      description: "The invoice has been generated and sent to the client.",
    })
  }

  const handleSendNotification = () => {
    toast({
      title: "Notification sent",
      description: "A notification has been sent to the client.",
    })
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div className="flex items-center gap-2">
          <Link href="/dashboard/clearance">
            <Button variant="outline" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <h2 className="text-2xl font-bold tracking-tight">Clearance Request {params.id}</h2>
            <p className="text-muted-foreground">View and manage clearance request details</p>
          </div>
        </div>
        <div className="flex flex-wrap gap-2">
          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
            <DialogTrigger asChild>
              <Button variant="outline">
                <Clock className="mr-2 h-4 w-4" />
                Update Status
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Update Clearance Status</DialogTitle>
                <DialogDescription>
                  Change the status of this clearance request and add a note if needed.
                </DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="grid grid-cols-4 items-center gap-4">
                  <label className="text-right text-sm font-medium col-span-1">Status</label>
                  <select
                    className="col-span-3 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                    value={updateStatus}
                    onChange={(e) => setUpdateStatus(e.target.value)}
                  >
                    <option value="">Select status</option>
                    <option value="pending">Pending</option>
                    <option value="processing">Processing</option>
                    <option value="completed">Completed</option>
                    <option value="invoiced">Invoiced</option>
                    <option value="paid">Paid</option>
                    <option value="rejected">Rejected</option>
                  </select>
                </div>
                <div className="grid grid-cols-4 items-center gap-4">
                  <label className="text-right text-sm font-medium col-span-1">Note</label>
                  <Textarea
                    className="col-span-3"
                    placeholder="Add a note about this status update"
                    value={updateNote}
                    onChange={(e) => setUpdateNote(e.target.value)}
                  />
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                  Cancel
                </Button>
                <Button onClick={handleUpdateStatus} disabled={!updateStatus || isSubmitting}>
                  {isSubmitting ? "Updating..." : "Update Status"}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>

          <Button variant="outline" onClick={handleSendNotification}>
            <Send className="mr-2 h-4 w-4" />
            Notify Client
          </Button>

          {clearanceRequest.status === "completed" && (
            <Button onClick={handleGenerateInvoice}>
              <CreditCard className="mr-2 h-4 w-4" />
              Generate Invoice
            </Button>
          )}
        </div>
      </div>

      <div className="grid gap-6 md:grid-cols-6">
        <Card className="md:col-span-4">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle>Request Details</CardTitle>
              <div className="flex items-center gap-2">
                {getStatusIcon(clearanceRequest.status)}
                {getStatusBadge(clearanceRequest.status)}
              </div>
            </div>
            <CardDescription>Complete information about this clearance request</CardDescription>
          </CardHeader>
          <CardContent>
            <Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab}>
              <TabsList className="mb-4">
                <TabsTrigger value="overview">Overview</TabsTrigger>
                <TabsTrigger value="cargo">Cargo</TabsTrigger>
                <TabsTrigger value="shipping">Shipping</TabsTrigger>
                <TabsTrigger value="documents">Documents</TabsTrigger>
                <TabsTrigger value="timeline">Timeline</TabsTrigger>
              </TabsList>

              <TabsContent value="overview" className="space-y-6">
                <div className="grid gap-6 md:grid-cols-2">
                  <div className="space-y-4">
                    <div>
                      <h3 className="text-lg font-medium flex items-center gap-2">
                        <User className="h-5 w-5 text-muted-foreground" />
                        Consignee Information
                      </h3>
                      <Separator className="my-2" />
                      <dl className="space-y-2 text-sm">
                        <div className="flex justify-between">
                          <dt className="font-medium">Name:</dt>
                          <dd>{clearanceRequest.consignee.name}</dd>
                        </div>
                        <div className="flex justify-between">
                          <dt className="font-medium">Address:</dt>
                          <dd>{clearanceRequest.consignee.address}</dd>
                        </div>
                        <div className="flex justify-between">
                          <dt className="font-medium">City:</dt>
                          <dd>{clearanceRequest.consignee.city}</dd>
                        </div>
                        <div className="flex justify-between">
                          <dt className="font-medium">Country:</dt>
                          <dd>{clearanceRequest.consignee.country}</dd>
                        </div>
                        <div className="flex justify-between">
                          <dt className="font-medium">Phone:</dt>
                          <dd>{clearanceRequest.consignee.phone}</dd>
                        </div>
                        <div className="flex justify-between">
                          <dt className="font-medium">Email:</dt>
                          <dd>{clearanceRequest.consignee.email}</dd>
                        </div>
                      </dl>
                    </div>
                  </div>

                  <div className="space-y-4">
                    <div>
                      <h3 className="text-lg font-medium flex items-center gap-2">
                        <Building className="h-5 w-5 text-muted-foreground" />
                        Consignor Information
                      </h3>
                      <Separator className="my-2" />
                      <dl className="space-y-2 text-sm">
                        <div className="flex justify-between">
                          <dt className="font-medium">Name:</dt>
                          <dd>{clearanceRequest.consignor.name}</dd>
                        </div>
                        <div className="flex justify-between">
                          <dt className="font-medium">Address:</dt>
                          <dd>{clearanceRequest.consignor.address}</dd>
                        </div>
                        <div className="flex justify-between">
                          <dt className="font-medium">City:</dt>
                          <dd>{clearanceRequest.consignor.city}</dd>
                        </div>
                        <div className="flex justify-between">
                          <dt className="font-medium">Country:</dt>
                          <dd>{clearanceRequest.consignor.country}</dd>
                        </div>
                        <div className="flex justify-between">
                          <dt className="font-medium">Phone:</dt>
                          <dd>{clearanceRequest.consignor.phone}</dd>
                        </div>
                        <div className="flex justify-between">
                          <dt className="font-medium">Email:</dt>
                          <dd>{clearanceRequest.consignor.email}</dd>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>

                <div>
                  <h3 className="text-lg font-medium flex items-center gap-2">
                    <Calendar className="h-5 w-5 text-muted-foreground" />
                    Request Information
                  </h3>
                  <Separator className="my-2" />
                  <dl className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
                    <div className="flex justify-between">
                      <dt className="font-medium">Request ID:</dt>
                      <dd>{clearanceRequest.id}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Client:</dt>
                      <dd>{clearanceRequest.client}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Submission Date:</dt>
                      <dd>{clearanceRequest.date}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Last Updated:</dt>
                      <dd>{clearanceRequest.lastUpdated}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Client Email:</dt>
                      <dd>{clearanceRequest.clientEmail}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Client Phone:</dt>
                      <dd>{clearanceRequest.clientPhone}</dd>
                    </div>
                  </dl>
                </div>
              </TabsContent>

              <TabsContent value="cargo" className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium flex items-center gap-2">
                    <Package className="h-5 w-5 text-muted-foreground" />
                    Cargo Details
                  </h3>
                  <Separator className="my-2" />
                  <dl className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
                    <div className="flex justify-between">
                      <dt className="font-medium">Commodity:</dt>
                      <dd>{clearanceRequest.cargo.commodity}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Description:</dt>
                      <dd>{clearanceRequest.cargo.description}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Quantity:</dt>
                      <dd>
                        {clearanceRequest.cargo.quantity} {clearanceRequest.cargo.unit}
                      </dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Packaging Type:</dt>
                      <dd>{clearanceRequest.cargo.packagingType}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Package Name:</dt>
                      <dd>{clearanceRequest.cargo.packageName}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Package Quantity:</dt>
                      <dd>{clearanceRequest.cargo.packageQuantity}</dd>
                    </div>
                  </dl>
                </div>

                <div>
                  <h3 className="text-lg font-medium flex items-center gap-2">
                    <Ship className="h-5 w-5 text-muted-foreground" />
                    Container Information
                  </h3>
                  <Separator className="my-2" />
                  <dl className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
                    <div className="flex justify-between">
                      <dt className="font-medium">Container Size:</dt>
                      <dd>{clearanceRequest.container.size}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Container Type:</dt>
                      <dd>{clearanceRequest.container.type}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Shipping Line:</dt>
                      <dd>{clearanceRequest.container.shippingLine}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Bill of Lading:</dt>
                      <dd>{clearanceRequest.container.billOfLading}</dd>
                    </div>
                  </dl>

                  <div className="mt-4">
                    <h4 className="text-sm font-medium mb-2">Container Numbers:</h4>
                    <ul className="space-y-1 text-sm">
                      {clearanceRequest.container.numbers.map((number, index) => (
                        <li key={index} className="bg-muted px-3 py-1 rounded-md">
                          {number}
                        </li>
                      ))}
                    </ul>
                  </div>

                  <div className="mt-4">
                    <h4 className="text-sm font-medium mb-2">Seal Numbers:</h4>
                    <ul className="space-y-1 text-sm">
                      {clearanceRequest.container.sealNumbers.map((number, index) => (
                        <li key={index} className="bg-muted px-3 py-1 rounded-md">
                          {number}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </TabsContent>

              <TabsContent value="shipping" className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium flex items-center gap-2">
                    <Truck className="h-5 w-5 text-muted-foreground" />
                    Transportation Details
                  </h3>
                  <Separator className="my-2" />
                  <dl className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
                    <div className="flex justify-between">
                      <dt className="font-medium">Port of Loading:</dt>
                      <dd>{clearanceRequest.transport.portOfLoading}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Port of Discharge:</dt>
                      <dd>{clearanceRequest.transport.portOfDischarge}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Estimated Time of Arrival:</dt>
                      <dd>{clearanceRequest.transport.eta}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Estimated Time of Departure:</dt>
                      <dd>{clearanceRequest.transport.etd}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Vessel Name:</dt>
                      <dd>{clearanceRequest.transport.vessel}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Voyage Number:</dt>
                      <dd>{clearanceRequest.transport.voyage}</dd>
                    </div>
                    <div className="flex justify-between">
                      <dt className="font-medium">Booking Reference:</dt>
                      <dd>{clearanceRequest.transport.bookingReference}</dd>
                    </div>
                  </dl>
                </div>
              </TabsContent>

              <TabsContent value="documents" className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium flex items-center gap-2">
                    <FileText className="h-5 w-5 text-muted-foreground" />
                    Documents
                  </h3>
                  <Separator className="my-2" />

                  <div className="space-y-4">
                    {clearanceRequest.documents.map((doc, index) => (
                      <div key={index} className="flex items-center justify-between p-3 border rounded-md">
                        <div className="flex items-center gap-3">
                          <FileText className="h-5 w-5 text-blue-600" />
                          <div>
                            <p className="font-medium">{doc.name}</p>
                            <p className="text-xs text-muted-foreground">
                              {doc.type} • Uploaded on {doc.uploaded}
                            </p>
                          </div>
                        </div>
                        <div className="flex gap-2">
                          <Button variant="outline" size="sm">
                            <Download className="h-4 w-4 mr-1" />
                            Download
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>

                  <div className="mt-6">
                    <Button variant="outline" className="w-full">
                      <Upload className="h-4 w-4 mr-2" />
                      Upload Additional Document
                    </Button>
                  </div>
                </div>
              </TabsContent>

              <TabsContent value="timeline" className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium flex items-center gap-2">
                    <Clock className="h-5 w-5 text-muted-foreground" />
                    Request Timeline
                  </h3>
                  <Separator className="my-2" />

                  <div className="relative pl-6 border-l-2 border-muted space-y-6 py-2">
                    {clearanceRequest.timeline.map((event, index) => (
                      <div key={index} className="relative">
                        <div className="absolute -left-[25px] p-1 rounded-full bg-background border-2 border-muted">
                          {event.status === "Submitted" && <AlertCircle className="h-4 w-4 text-blue-600" />}
                          {event.status === "Acknowledged" && <CheckCircle className="h-4 w-4 text-green-600" />}
                          {event.status === "Accepted" && <CheckCircle className="h-4 w-4 text-green-600" />}
                          {event.status === "Processing" && <Clock className="h-4 w-4 text-yellow-600" />}
                        </div>
                        <div className="bg-muted/50 p-4 rounded-md">
                          <div className="flex items-center justify-between mb-1">
                            <h4 className="font-medium">{event.status}</h4>
                            <span className="text-xs text-muted-foreground">{event.date}</span>
                          </div>
                          <p className="text-sm">
                            Status updated by <span className="font-medium">{event.user}</span>
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>

        <Card className="md:col-span-2">
          <CardHeader>
            <CardTitle>Actions</CardTitle>
            <CardDescription>Manage this clearance request</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <Button className="w-full justify-start" variant="outline" asChild>
              <Link href={`/dashboard/clearance/${params.id}/edit`}>
                <FileText className="mr-2 h-4 w-4" />
                Edit Request
              </Link>
            </Button>

            <Button className="w-full justify-start" variant="outline" onClick={handleSendNotification}>
              <Send className="mr-2 h-4 w-4" />
              Send Notification
            </Button>

            <Dialog>
              <DialogTrigger asChild>
                <Button className="w-full justify-start" variant="outline">
                  <Clock className="mr-2 h-4 w-4" />
                  Update Status
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Update Clearance Status</DialogTitle>
                  <DialogDescription>
                    Change the status of this clearance request and add a note if needed.
                  </DialogDescription>
                </DialogHeader>
                <div className="grid gap-4 py-4">
                  <div className="grid grid-cols-4 items-center gap-4">
                    <label className="text-right text-sm font-medium col-span-1">Status</label>
                    <select
                      className="col-span-3 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                      value={updateStatus}
                      onChange={(e) => setUpdateStatus(e.target.value)}
                    >
                      <option value="">Select status</option>
                      <option value="pending">Pending</option>
                      <option value="processing">Processing</option>
                      <option value="completed">Completed</option>
                      <option value="invoiced">Invoiced</option>
                      <option value="paid">Paid</option>
                      <option value="rejected">Rejected</option>
                    </select>
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <label className="text-right text-sm font-medium col-span-1">Note</label>
                    <Textarea
                      className="col-span-3"
                      placeholder="Add a note about this status update"
                      value={updateNote}
                      onChange={(e) => setUpdateNote(e.target.value)}
                    />
                  </div>
                </div>
                <DialogFooter>
                  <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                    Cancel
                  </Button>
                  <Button onClick={handleUpdateStatus} disabled={!updateStatus || isSubmitting}>
                    {isSubmitting ? "Updating..." : "Update Status"}
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>

            {clearanceRequest.status === "completed" && (
              <Button className="w-full justify-start" variant="outline" onClick={handleGenerateInvoice}>
                <CreditCard className="mr-2 h-4 w-4" />
                Generate Invoice
              </Button>
            )}

            <Separator />

            <div className="rounded-md border p-4">
              <h4 className="font-medium mb-2">Quick Status Update</h4>
              <div className="grid grid-cols-2 gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  className="justify-start"
                  onClick={() => {
                    setUpdateStatus("processing")
                    setIsDialogOpen(true)
                  }}
                >
                  <Clock className="mr-2 h-4 w-4 text-blue-600" />
                  Processing
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  className="justify-start"
                  onClick={() => {
                    setUpdateStatus("completed")
                    setIsDialogOpen(true)
                  }}
                >
                  <CheckCircle className="mr-2 h-4 w-4 text-green-600" />
                  Completed
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  className="justify-start"
                  onClick={() => {
                    setUpdateStatus("invoiced")
                    setIsDialogOpen(true)
                  }}
                >
                  <CreditCard className="mr-2 h-4 w-4 text-purple-600" />
                  Invoiced
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  className="justify-start"
                  onClick={() => {
                    setUpdateStatus("rejected")
                    setIsDialogOpen(true)
                  }}
                >
                  <XCircle className="mr-2 h-4 w-4 text-red-600" />
                  Rejected
                </Button>
              </div>
            </div>
          </CardContent>
          <CardFooter className="border-t px-6 py-4">
            <p className="text-xs text-muted-foreground">Last updated: {clearanceRequest.lastUpdated}</p>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}