'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/lib/store';
import type { Order } from '@/lib/types';

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

export default function OrdersPage() {
  const router = useRouter();
  const user = useAuthStore(s => s.user);
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!user) { router.push('/login'); return; }
    async function fetchOrders() {
      try {
        const res = await fetch('/api/orders');
        const data = await res.json();
        setOrders(data.data || []);
      } catch {
        setOrders([]);
      }
      setLoading(false);
    }
    fetchOrders();
  }, [user, router]);

  if (!user) return null;

  if (loading) {
    return (
      <div className="max-w-4xl mx-auto px-4 py-20 text-center">
        <div className="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto"></div>
        <p className="text-gray-500 mt-4">Loading orders...</p>
      </div>
    );
  }

  return (
    <div className="max-w-4xl mx-auto px-4 py-6">
      <nav className="flex items-center gap-2 text-sm text-gray-500 mb-6">
        <Link href="/" className="hover:text-primary">Home</Link>
        <span>/</span>
        <Link href="/account" className="hover:text-primary">Account</Link>
        <span>/</span>
        <span className="text-gray-800 font-semibold">Orders</span>
      </nav>

      <h1 className="text-2xl font-black text-gray-900 mb-6">Order History</h1>

      {orders.length === 0 ? (
        <div className="text-center py-20">
          <div className="text-7xl mb-6">📦</div>
          <h2 className="text-2xl font-black text-gray-900 mb-3">No orders yet</h2>
          <p className="text-gray-500 mb-6">Start shopping to see your orders here!</p>
          <Link href="/category" className="btn-primary px-8 py-3.5 rounded-xl font-bold text-sm inline-block">Shop Now</Link>
        </div>
      ) : (
        <div className="space-y-4">
          {orders.map(order => (
            <div key={order.id} className="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
              <div className="flex items-center justify-between mb-4">
                <div>
                  <p className="text-xs text-gray-500">Order #{order.id.slice(0, 8).toUpperCase()}</p>
                  <p className="text-xs text-gray-400">{new Date(order.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
                </div>
                <div className="flex items-center gap-3">
                  <span className={`text-xs font-bold px-3 py-1 rounded-full capitalize ${statusColors[order.status] || 'bg-gray-100 text-gray-700'}`}>
                    {order.status}
                  </span>
                  <span className="text-lg font-black text-gray-900">${order.total_amount.toFixed(2)}</span>
                </div>
              </div>
              {order.items && order.items.length > 0 && (
                <div className="flex gap-3 overflow-x-auto pb-2">
                  {order.items.map(item => (
                    <div key={item.id} className="flex items-center gap-3 bg-gray-50 rounded-xl p-3 shrink-0 min-w-[200px]">
                      <img src={item.product_snapshot.image_url} alt={item.product_snapshot.name} className="w-12 h-12 object-cover rounded-lg" />
                      <div>
                        <p className="text-xs font-semibold text-gray-800 line-clamp-1">{item.product_snapshot.name}</p>
                        <p className="text-xs text-gray-500">Qty: {item.quantity} • ${item.unit_price.toFixed(2)}</p>
                      </div>
                    </div>
                  ))}
                </div>
              )}
              {order.tracking_number && (
                <div className="mt-3 bg-blue-50 rounded-lg px-4 py-2 flex items-center gap-2">
                  <svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                  <span className="text-xs text-blue-700 font-semibold">Tracking: {order.tracking_number}</span>
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}