"use client"

import { useParams } from "next/navigation"
import { useState } from "react"
import Layout from "@/components/kokonutui/layout"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ArrowLeft, Truck, DollarSign, Package, User } from "lucide-react"
import Link from "next/link"

export default function OrderDetails() {
  const params = useParams()
  const orderId = params.id

  // In a real application, you would fetch the order details based on the orderId
  const [trackingNumber, setTrackingNumber] = useState("")

  const order = {
    id: orderId,
    customer: "John Doe",
    email: "john.doe@example.com",
    date: "2023-05-01",
    total: "$150.00",
    status: "Processing",
    tracking: "",
    items: [
      { id: 1, name: "Product A", quantity: 2, price: "$50.00" },
      { id: 2, name: "Product B", quantity: 1, price: "$50.00" },
    ],
    shippingAddress: "123 Main St, Anytown, AN 12345",
  }

  const handleSaveTracking = () => {
    // TODO: Implement API call to save tracking number
    console.log("Tracking number saved:", trackingNumber)
  }

  return (
    <Layout>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">Order Details: {order.id}</h1>
          <Link href="/dashboard/orders">
            <Button variant="outline">
              <ArrowLeft className="mr-2 h-4 w-4" /> Back to Orders
            </Button>
          </Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-white dark:bg-zinc-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
            <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white flex items-center">
              <User className="mr-2 h-5 w-5" />
              Customer Information
            </h2>
            <p><strong>Name:</strong> {order.customer}</p>
            <p><strong>Email:</strong> {order.email}</p>
            <p><strong>Shipping Address:</strong> {order.shippingAddress}</p>
          </div>

          <div className="bg-white dark:bg-zinc-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
            <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white flex items-center">
              <Package className="mr-2 h-5 w-5" />
              Order Summary
            </h2>
            <p><strong>Order Date:</strong> {order.date}</p>
            <p><strong>Total:</strong> {order.total}</p>
            <p><strong>Status:</strong> {order.status}</p>

            {/* Tracking Input Field */}
            <div className="mt-4">
              <p className="font-semibold text-gray-900 dark:text-white">Tracking Number:</p>
              <Input 
                type="text" 
                placeholder="Enter tracking number" 
                value={trackingNumber} 
                onChange={(e) => setTrackingNumber(e.target.value)} 
                className="mt-2"
              />
              <Button className="mt-2" onClick={handleSaveTracking}>
                Save Tracking
              </Button>
            </div>
          </div>
        </div>

        <div className="bg-white dark:bg-zinc-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
          <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Order Items</h2>
          <table className="w-full">
            <thead>
              <tr>
                <th className="text-left">Product</th>
                <th className="text-left">Quantity</th>
                <th className="text-left">Price</th>
              </tr>
            </thead>
            <tbody>
              {order.items.map((item) => (
                <tr key={item.id}>
                  <td>{item.name}</td>
                  <td>{item.quantity}</td>
                  <td>{item.price}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="flex justify-end space-x-4">
          <Button variant="outline">
            <Truck className="mr-2 h-4 w-4" />
            Update Shipping
          </Button>
          <Button variant="outline">
            <DollarSign className="mr-2 h-4 w-4" />
            Process Refund
          </Button>
        </div>
      </div>
    </Layout>
  )
}