'use client';

import React from 'react';
import Link from 'next/link';
import { Package, ExternalLink, Download, FileText, CheckCircle2, Clock } from 'lucide-react';
import { Order } from '@/types';
import { useAuth } from '@/context/AuthContext';
import UserSidebar from '@/components/user/UserSidebar';

export default function UserOrdersClient({ initialOrders }: { initialOrders: Order[] }) {
  const { user } = useAuth();
  const userOrders = initialOrders.filter(
    (o) => !user || o.user_id === user.id || o.customer_email === user.email
  );

  return (
    <div className="py-8 md:py-12 bg-gray-50 min-h-screen">
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="flex flex-col lg:flex-row gap-8 items-start">
          <UserSidebar />

          <div className="flex-1 space-y-6 w-full">
            <div className="bg-white rounded-3xl p-6 sm:p-8 shadow-sm border border-gray-100 flex items-center justify-between">
              <div>
                <h1 className="text-2xl sm:text-3xl font-black text-gray-900">
                  My Orders & Invoices ({userOrders.length})
                </h1>
                <p className="text-xs sm:text-sm text-gray-500 mt-1">
                  Download receipts, view transaction hashes, and review purchase history.
                </p>
              </div>
            </div>

            {userOrders.length > 0 ? (
              <div className="space-y-4">
                {userOrders.map((order) => (
                  <div
                    key={order.id}
                    className="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 space-y-4"
                  >
                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-gray-100 pb-3">
                      <div>
                        <div className="flex items-center gap-2">
                          <span className="font-mono font-bold text-base text-gray-900">
                            #{order.order_number}
                          </span>
                          <span
                            className={`text-[10px] font-extrabold uppercase px-2.5 py-0.5 rounded-full ${
                              order.payment_status === 'completed'
                                ? 'bg-emerald-100 text-emerald-700'
                                : 'bg-amber-100 text-amber-700'
                            }`}
                          >
                            {order.payment_status}
                          </span>
                        </div>
                        <p className="text-xs text-gray-400 mt-0.5">
                          Placed on {new Date(order.created_at).toLocaleDateString()} via{' '}
                          <strong className="uppercase">{order.payment_method}</strong>
                        </p>
                      </div>

                      <div className="flex items-center gap-3">
                        <span className="font-black text-lg text-indigo-600">
                          ${order.total.toFixed(2)}
                        </span>
                        <Link
                          href={`/order-success/${order.id}`}
                          className="px-4 py-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 font-bold rounded-xl text-xs flex items-center gap-1.5 transition"
                        >
                          <FileText className="w-3.5 h-3.5" />
                          <span>View Invoice</span>
                        </Link>
                      </div>
                    </div>

                    {/* Order Items */}
                    <div className="space-y-2">
                      {order.items.map((item, idx) => (
                        <div
                          key={idx}
                          className="flex items-center justify-between text-xs py-1"
                        >
                          <div className="flex items-center gap-2">
                            <span className="w-2 h-2 rounded-full bg-indigo-600"></span>
                            <span className="font-bold text-gray-800">{item.product_title}</span>
                            <span className="text-gray-400">({item.plan_name})</span>
                          </div>
                          <span className="font-semibold text-gray-700 font-mono">
                            {item.license_key || 'Key Pending Approval'}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="bg-white rounded-3xl p-12 text-center text-gray-400 text-sm">
                No orders found.
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}