'use client';

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

interface UserDashboardClientProps {
  initialOrders: Order[];
  initialLicenses: License[];
}

export default function UserDashboardClient({
  initialOrders,
  initialLicenses,
}: UserDashboardClientProps) {
  const { user } = useAuth();

  const userOrders = initialOrders.filter(
    (o) => !user || o.user_id === user.id || o.customer_email === user.email
  );
  const userLicenses = initialLicenses.filter(
    (l) => !user || l.user_id === user.id || l.user_id === 'usr-demo'
  );

  const activeLicenses = userLicenses.filter((l) => l.status === 'active' || l.status === 'trial');
  const totalSpent = userOrders.reduce((sum, o) => sum + (o.payment_status === 'completed' ? o.total : 0), 0);

  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 />

          {/* Main Dashboard Content */}
          <div className="flex-1 space-y-8 w-full">
            {/* Welcome Greeting */}
            <div className="bg-white rounded-3xl p-6 sm:p-8 shadow-sm border border-gray-100 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
              <div>
                <span className="text-xs font-bold text-indigo-600 uppercase tracking-wider">
                  Client Portal
                </span>
                <h1 className="text-2xl sm:text-3xl font-black text-gray-900 mt-1">
                  Welcome back, {user?.name || 'Developer'}! 👋
                </h1>
                <p className="text-xs sm:text-sm text-gray-500 mt-1">
                  Manage your active WHMCS licenses, whitelist authorized domains, and download source codes.
                </p>
              </div>

              <Link
                href="/shop"
                className="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xs rounded-xl shadow-md transition shrink-0 text-center"
              >
                Browse Marketplace
              </Link>
            </div>

            {/* Quick Stats Grid */}
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
              <div className="bg-white p-5 rounded-3xl border border-gray-100 shadow-sm space-y-2">
                <div className="w-10 h-10 rounded-2xl bg-indigo-100 text-indigo-600 flex items-center justify-center">
                  <Key className="w-5 h-5" />
                </div>
                <div>
                  <span className="text-xs font-bold text-gray-400">Active Licenses</span>
                  <h3 className="text-2xl font-black text-gray-900">{activeLicenses.length}</h3>
                </div>
              </div>

              <div className="bg-white p-5 rounded-3xl border border-gray-100 shadow-sm space-y-2">
                <div className="w-10 h-10 rounded-2xl bg-emerald-100 text-emerald-600 flex items-center justify-center">
                  <Package className="w-5 h-5" />
                </div>
                <div>
                  <span className="text-xs font-bold text-gray-400">Total Orders</span>
                  <h3 className="text-2xl font-black text-gray-900">{userOrders.length}</h3>
                </div>
              </div>

              <div className="bg-white p-5 rounded-3xl border border-gray-100 shadow-sm space-y-2">
                <div className="w-10 h-10 rounded-2xl bg-purple-100 text-purple-600 flex items-center justify-center">
                  <Download className="w-5 h-5" />
                </div>
                <div>
                  <span className="text-xs font-bold text-gray-400">Downloads</span>
                  <h3 className="text-2xl font-black text-gray-900">{userLicenses.length}</h3>
                </div>
              </div>

              <div className="bg-white p-5 rounded-3xl border border-gray-100 shadow-sm space-y-2">
                <div className="w-10 h-10 rounded-2xl bg-amber-100 text-amber-600 flex items-center justify-center">
                  <ShieldCheck className="w-5 h-5" />
                </div>
                <div>
                  <span className="text-xs font-bold text-gray-400">Total Spent</span>
                  <h3 className="text-2xl font-black text-gray-900">${totalSpent.toFixed(2)}</h3>
                </div>
              </div>
            </div>

            {/* Active Licenses Table Preview */}
            <div className="bg-white rounded-3xl p-6 sm:p-8 shadow-sm border border-gray-100 space-y-4">
              <div className="flex items-center justify-between border-b border-gray-100 pb-4">
                <h3 className="font-extrabold text-lg text-gray-900">
                  Active Licenses & Domain Bindings
                </h3>
                <Link
                  href="/user/licenses"
                  className="text-xs font-bold text-indigo-600 hover:text-indigo-700 flex items-center gap-1"
                >
                  <span>Manage All</span>
                  <ArrowRight className="w-3.5 h-3.5" />
                </Link>
              </div>

              {userLicenses.length > 0 ? (
                <div className="divide-y divide-gray-100">
                  {userLicenses.slice(0, 3).map((lic) => (
                    <div
                      key={lic.id}
                      className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 first:pt-0 last:pb-0"
                    >
                      <div className="space-y-1">
                        <div className="flex items-center gap-2">
                          <span
                            className={`text-[10px] font-extrabold uppercase px-2 py-0.5 rounded-md ${
                              lic.status === 'active'
                                ? 'bg-emerald-100 text-emerald-700'
                                : 'bg-blue-100 text-blue-700'
                            }`}
                          >
                            {lic.status}
                          </span>
                          <h4 className="font-bold text-sm text-gray-900">{lic.product_title}</h4>
                        </div>
                        <p className="font-mono text-xs text-indigo-600 font-semibold select-all">
                          {lic.license_key}
                        </p>
                      </div>

                      <div className="flex items-center gap-4 text-xs">
                        <div className="text-right">
                          <span className="block text-gray-400 text-[11px]">Bound Domain:</span>
                          <strong className="text-gray-700 font-mono">
                            {lic.bound_domain || 'Not Bound (Click to set)'}
                          </strong>
                        </div>

                        <Link
                          href="/user/licenses"
                          className="px-3.5 py-1.5 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 font-semibold rounded-xl text-xs"
                        >
                          Configure
                        </Link>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="py-6 text-center text-gray-400 text-xs">
                  No licenses assigned yet. Browse our store to get started!
                </div>
              )}
            </div>

            {/* Recent Orders Preview */}
            <div className="bg-white rounded-3xl p-6 sm:p-8 shadow-sm border border-gray-100 space-y-4">
              <div className="flex items-center justify-between border-b border-gray-100 pb-4">
                <h3 className="font-extrabold text-lg text-gray-900">Recent Purchases</h3>
                <Link
                  href="/user/orders"
                  className="text-xs font-bold text-indigo-600 hover:text-indigo-700 flex items-center gap-1"
                >
                  <span>All Invoices</span>
                  <ArrowRight className="w-3.5 h-3.5" />
                </Link>
              </div>

              {userOrders.length > 0 ? (
                <div className="divide-y divide-gray-100">
                  {userOrders.slice(0, 3).map((order) => (
                    <div
                      key={order.id}
                      className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 first:pt-0 last:pb-0"
                    >
                      <div>
                        <div className="flex items-center gap-2">
                          <span className="font-mono font-bold text-sm text-gray-900">
                            #{order.order_number}
                          </span>
                          <span
                            className={`text-[10px] font-extrabold uppercase px-2 py-0.5 rounded-md ${
                              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">
                          {new Date(order.created_at).toLocaleDateString()} • {order.payment_method.toUpperCase()}
                        </p>
                      </div>

                      <div className="flex items-center gap-4">
                        <span className="font-black text-sm text-indigo-600">
                          ${order.total.toFixed(2)}
                        </span>
                        <Link
                          href={`/order-success/${order.id}`}
                          className="px-3.5 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold rounded-xl text-xs"
                        >
                          View Receipt
                        </Link>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="py-6 text-center text-gray-400 text-xs">
                  No orders recorded yet.
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}