"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import Link from "next/link"
import { ArrowLeft, Clock, CheckCircle, Truck, FileText, CreditCard, Edit, X, Save, AlertTriangle, Package, History } from "lucide-react"
import DashboardLayout from "@/components/dashboard/dashboard-layout"
import axiosInstance from "@/utils/axios"
import { OrderStatusTimeline } from "@/components/dashboard/OrderStatusTimeline"
import { useAuth } from "@/context/AuthContext"
import { useCart } from "@/context/CartContext"

export default function OrderDetailPage() {
    const params = useParams()
    const router = useRouter()
    const { user } = useAuth()
    const [activeTab, setActiveTab] = useState("details")
    const { addToCart } = useCart()
    const [order, setOrder] = useState(null)
    const [loading, setLoading] = useState(true)
    const [isEditing, setIsEditing] = useState(false)
    const [editedOrder, setEditedOrder] = useState(null)
    const [isSaving, setIsSaving] = useState(false)
    const [error, setError] = useState(null)
    const [successMessage, setSuccessMessage] = useState(null)

    useEffect(() => {
        const fetchOrder = async () => {
            try {
                const orderData = await axiosInstance.get(`/orders/${params.id}`)
                setOrder(orderData?.data?.data)
                setEditedOrder(orderData?.data?.data)

            } catch (error) {
                console.error("Error fetching order:", error)
            } finally {
                setLoading(false)
            }
        }

        fetchOrder()
    }, [params.id])

    const getStatusBadge = (status) => {
        switch (status) {
            case "processing":
                return (
                    <span className="flex items-center text-sm text-yellow-600 bg-yellow-50 px-3 py-1 rounded-full font-medium">
                        <Clock size={16} className="mr-2" />
                        In behandeling
                    </span>
                )
            case "shipped":
                return (
                    <span className="flex items-center text-sm text-blue-600 bg-blue-50 px-3 py-1 rounded-full font-medium">
                        <Truck size={16} className="mr-2" />
                        Verzonden
                    </span>
                )
            case "delivered":
                return (
                    <span className="flex items-center text-sm text-green-600 bg-green-50 px-3 py-1 rounded-full font-medium">
                        <CheckCircle size={16} className="mr-2" />
                        Afgeleverd
                    </span>
                )
            default:
                return (
                    <span className="flex items-center text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full font-medium">
                        <FileText size={16} className="mr-2" />
                        {status}
                    </span>
                )
        }
    }

    const canEditQuantity = order?.paymentStatus !== "paid" && order?.orderStatus === "pending"
    const canEditShipping = order?.orderStatus !== "shipped" && order?.orderStatus !== "delivered"

    const handleEditToggle = () => {
        if (isEditing) {
            // Cancel editing - reset to original order
            setEditedOrder(order)
            setError(null)
            setSuccessMessage(null)
        }
        setIsEditing(!isEditing)
    }

    const handleQuantityChange = (itemId, newQuantity) => {
        if (newQuantity < 1) return

        setEditedOrder((prev) => ({
            ...prev,
            items: prev.items.map((item) => (item.id === itemId ? { ...item, quantity: newQuantity } : item)),
            totalAmount: prev.items.reduce((total, item) => {
                const itemTotal = item.id === itemId ? item.price * newQuantity : item.price * item.quantity
                return total + itemTotal
            }, 5.0), // Adding 5.0 for shipping
        }))
    }

    const handleAddressChange = (e) => {
        const { name, value } = e.target
        setEditedOrder((prev) => ({
            ...prev,
            [name]: value,
        }))
    }

    const handleSaveChanges = async () => {
        setIsSaving(true)
        setError(null)
        setSuccessMessage(null)

        try {
            // Calculate if quantities changed
            const quantitiesChanged = order.items.some((item, index) => item.quantity !== editedOrder.items[index].quantity)

            // Calculate if shipping address changed
            const shippingChanged =
                order.address !== editedOrder.address ||
                order.city !== editedOrder.city ||
                order.postalCode !== editedOrder.postalCode ||
                order.country !== editedOrder.country

            // Validate changes based on order status
            if (quantitiesChanged && !canEditQuantity) {
                throw new Error("Je kunt de hoeveelheden niet wijzigen voor een betaalde bestelling")
            }

            if (shippingChanged && !canEditShipping) {
                throw new Error("Je kunt het verzendadres niet wijzigen voor een verzonden bestelling")
            }

            // Send update to server
            const response = await axiosInstance.put(`/orders/${order._id}`, {
                items: editedOrder.items,
                address: editedOrder.address,
                city: editedOrder.city,
                postalCode: editedOrder.postalCode,
                country: editedOrder.country,
                notes: editedOrder.notes,
            })

            if (response.data.status) {
                setOrder(editedOrder)
                setSuccessMessage("Bestelling succesvol bijgewerkt")
                setTimeout(() => {
                    setIsEditing(false)
                    setSuccessMessage(null)
                }, 2000)
            } else {
                throw new Error(response.data.message || "Fout bij het bijwerken van de bestelling")
            }
        } catch (error) {
            console.error("Error updating order:", error)
            setError(error.message || "Er is een fout opgetreden bij het bijwerken van de bestelling")
        } finally {
            setIsSaving(false)
        }
    }

    const handleReorder = () => {
        // Add all items from this order to the cart
        order.items.forEach((item) => {
            addToCart({
                id: item.id,
                name: item.name,
                price: item.price,
                quantity: item.quantity,
                image: item.image,
            })
        })

        // Navigate to cart
        router.push("/cart")
    }

    if (loading) {
        return (
            <DashboardLayout>
                <div className="bg-white rounded-lg shadow p-8 flex flex-col items-center justify-center min-h-64">
                    <div className="animate-spin rounded-full h-12 w-12 border-4 border-t-teal-600 border-teal-100"></div>
                    <p className="mt-4 text-gray-500">Bestelling laden...</p>
                </div>
            </DashboardLayout>
        )
    }

    if (!loading && !order) {
        return (
            <DashboardLayout>
                <div className="bg-white rounded-lg shadow p-8 text-center">
                    <div className="inline-flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mb-4">
                        <FileText size={24} className="text-red-500" />
                    </div>
                    <h2 className="text-2xl font-bold mb-2">Bestelling niet gevonden</h2>
                    <p className="text-gray-600 mb-6 max-w-md mx-auto">
                        De bestelling die je zoekt bestaat niet of is niet toegankelijk.
                    </p>
                    <Link
                        href="/dashboard/orders"
                        className="inline-flex items-center px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
                    >
                        <ArrowLeft size={18} className="mr-2" />
                        Terug naar bestellingen
                    </Link>
                </div>
            </DashboardLayout>
        )
    }

    const formattedDate = new Date(order.createdAt).toLocaleDateString("nl-NL", {
        day: "2-digit",
        month: "2-digit",
        year: "numeric",
    })

    const formattedTime = new Date(order.createdAt).toLocaleTimeString("nl-NL", {
        hour: "2-digit",
        minute: "2-digit",
    })

    return (
        <DashboardLayout>
            {activeTab === "details" && <div className="space-y-6 pb-8">
                {error && (
                    <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-start">
                        <AlertTriangle size={20} className="mr-2 flex-shrink-0 mt-0.5" />
                        <p>{error}</p>
                    </div>
                )}

                {successMessage && (
                    <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg flex items-start">
                        <CheckCircle size={20} className="mr-2 flex-shrink-0 mt-0.5" />
                        <p>{successMessage}</p>
                    </div>
                )}

                <div className="bg-white rounded-lg shadow overflow-hidden">
                    <div className="border-b border-gray-100">
                        <div className="p-6">
                            <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
                                <div>
                                    <div className="flex flex-col sm:flex-row sm:items-center gap-3">
                                        <h1 className="text-2xl font-bold">Bestelling #{order?._id.slice(-4)}</h1>
                                        {getStatusBadge(order.orderStatus)}
                                    </div>
                                    <p className="text-gray-600 mt-2">
                                        Geplaatst op {formattedDate} om {formattedTime}
                                    </p>
                                </div>

                                <div className="flex gap-2 self-start">
                                    {order.orderStatus === "delivered" && (
                                        <button
                                            onClick={handleReorder}
                                            className="inline-flex items-center px-4 py-2 bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors font-medium"
                                        >
                                            <Truck size={18} className="mr-2" />
                                            Opnieuw bestellen
                                        </button>
                                    )}

                                    {isEditing ? (
                                        <div className="flex gap-2">
                                            <button
                                                onClick={handleEditToggle}
                                                className="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-lg transition-colors font-medium"
                                                disabled={isSaving}
                                            >
                                                <X size={18} className="mr-2" />
                                                Annuleren
                                            </button>
                                            <button
                                                onClick={handleSaveChanges}
                                                className={`inline-flex items-center px-4 py-2 bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors font-medium ${isSaving ? "opacity-70 cursor-not-allowed" : ""}`}
                                                disabled={isSaving}
                                            >
                                                <Save size={18} className="mr-2" />
                                                {isSaving ? "Opslaan..." : "Opslaan"}
                                            </button>
                                        </div>
                                    ) : (
                                        order.orderStatus === "pending" && (
                                            <button
                                                onClick={handleEditToggle}
                                                className="inline-flex items-center px-4 py-2 bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors font-medium"
                                            >
                                                <Edit size={18} className="mr-2" />
                                                Bewerken
                                            </button>
                                        )
                                    )}

                                    <Link
                                        href="/dashboard/orders"
                                        className="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-lg transition-colors font-medium"
                                    >
                                        <ArrowLeft size={18} className="mr-2" />
                                        Terug
                                    </Link>
                                </div>
                            </div>
                        </div>

                        <div className="px-6 py-3 bg-gray-50 hidden sm:flex text-sm text-gray-500">
                            <div className="w-full grid grid-cols-12 gap-4">
                                <div className="col-span-6">Product</div>
                                <div className="col-span-2 text-center">Aantal</div>
                                <div className="col-span-2 text-center">Prijs</div>
                                <div className="col-span-2 text-right">Totaal</div>
                            </div>
                        </div>
                    </div>

                    {/* Order Items */}
                    <div className="divide-y divide-gray-100">
                        {(isEditing ? editedOrder.items : order.items).map((item, index) => (
                            <div key={index} className="p-6">
                                <div className="grid grid-cols-1 sm:grid-cols-12 gap-4 items-center">
                                    <div className="sm:col-span-5">
                                        <Link
                                            href={`/product/${item.id}`}
                                            className="font-medium text-gray-900 hover:text-teal-600 line-clamp-2"
                                        >
                                            {item.name}
                                        </Link>
                                    </div>

                                    <div className="sm:col-span-2 flex justify-between sm:justify-center items-center">
                                        <span className="sm:hidden text-gray-500">Aantal:</span>
                                        {isEditing && canEditQuantity ? (
                                            <div className="flex items-center">
                                                <button
                                                    onClick={() => handleQuantityChange(item.id, item.quantity - 1)}
                                                    className="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-l-md border border-gray-300"
                                                    disabled={item.quantity <= 1}
                                                >
                                                    -
                                                </button>
                                                <input
                                                    type="number"
                                                    value={item.quantity}
                                                    onChange={(e) => handleQuantityChange(item.id, Number.parseInt(e.target.value) || 1)}
                                                    className="w-12 h-8 text-center border-t border-b border-gray-300"
                                                    min="1"
                                                />
                                                <button
                                                    onClick={() => handleQuantityChange(item.id, item.quantity + 1)}
                                                    className="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-r-md border border-gray-300"
                                                >
                                                    +
                                                </button>
                                            </div>
                                        ) : (
                                            <span className="font-medium">{item.quantity}</span>
                                        )}
                                    </div>

                                    <div className="sm:col-span-2 flex justify-between sm:justify-center items-center">
                                        <span className="sm:hidden text-gray-500">Prijs:</span>
                                        <span className="font-medium">€{item.price.toFixed(2)}</span>
                                    </div>

                                    <div className="sm:col-span-2 flex justify-between sm:justify-end items-center">
                                        <span className="sm:hidden text-gray-500">Totaal:</span>
                                        <span className="font-bold text-teal-600">€{(item.price * item.quantity).toFixed(2)}</span>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    {/* Shipping Information */}
                    <div className="lg:col-span-2">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div className="bg-white rounded-lg shadow p-6">
                                <div className="flex items-center mb-4">
                                    <Truck size={20} className="text-teal-600 mr-2" />
                                    <h2 className="text-lg font-bold">Verzendadres</h2>
                                </div>
                                {isEditing && canEditShipping ? (
                                    <div className="space-y-4">
                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 mb-1">Adres</label>
                                            <input
                                                type="text"
                                                name="address"
                                                value={editedOrder.address}
                                                onChange={handleAddressChange}
                                                className="w-full px-3 py-2 border border-gray-300 rounded-md"
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 mb-1">Plaats</label>
                                            <input
                                                type="text"
                                                name="city"
                                                value={editedOrder.city}
                                                onChange={handleAddressChange}
                                                className="w-full px-3 py-2 border border-gray-300 rounded-md"
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 mb-1">Postcode</label>
                                            <input
                                                type="text"
                                                name="postalCode"
                                                value={editedOrder.postalCode}
                                                onChange={handleAddressChange}
                                                className="w-full px-3 py-2 border border-gray-300 rounded-md"
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 mb-1">Land</label>
                                            <select
                                                name="country"
                                                value={editedOrder.country}
                                                onChange={handleAddressChange}
                                                className="w-full px-3 py-2 border border-gray-300 rounded-md"
                                            >
                                                <option value="NL">Nederland</option>
                                                <option value="BE">België</option>
                                                <option value="DE">Duitsland</option>
                                                <option value="FR">Frankrijk</option>
                                            </select>
                                        </div>
                                    </div>
                                ) : (
                                    <div className="space-y-1 text-gray-700">
                                        <p className="font-medium">{order?.firstName + " " + order?.lastName}</p>
                                        <p>
                                            City: {order?.city}, {order?.postalCode}
                                        </p>
                                        <p>Address: {order?.address}</p>
                                        <p>Country: {order?.country}</p>
                                        <p className="mt-2 font-medium">Email: {order?.email}</p>
                                        <p className="font-medium">Tel: {order?.phone}</p>
                                    </div>
                                )}
                            </div>

                            <div className="bg-white rounded-lg shadow p-6">
                                <div className="flex items-center mb-4">
                                    <FileText size={20} className="text-teal-600 mr-2" />
                                    <h2 className="text-lg font-bold">Factuuradres</h2>
                                </div>
                                <div className="space-y-1 text-gray-700">
                                    <p className="font-medium">{order?.firstName + " " + order?.lastName}</p>
                                    <p>
                                        City: {order?.city}, {order?.postalCode}
                                    </p>
                                    <p>Address: {order?.address}</p>
                                    <p>Country: {order?.country}</p>
                                    <p className="mt-2 font-medium">Email: {order?.email}</p>
                                    <p className="font-medium">Tel: {order?.phone}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Order Summary */}
                    <div className="lg:col-span-1">
                        <div className="bg-white rounded-lg shadow overflow-hidden">
                            <div className="p-6 border-b border-gray-100">
                                <div className="flex items-center mb-1">
                                    <CreditCard size={20} className="text-teal-600 mr-2" />
                                    <h2 className="text-lg font-bold">Bestelsamenvatting</h2>
                                </div>
                                <p className="text-sm text-gray-500">Betaalmethode: {order?.paymentMethod}</p>
                                <p className="text-sm text-gray-500">Betalingsstatus: {order?.paymentStatus}</p>
                            </div>

                            <div className="p-6">
                                <div className="space-y-3">
                                    <div className="flex justify-between">
                                        <span className="text-gray-600">Subtotaal</span>
                                        <span className="font-medium">
                                            €{(isEditing ? editedOrder.totalAmount - 5.0 : order.totalAmount - 5.0).toFixed(2)}
                                        </span>
                                    </div>
                                    <div className="flex justify-between">
                                        <span className="text-gray-600">Verzendkosten</span>
                                        <span className="font-medium">€5.00</span>
                                    </div>
                                    {order.discountPrice > 0 && (
                                        <div className="flex justify-between text-green-600">
                                            <span>Korting</span>
                                            <span>-€{order.discountAmount.toFixed(2)}</span>
                                        </div>
                                    )}
                                    <div className="border-t pt-3 flex justify-between">
                                        <span className="font-bold">Totaal</span>
                                        <span className="font-bold text-xl text-teal-600">
                                            {/* condition wise price show, also add discount price */}
                                            €{order?.discountPrice > 0 ? order.discountPrice.toFixed(2) : order.totalAmount.toFixed(2)}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="bg-white rounded-lg shadow p-6 mt-6">
                            <h3 className="font-bold mb-3">Bestelnotities</h3>
                            {isEditing ? (
                                <textarea
                                    name="notes"
                                    value={editedOrder.notes || ""}
                                    onChange={handleAddressChange}
                                    className="w-full px-3 py-2 border border-gray-300 rounded-md min-h-[100px]"
                                    placeholder="Voeg notities toe aan je bestelling..."
                                />
                            ) : order.notes ? (
                                <p className="text-gray-700">{order.notes}</p>
                            ) : (
                                <p className="text-gray-500 italic">Geen notities toegevoegd</p>
                            )}
                        </div>
                    </div>
                </div>

                <OrderStatusTimeline order={order} />
            </div>
            }
        </DashboardLayout>
    )
}
