"use client";

import React, { useState, useEffect } from "react";
import Link from "next/link";
import { Order } from "@/lib/orders";
import { PRODUCTS, Product } from "@/data/products";
import { VALID_COUPONS } from "@/context/CartContext";
import { fetchOrdersApi, updateOrderStatusApi } from "@/lib/apiClient";
import {
  Package,
  TrendingUp,
  Clock,
  CheckCircle2,
  AlertTriangle,
  Search,
  Printer,
  Eye,
  Edit,
  Tag,
  ShieldCheck,
  ArrowLeft,
  DollarSign,
  ShoppingBag,
  User,
  Phone,
  MapPin,
  FileText,
  Gift,
  RefreshCw,
  Sparkles,
} from "lucide-react";

export default function AdminDashboardPage() {
  const [activeTab, setActiveTab] = useState<"orders" | "products" | "coupons">("orders");
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState("Todos");
  const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);
  const [editingProduct, setEditingProduct] = useState<Product | null>(null);
  const [localProducts, setLocalProducts] = useState<Product[]>(PRODUCTS);
  const [customCoupons, setCustomCoupons] = useState(Object.values(VALID_COUPONS));
  const [newCouponCode, setNewCouponCode] = useState("");
  const [newCouponDiscount, setNewCouponDiscount] = useState("10");

  const fetchOrders = async () => {
    setLoading(true);
    try {
      const data = await fetchOrdersApi();
      if (data && data.success && Array.isArray(data.orders)) {
        setOrders(data.orders);
      }
    } catch (e) {
      console.error("Error fetching orders", e);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchOrders();
  }, []);

  const handleUpdateStatus = async (orderId: string, newStatus: Order["status"]) => {
    try {
      const res = await updateOrderStatusApi(orderId, newStatus);
      if (res && res.success) {
        setOrders((prev) =>
          prev.map((o) => (o.id === orderId ? { ...o, status: newStatus } : o))
        );
        if (selectedOrder && selectedOrder.id === orderId) {
          setSelectedOrder({ ...selectedOrder, status: newStatus });
        }
      }
    } catch (e) {
      console.error("Error updating order status", e);
    }
  };

  // Metrics
  const totalRevenue = orders.reduce((acc, o) => acc + o.total, 0);
  const pendingPrepCount = orders.filter(
    (o) => o.status === "Pagado" || o.status === "En preparación"
  ).length;
  const completedOrders = orders.filter((o) => o.status === "Entregado").length;

  const filteredOrders = orders.filter((o) => {
    const matchesStatus = statusFilter === "Todos" || o.status === statusFilter;
    const q = searchTerm.toLowerCase();
    const matchesSearch =
      o.orderNumber.toLowerCase().includes(q) ||
      o.customer.firstName.toLowerCase().includes(q) ||
      o.customer.lastName.toLowerCase().includes(q) ||
      o.customer.email.toLowerCase().includes(q) ||
      o.shippingAddress.city.toLowerCase().includes(q);
    return matchesStatus && matchesSearch;
  });

  const handlePrintPackingSlip = () => {
    window.print();
  };

  const handleToggleStock = (productId: string) => {
    setLocalProducts((prev) =>
      prev.map((p) => (p.id === productId ? { ...p, inStock: !p.inStock } : p))
    );
  };

  const handleAddCoupon = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newCouponCode.trim()) return;
    const newC = {
      code: newCouponCode.trim().toUpperCase(),
      discountPercent: parseInt(newCouponDiscount, 10),
      minSpend: 20,
    };
    setCustomCoupons([...customCoupons, newC]);
    setNewCouponCode("");
  };

  return (
    <div className="min-h-screen bg-stone-100 text-stone-900 font-sans">
      {/* Top Header */}
      <header className="bg-stone-900 text-stone-100 py-4 px-6 sm:px-8 border-b border-stone-800 shadow-md">
        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4">
          <div className="flex items-center gap-3">
            <Link
              href="/"
              className="text-stone-400 hover:text-white p-1.5 rounded-lg bg-stone-800 hover:bg-stone-700 transition"
              title="Volver a la tienda pública"
            >
              <ArrowLeft className="w-5 h-5" />
            </Link>
            <div>
              <div className="flex items-center gap-3">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src="../images/logo-white.png"
                  alt="Raúl Asencio"
                  className="h-8 w-auto object-contain"
                />
                <h1 className="font-serif text-lg sm:text-xl font-bold flex items-center gap-2">
                  <span>Panel de Control</span>
                  <span className="bg-emerald-500/20 text-emerald-300 text-[10px] px-2 py-0.5 rounded-full border border-emerald-500/30 font-sans font-semibold">
                    100% Independiente
                  </span>
                </h1>
              </div>
              <p className="text-[11px] text-stone-400 mt-0.5">
                Gestión de pedidos de obrador, catálogo y pasarelas directas sin WooCommerce.
              </p>
            </div>
          </div>

          {/* Quick Tabs */}
          <div className="flex bg-stone-800 p-1 rounded-xl border border-stone-700 text-xs font-semibold">
            <button
              onClick={() => setActiveTab("orders")}
              className={`px-4 py-1.5 rounded-lg transition ${
                activeTab === "orders" ? "bg-amber-900 text-amber-50 shadow" : "text-stone-300 hover:text-white"
              }`}
            >
              Pedidos ({orders.length})
            </button>
            <button
              onClick={() => setActiveTab("products")}
              className={`px-4 py-1.5 rounded-lg transition ${
                activeTab === "products" ? "bg-amber-900 text-amber-50 shadow" : "text-stone-300 hover:text-white"
              }`}
            >
              Catálogo ({localProducts.length})
            </button>
            <button
              onClick={() => setActiveTab("coupons")}
              className={`px-4 py-1.5 rounded-lg transition ${
                activeTab === "coupons" ? "bg-amber-900 text-amber-50 shadow" : "text-stone-300 hover:text-white"
              }`}
            >
              Cupones ({customCoupons.length})
            </button>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
        
        {/* Security & Health Banner */}
        <div className="bg-emerald-900/10 border border-emerald-600/30 rounded-2xl p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 text-xs text-emerald-950">
          <div className="flex items-center gap-2.5">
            <ShieldCheck className="w-5 h-5 text-emerald-600 shrink-0" />
            <div>
              <strong className="block text-sm font-serif">Plataforma Segura y Blindada</strong>
              <span>Arquitectura propia sin plugins vulnerables ni malware. Respuesta en &lt; 250ms.</span>
            </div>
          </div>
          <div className="flex items-center gap-3 text-[11px] font-semibold text-emerald-800">
            <span className="bg-white px-2.5 py-1 rounded-full border border-emerald-200">
              Redsys SHA-256 Activo
            </span>
            <span className="bg-white px-2.5 py-1 rounded-full border border-emerald-200">
              Bizum Activo
            </span>
          </div>
        </div>

        {/* Top Metric Cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
          <div className="bg-white rounded-2xl p-5 border border-stone-200 shadow-2xs">
            <div className="flex items-center justify-between text-stone-500 mb-2">
              <span className="text-xs font-semibold uppercase tracking-wider">Facturación Total</span>
              <DollarSign className="w-4 h-4 text-emerald-600" />
            </div>
            <span className="font-serif text-2xl sm:text-3xl font-bold text-stone-900">
              {totalRevenue.toFixed(2)} €
            </span>
            <span className="text-[11px] text-emerald-700 font-medium block mt-1">
              IVA 10% desglosado
            </span>
          </div>

          <div className="bg-white rounded-2xl p-5 border border-stone-200 shadow-2xs">
            <div className="flex items-center justify-between text-stone-500 mb-2">
              <span className="text-xs font-semibold uppercase tracking-wider">Pendientes de Obrador</span>
              <Clock className="w-4 h-4 text-amber-600" />
            </div>
            <span className="font-serif text-2xl sm:text-3xl font-bold text-amber-950">
              {pendingPrepCount}
            </span>
            <span className="text-[11px] text-stone-500 block mt-1">
              Listos para empaquetado
            </span>
          </div>

          <div className="bg-white rounded-2xl p-5 border border-stone-200 shadow-2xs">
            <div className="flex items-center justify-between text-stone-500 mb-2">
              <span className="text-xs font-semibold uppercase tracking-wider">Pedidos Totales</span>
              <Package className="w-4 h-4 text-blue-600" />
            </div>
            <span className="font-serif text-2xl sm:text-3xl font-bold text-stone-900">
              {orders.length}
            </span>
            <span className="text-[11px] text-stone-500 block mt-1">
              {completedOrders} completados
            </span>
          </div>

          <div className="bg-white rounded-2xl p-5 border border-stone-200 shadow-2xs">
            <div className="flex items-center justify-between text-stone-500 mb-2">
              <span className="text-xs font-semibold uppercase tracking-wider">Productos Activos</span>
              <ShoppingBag className="w-4 h-4 text-purple-600" />
            </div>
            <span className="font-serif text-2xl sm:text-3xl font-bold text-stone-900">
              {localProducts.filter((p) => p.inStock).length} / {localProducts.length}
            </span>
            <span className="text-[11px] text-stone-500 block mt-1">
              En catálogo online
            </span>
          </div>
        </div>

        {/* TAB 1: ORDERS MANAGEMENT */}
        {activeTab === "orders" && (
          <div className="bg-white rounded-3xl p-6 border border-stone-200 shadow-xs space-y-6">
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
              <div>
                <h2 className="font-serif text-xl font-bold text-stone-900">
                  Monitor de Pedidos y Envíos
                </h2>
                <p className="text-xs text-stone-500">
                  Actualiza estados, imprime albaranes de preparación y consulta datos de clientes.
                </p>
              </div>

              {/* Filters */}
              <div className="flex flex-wrap items-center gap-3 w-full md:w-auto">
                <div className="relative flex-1 md:w-64">
                  <Search className="w-4 h-4 text-stone-400 absolute left-3 top-1/2 -translate-y-1/2" />
                  <input
                    type="text"
                    placeholder="Buscar cliente, nº pedido..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="w-full pl-9 pr-3 py-1.5 text-xs border border-stone-300 rounded-lg outline-none focus:border-amber-700 bg-stone-50"
                  />
                </div>

                <select
                  value={statusFilter}
                  onChange={(e) => setStatusFilter(e.target.value)}
                  className="text-xs border border-stone-300 rounded-lg p-1.5 bg-stone-50 outline-none font-semibold cursor-pointer"
                >
                  <option value="Todos">Todos los Estados</option>
                  <option value="Pagado">Pagado</option>
                  <option value="En preparación">En preparación</option>
                  <option value="Enviado">Enviado</option>
                  <option value="Entregado">Entregado</option>
                  <option value="Cancelado">Cancelado</option>
                </select>

                <button
                  onClick={fetchOrders}
                  className="p-1.5 text-stone-500 hover:text-stone-800 bg-stone-100 hover:bg-stone-200 rounded-lg transition"
                  title="Recargar pedidos"
                >
                  <RefreshCw className="w-4 h-4" />
                </button>
              </div>
            </div>

            {/* Orders Table */}
            {loading ? (
              <div className="text-center py-12 text-stone-500 text-xs">
                Cargando pedidos...
              </div>
            ) : filteredOrders.length === 0 ? (
              <div className="text-center py-12 text-stone-400 text-xs">
                No se encontraron pedidos con los filtros actuales.
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs border-collapse">
                  <thead>
                    <tr className="border-b border-stone-200 bg-stone-50/70 text-stone-600 font-semibold uppercase tracking-wider text-[10px]">
                      <th className="py-3 px-4">Pedido / Fecha</th>
                      <th className="py-3 px-4">Cliente</th>
                      <th className="py-3 px-4">Destino</th>
                      <th className="py-3 px-4">Artículos</th>
                      <th className="py-3 px-4">Método Pago</th>
                      <th className="py-3 px-4">Total</th>
                      <th className="py-3 px-4">Estado</th>
                      <th className="py-3 px-4 text-right">Acciones</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-stone-100">
                    {filteredOrders.map((order) => (
                      <tr
                        key={order.id}
                        className="hover:bg-amber-50/40 transition cursor-pointer"
                        onClick={() => setSelectedOrder(order)}
                      >
                        <td className="py-3.5 px-4">
                          <span className="font-mono font-bold text-amber-950 block">
                            {order.orderNumber}
                          </span>
                          <span className="text-[10px] text-stone-500">
                            {new Date(order.date).toLocaleString("es-ES", {
                              day: "2-digit",
                              month: "short",
                              hour: "2-digit",
                              minute: "2-digit",
                            })}
                          </span>
                        </td>
                        <td className="py-3.5 px-4">
                          <span className="font-semibold text-stone-900 block">
                            {order.customer.firstName} {order.customer.lastName}
                          </span>
                          <span className="text-[11px] text-stone-500 block">
                            {order.customer.phone}
                          </span>
                        </td>
                        <td className="py-3.5 px-4">
                          <span className="text-stone-800 block">
                            {order.shippingAddress.city} ({order.shippingAddress.province})
                          </span>
                          <span className="text-[10px] text-stone-500">
                            CP {order.shippingAddress.postalCode}
                          </span>
                        </td>
                        <td className="py-3.5 px-4">
                          <span className="font-semibold text-stone-800 block">
                            {order.items.reduce((acc, i) => acc + i.quantity, 0)} uds
                          </span>
                          <span className="text-[10px] text-stone-500 truncate max-w-xs block">
                            {order.items.map((i) => `${i.quantity}x ${i.name}`).join(", ")}
                          </span>
                        </td>
                        <td className="py-3.5 px-4">
                          <span className="bg-stone-100 text-stone-700 px-2 py-0.5 rounded text-[10px] font-semibold border border-stone-200">
                            {order.paymentMethod}
                          </span>
                        </td>
                        <td className="py-3.5 px-4 font-bold text-stone-900 font-sans">
                          {order.total.toFixed(2)} €
                        </td>
                        <td className="py-3.5 px-4" onClick={(e) => e.stopPropagation()}>
                          <select
                            value={order.status}
                            onChange={(e) =>
                              handleUpdateStatus(order.id, e.target.value as any)
                            }
                            className={`text-[11px] font-bold px-2 py-1 rounded-full border cursor-pointer ${
                              order.status === "Pagado"
                                ? "bg-blue-50 text-blue-700 border-blue-200"
                                : order.status === "En preparación"
                                ? "bg-amber-50 text-amber-800 border-amber-300"
                                : order.status === "Enviado"
                                ? "bg-purple-50 text-purple-700 border-purple-200"
                                : order.status === "Entregado"
                                ? "bg-emerald-50 text-emerald-800 border-emerald-300"
                                : "bg-stone-100 text-stone-600 border-stone-200"
                            }`}
                          >
                            <option value="Pagado">Pagado</option>
                            <option value="En preparación">En preparación</option>
                            <option value="Enviado">Enviado</option>
                            <option value="Entregado">Entregado</option>
                            <option value="Cancelado">Cancelado</option>
                          </select>
                        </td>
                        <td className="py-3.5 px-4 text-right" onClick={(e) => e.stopPropagation()}>
                          <button
                            onClick={() => setSelectedOrder(order)}
                            className="bg-stone-100 hover:bg-amber-100 text-stone-700 hover:text-amber-900 px-2.5 py-1 rounded-md text-xs font-semibold transition"
                          >
                            Ver
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        )}

        {/* TAB 2: PRODUCTS CATALOG */}
        {activeTab === "products" && (
          <div className="bg-white rounded-3xl p-6 border border-stone-200 shadow-xs space-y-6">
            <div className="flex justify-between items-center">
              <div>
                <h2 className="font-serif text-xl font-bold text-stone-900">
                  Gestión del Catálogo de Productos
                </h2>
                <p className="text-xs text-stone-500">
                  Control de stock instantáneo, precios y variantes de la tienda.
                </p>
              </div>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
              {localProducts.map((p) => (
                <div
                  key={p.id}
                  className="bg-stone-50 border border-stone-200 rounded-2xl p-4 flex gap-3 items-center justify-between"
                >
                  <div className="flex items-center gap-3 min-w-0">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={p.thumbnail}
                      alt={p.name}
                      className="w-14 h-14 object-cover rounded-lg border border-stone-200 shrink-0"
                    />
                    <div className="min-w-0">
                      <h4 className="text-xs font-bold text-stone-900 truncate">
                        {p.name}
                      </h4>
                      <p className="text-[11px] text-stone-500">
                        {p.category} · {p.weight}
                      </p>
                      <span className="text-xs font-bold text-amber-950 block mt-0.5">
                        {p.price.toFixed(2)} €
                      </span>
                    </div>
                  </div>

                  <div className="text-right shrink-0">
                    <button
                      onClick={() => handleToggleStock(p.id)}
                      className={`px-2.5 py-1 rounded-full text-[10px] font-bold uppercase transition ${
                        p.inStock
                          ? "bg-emerald-100 text-emerald-800 hover:bg-rose-100 hover:text-rose-800"
                          : "bg-rose-100 text-rose-800 hover:bg-emerald-100 hover:text-emerald-800"
                      }`}
                      title="Haz clic para cambiar disponibilidad"
                    >
                      {p.inStock ? "En Stock" : "Agotado"}
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* TAB 3: COUPONS */}
        {activeTab === "coupons" && (
          <div className="bg-white rounded-3xl p-6 border border-stone-200 shadow-xs space-y-6">
            <div>
              <h2 className="font-serif text-xl font-bold text-stone-900">
                Códigos de Descuento y Promociones
              </h2>
              <p className="text-xs text-stone-500">
                Crea cupones promocionales para campañas especiales.
              </p>
            </div>

            {/* Create new coupon */}
            <form onSubmit={handleAddCoupon} className="bg-stone-50 p-4 rounded-2xl border border-stone-200 flex flex-col sm:flex-row gap-3 items-end">
              <div className="flex-1 w-full sm:w-auto">
                <label className="block text-xs font-semibold text-stone-700 mb-1">
                  Código del Cupón
                </label>
                <input
                  type="text"
                  placeholder="Ej: PASCUA15"
                  value={newCouponCode}
                  onChange={(e) => setNewCouponCode(e.target.value)}
                  className="w-full border border-stone-300 rounded-lg p-2 text-xs uppercase outline-none focus:border-amber-700 bg-white"
                />
              </div>
              <div className="w-full sm:w-40">
                <label className="block text-xs font-semibold text-stone-700 mb-1">
                  Descuento (%)
                </label>
                <input
                  type="number"
                  min="1"
                  max="100"
                  value={newCouponDiscount}
                  onChange={(e) => setNewCouponDiscount(e.target.value)}
                  className="w-full border border-stone-300 rounded-lg p-2 text-xs outline-none focus:border-amber-700 bg-white"
                />
              </div>
              <button
                type="submit"
                className="bg-amber-900 hover:bg-amber-950 text-amber-50 px-5 py-2 rounded-lg text-xs font-bold transition w-full sm:w-auto shrink-0"
              >
                Crear Cupón
              </button>
            </form>

            {/* Coupons list */}
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
              {customCoupons.map((c, idx) => (
                <div key={idx} className="border border-dashed border-stone-300 rounded-2xl p-4 bg-amber-50/50 flex items-center justify-between">
                  <div className="flex items-center gap-2.5">
                    <Tag className="w-5 h-5 text-amber-800" />
                    <div>
                      <span className="font-mono font-bold text-sm text-stone-900 block">
                        {c.code}
                      </span>
                      <span className="text-xs text-stone-500">
                        {c.discountPercent ? `${c.discountPercent}% de dto.` : `${c.discountAmount}€ dto.`}
                      </span>
                    </div>
                  </div>
                  <span className="bg-emerald-100 text-emerald-800 text-[10px] font-bold px-2 py-0.5 rounded-full">
                    Activo
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}

      </main>

      {/* Order Detail Modal / Printable Packing Slip */}
      {selectedOrder && (
        <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto p-6 sm:p-8 shadow-2xl border border-stone-200 space-y-6">
            
            {/* Modal Header */}
            <div className="flex justify-between items-start pb-4 border-b border-stone-200">
              <div>
                <span className="text-[10px] uppercase font-bold text-amber-800 tracking-wider">
                  Albarán de Preparación / Factura
                </span>
                <h3 className="font-serif text-2xl font-bold text-stone-900">
                  Pedido {selectedOrder.orderNumber}
                </h3>
                <p className="text-xs text-stone-500">
                  Fecha: {new Date(selectedOrder.date).toLocaleString("es-ES")}
                </p>
              </div>
              <button
                onClick={() => setSelectedOrder(null)}
                className="text-stone-400 hover:text-stone-700 text-xs font-bold bg-stone-100 hover:bg-stone-200 px-3 py-1.5 rounded-lg"
              >
                Cerrar
              </button>
            </div>

            {/* Customer & Shipping Details */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs bg-stone-50 p-4 rounded-2xl border border-stone-200">
              <div className="space-y-1">
                <strong className="text-stone-800 block text-xs font-bold">Datos del Cliente:</strong>
                <p>{selectedOrder.customer.firstName} {selectedOrder.customer.lastName}</p>
                <p>Email: {selectedOrder.customer.email}</p>
                <p>Tel: {selectedOrder.customer.phone}</p>
                {selectedOrder.customer.nif && <p>NIF/CIF: {selectedOrder.customer.nif}</p>}
              </div>

              <div className="space-y-1">
                <strong className="text-stone-800 block text-xs font-bold">Dirección de Envío:</strong>
                <p>{selectedOrder.shippingAddress.address}</p>
                <p>{selectedOrder.shippingAddress.postalCode} {selectedOrder.shippingAddress.city}</p>
                <p>{selectedOrder.shippingAddress.province}, {selectedOrder.shippingAddress.country}</p>
                {selectedOrder.shippingAddress.deliveryNotes && (
                  <p className="text-amber-900 font-medium">Nota: {selectedOrder.shippingAddress.deliveryNotes}</p>
                )}
              </div>
            </div>

            {/* Gift Message if any */}
            {selectedOrder.isGift && (
              <div className="bg-amber-50 p-3.5 rounded-xl border border-amber-200 text-xs text-amber-950 flex items-start gap-2">
                <Gift className="w-4 h-4 text-amber-800 shrink-0 mt-0.5" />
                <div>
                  <strong>Dedicatoria para Regalo:</strong>
                  <p className="italic mt-0.5">&ldquo;{selectedOrder.giftMessage}&rdquo;</p>
                </div>
              </div>
            )}

            {/* Products Breakdown */}
            <div>
              <h4 className="font-bold text-xs uppercase tracking-wider text-stone-600 mb-2">
                Productos para Obrador
              </h4>
              <div className="divide-y divide-stone-200 border border-stone-200 rounded-xl overflow-hidden">
                {selectedOrder.items.map((item) => (
                  <div key={item.id} className="p-3 flex items-center justify-between text-xs bg-white">
                    <div className="flex items-center gap-3">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        src={item.thumbnail}
                        alt=""
                        className="w-10 h-10 object-cover rounded border border-stone-200"
                      />
                      <div>
                        <span className="font-bold text-stone-900 block">{item.name}</span>
                        <span className="text-[11px] text-stone-500">{item.weight}</span>
                      </div>
                    </div>
                    <div className="text-right">
                      <span className="font-bold text-stone-900 block">
                        {item.quantity} x {item.price.toFixed(2)} €
                      </span>
                      <span className="text-stone-600 font-semibold">
                        {(item.quantity * item.price).toFixed(2)} €
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Totals */}
            <div className="space-y-1 text-xs text-stone-600 border-t border-stone-200 pt-3">
              <div className="flex justify-between">
                <span>Subtotal:</span>
                <span>{selectedOrder.subtotal.toFixed(2)} €</span>
              </div>
              {selectedOrder.discount > 0 && (
                <div className="flex justify-between text-emerald-700">
                  <span>Descuento ({selectedOrder.couponCode}):</span>
                  <span>-{selectedOrder.discount.toFixed(2)} €</span>
                </div>
              )}
              <div className="flex justify-between">
                <span>Portes (24-48h):</span>
                <span>{selectedOrder.shippingCost === 0 ? "GRATIS" : `${selectedOrder.shippingCost.toFixed(2)} €`}</span>
              </div>
              <div className="flex justify-between font-serif font-bold text-base text-stone-900 pt-2 border-t border-stone-200">
                <span>Total Cobrado:</span>
                <span className="text-amber-950 font-sans text-lg">{selectedOrder.total.toFixed(2)} €</span>
              </div>
            </div>

            {/* Actions */}
            <div className="flex gap-3 pt-2">
              <button
                onClick={handlePrintPackingSlip}
                className="flex-1 bg-stone-900 hover:bg-stone-950 text-white py-2.5 rounded-xl font-semibold text-xs flex items-center justify-center gap-2 transition"
              >
                <Printer className="w-4 h-4" />
                <span>Imprimir Albarán Obrador</span>
              </button>
            </div>

          </div>
        </div>
      )}

    </div>
  );
}