'use client';

import { useState, useEffect, useCallback } from 'react';

interface OrderUser {
  email: string;
  first_name: string;
  last_name: string;
}

interface OrderItem {
  id: string;
  quantity: number;
  unit_price: number;
  product_snapshot: { name: string; image_url: string; brand: string };
}

interface Order {
  id: string;
  status: string;
  total_amount: number;
  subtotal: number;
  shipping_cost: number;
  tax_amount: number;
  shipping_address: Record<string, string>;
  tracking_number: string | null;
  notes: string | null;
  created_at: string;
  user: OrderUser | null;
  items: OrderItem[];
}

const STATUS_COLORS: Record<string, string> = {
  pending: 'bg-yellow-100 text-yellow-800',
  processing: 'bg-blue-100 text-blue-800',
  shipped: 'bg-purple-100 text-purple-800',
  delivered: 'bg-green-100 text-green-800',
  cancelled: 'bg-red-100 text-red-800',
};

const STATUSES = ['all', 'pending', 'processing', 'shipped', 'delivered', 'cancelled'];

export default function AdminOrdersPage() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [statusFilter, setStatusFilter] = useState('all');
  const [loading, setLoading] = useState(true);
  const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);
  const [updating, setUpdating] = useState(false);

  const fetchOrders = useCallback(async () => {
    setLoading(true);
    const res = await fetch(`/api/admin/orders?page=${page}&status=${statusFilter}`);
    const data = await res.json();
    setOrders(data.data || []);
    setTotal(data.total || 0);
    setLoading(false);
  }, [page, statusFilter]);

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

  async function updateOrder(orderId: string, updates: Record<string, unknown>) {
    setUpdating(true);
    await fetch('/api/admin/orders', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ order_id: orderId, ...updates }),
    });
    setUpdating(false);
    fetchOrders();
    if (selectedOrder?.id === orderId) {
      setSelectedOrder(prev => prev ? { ...prev, ...updates } as Order : null);
    }
  }

  const totalPages = Math.ceil(total / 20);

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-black text-gray-900">Orders</h1>
          <p className="text-sm text-gray-500">{total} total orders</p>
        </div>
      </div>

      {/* Status Filter */}
      <div className="flex gap-2 mb-4 overflow-x-auto pb-1">
        {STATUSES.map(s => (
          <button key={s} onClick={() => { setStatusFilter(s); setPage(1); }}
            className={`px-4 py-2 rounded-lg text-sm font-semibold capitalize transition-colors whitespace-nowrap ${statusFilter === s ? 'bg-primary text-white' : 'bg-white text-gray-600 border border-gray-200 hover:bg-gray-50'}`}>
            {s}
          </button>
        ))}
      </div>

      {/* Orders Table */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        {loading ? (
          <div className="flex items-center justify-center h-48">
            <div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
          </div>
        ) : orders.length === 0 ? (
          <div className="text-center py-12 text-gray-400">No orders found</div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="text-left text-xs text-gray-500 uppercase bg-gray-50 border-b border-gray-100">
                  <th className="px-4 py-3 font-semibold">Order ID</th>
                  <th className="px-4 py-3 font-semibold">Customer</th>
                  <th className="px-4 py-3 font-semibold">Items</th>
                  <th className="px-4 py-3 font-semibold">Status</th>
                  <th className="px-4 py-3 font-semibold text-right">Total</th>
                  <th className="px-4 py-3 font-semibold text-right">Date</th>
                  <th className="px-4 py-3 font-semibold text-right">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-50">
                {orders.map(order => (
                  <tr key={order.id} className="hover:bg-gray-50 transition-colors">
                    <td className="px-4 py-3 font-mono text-xs text-gray-600">#{order.id.slice(0, 8)}</td>
                    <td className="px-4 py-3">
                      <p className="font-medium text-gray-800">{order.user?.first_name} {order.user?.last_name}</p>
                      <p className="text-xs text-gray-400">{order.user?.email}</p>
                    </td>
                    <td className="px-4 py-3 text-gray-600">{order.items?.length || 0} items</td>
                    <td className="px-4 py-3">
                      <span className={`text-xs font-semibold px-2.5 py-1 rounded-full capitalize ${STATUS_COLORS[order.status] || 'bg-gray-100 text-gray-600'}`}>
                        {order.status}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-right font-bold">${Number(order.total_amount).toFixed(2)}</td>
                    <td className="px-4 py-3 text-right text-xs text-gray-500">{new Date(order.created_at).toLocaleDateString()}</td>
                    <td className="px-4 py-3 text-right">
                      <button onClick={() => setSelectedOrder(order)} className="text-primary hover:underline text-xs font-semibold">
                        View
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {/* Pagination */}
        {totalPages > 1 && (
          <div className="flex items-center justify-between px-4 py-3 border-t border-gray-100">
            <p className="text-xs text-gray-500">Page {page} of {totalPages}</p>
            <div className="flex gap-2">
              <button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}
                className="px-3 py-1 rounded-lg border border-gray-200 text-sm disabled:opacity-40 hover:bg-gray-50">Prev</button>
              <button onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={page === totalPages}
                className="px-3 py-1 rounded-lg border border-gray-200 text-sm disabled:opacity-40 hover:bg-gray-50">Next</button>
            </div>
          </div>
        )}
      </div>

      {/* Order Detail Modal */}
      {selectedOrder && (
        <>
          <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={() => setSelectedOrder(null)} />
          <div className="fixed inset-y-0 right-0 w-full max-w-lg bg-white shadow-2xl z-50 overflow-y-auto">
            <div className="sticky top-0 bg-white border-b border-gray-100 px-6 py-4 flex items-center justify-between">
              <h2 className="font-bold text-gray-900">Order #{selectedOrder.id.slice(0, 8)}</h2>
              <button onClick={() => setSelectedOrder(null)} className="text-gray-400 hover:text-gray-700">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
              </button>
            </div>
            <div className="p-6 space-y-6">
              {/* Customer */}
              <div>
                <h3 className="text-xs font-semibold text-gray-500 uppercase mb-2">Customer</h3>
                <p className="text-sm font-medium">{selectedOrder.user?.first_name} {selectedOrder.user?.last_name}</p>
                <p className="text-sm text-gray-500">{selectedOrder.user?.email}</p>
              </div>

              {/* Status Update */}
              <div>
                <h3 className="text-xs font-semibold text-gray-500 uppercase mb-2">Update Status</h3>
                <div className="flex flex-wrap gap-2">
                  {['pending', 'processing', 'shipped', 'delivered', 'cancelled'].map(s => (
                    <button key={s} onClick={() => updateOrder(selectedOrder.id, { status: s })} disabled={updating || selectedOrder.status === s}
                      className={`px-3 py-1.5 rounded-lg text-xs font-semibold capitalize transition-colors ${selectedOrder.status === s ? 'bg-primary text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'} disabled:opacity-50`}>
                      {s}
                    </button>
                  ))}
                </div>
              </div>

              {/* Tracking */}
              <div>
                <h3 className="text-xs font-semibold text-gray-500 uppercase mb-2">Tracking Number</h3>
                <form onSubmit={e => {
                  e.preventDefault();
                  const fd = new FormData(e.currentTarget);
                  updateOrder(selectedOrder.id, { tracking_number: fd.get('tracking') });
                }} className="flex gap-2">
                  <input name="tracking" defaultValue={selectedOrder.tracking_number || ''} placeholder="Enter tracking number"
                    className="flex-1 px-3 py-2 rounded-lg border border-gray-200 text-sm" />
                  <button type="submit" disabled={updating} className="px-4 py-2 bg-primary text-white text-sm font-semibold rounded-lg disabled:opacity-50">Save</button>
                </form>
              </div>

              {/* Shipping Address */}
              <div>
                <h3 className="text-xs font-semibold text-gray-500 uppercase mb-2">Shipping Address</h3>
                <div className="bg-gray-50 rounded-lg p-3 text-sm">
                  <p>{selectedOrder.shipping_address?.first_name} {selectedOrder.shipping_address?.last_name}</p>
                  <p>{selectedOrder.shipping_address?.street_address}</p>
                  {selectedOrder.shipping_address?.apartment && <p>{selectedOrder.shipping_address.apartment}</p>}
                  <p>{selectedOrder.shipping_address?.city}, {selectedOrder.shipping_address?.state} {selectedOrder.shipping_address?.zip_code}</p>
                  <p>{selectedOrder.shipping_address?.phone}</p>
                </div>
              </div>

              {/* Items */}
              <div>
                <h3 className="text-xs font-semibold text-gray-500 uppercase mb-2">Items ({selectedOrder.items?.length || 0})</h3>
                <div className="space-y-2">
                  {(selectedOrder.items || []).map(item => (
                    <div key={item.id} className="flex items-center gap-3 bg-gray-50 rounded-lg p-3">
                      <img src={item.product_snapshot.image_url} alt={item.product_snapshot.name} className="w-12 h-12 object-cover rounded-lg" />
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium text-gray-800 truncate">{item.product_snapshot.name}</p>
                        <p className="text-xs text-gray-500">{item.product_snapshot.brand} · Qty: {item.quantity}</p>
                      </div>
                      <p className="text-sm font-bold">${(item.unit_price * item.quantity).toFixed(2)}</p>
                    </div>
                  ))}
                </div>
              </div>

              {/* Totals */}
              <div className="bg-gray-50 rounded-lg p-4 space-y-2 text-sm">
                <div className="flex justify-between"><span className="text-gray-500">Subtotal</span><span className="font-medium">${Number(selectedOrder.subtotal).toFixed(2)}</span></div>
                <div className="flex justify-between"><span className="text-gray-500">Shipping</span><span className="font-medium">${Number(selectedOrder.shipping_cost).toFixed(2)}</span></div>
                <div className="flex justify-between"><span className="text-gray-500">Tax</span><span className="font-medium">${Number(selectedOrder.tax_amount).toFixed(2)}</span></div>
                <hr />
                <div className="flex justify-between text-base"><span className="font-bold">Total</span><span className="font-black">${Number(selectedOrder.total_amount).toFixed(2)}</span></div>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  );
}