"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

export default function AccountPage() {
  const router = useRouter();
  const [user, setUser] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [orderCount, setOrderCount] = useState(0);
  const [recentOrders, setRecentOrders] = useState<any[]>([]);
  const [wishlistCount] = useState(0); // Placeholder until wishlist implemented

  useEffect(() => {
    const userData = localStorage.getItem("user");
    if (!userData) {
      router.push("/login");
      return;
    }
    setUser(JSON.parse(userData));
    setLoading(false);
  }, [router]);

  useEffect(() => {
    const fetchUserStats = async () => {
      try {
        const email = JSON.parse(localStorage.getItem("user") || "{}")?.email;
        if (!email) return;

        const res = await fetch(`/api/orders?email=${encodeURIComponent(email)}&limit=5`);
        if (res.ok) {
          const data = await res.json();
          const orders = data.orders || [];
          setOrderCount(data.pagination?.total ?? orders.length);
          setRecentOrders(orders);
        }
      } catch (error) {
        // silent fail - show zeros
        console.error("Failed to load user stats:", error);
      }
    };
    fetchUserStats();
  }, []);

  const handleLogout = () => {
    localStorage.removeItem("user");
    localStorage.removeItem("isAuthenticated");
    router.push("/");
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50">
        <Navbar />
        <div className="container mx-auto px-4 py-12">
          <p>Loading...</p>
        </div>
      </div>
    );
  }

  if (!user) {
    return null;
  }

  return (
    <div className="min-h-screen flex flex-col bg-gray-50">
      <Navbar />
      <main className="flex-grow container mx-auto px-4 py-8">
        <div className="max-w-6xl mx-auto">
          <h1 className="text-3xl font-bold text-gray-900 mb-6">My Account</h1>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {/* Sidebar */}
            <div className="md:col-span-1">
              <div className="bg-white rounded-lg shadow p-6">
                <div className="text-center mb-6">
                  <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <span className="text-2xl font-bold text-blue-600">
                      {user.name.charAt(0).toUpperCase()}
                    </span>
                  </div>
                  <h2 className="text-lg font-semibold text-gray-900">{user.name}</h2>
                  <p className="text-sm text-gray-600">{user.email}</p>
                </div>

                <nav className="space-y-2">
                  <Link
                    href="/account"
                    className="block px-4 py-2 bg-blue-50 text-blue-700 rounded-lg font-semibold"
                  >
                    Dashboard
                  </Link>
                  <Link
                    href="/account/orders"
                    className="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded-lg"
                  >
                    My Orders
                  </Link>
                  <Link
                    href="/account/addresses"
                    className="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded-lg"
                  >
                    My Addresses
                  </Link>
                  <Link
                    href="/account/wishlist"
                    className="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded-lg"
                  >
                    My Wishlist
                  </Link>
                  <Link
                    href="/account/profile"
                    className="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded-lg"
                  >
                    Profile Settings
                  </Link>
                  <button
                    onClick={handleLogout}
                    className="block w-full text-left px-4 py-2 text-red-600 hover:bg-red-50 rounded-lg"
                  >
                    Logout
                  </button>
                </nav>
              </div>
            </div>

            {/* Main Content */}
            <div className="md:col-span-2">
              <div className="bg-white rounded-lg shadow p-6">
                <h2 className="text-xl font-semibold text-gray-900 mb-4">Account Overview</h2>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                  <div className="border border-gray-200 rounded-lg p-4">
                    <h3 className="text-sm font-semibold text-gray-600 mb-2">Total Orders</h3>
                    <p className="text-2xl font-bold text-gray-900">{orderCount}</p>
                  </div>
                  <div className="border border-gray-200 rounded-lg p-4">
                    <h3 className="text-sm font-semibold text-gray-600 mb-2">Wishlist Items</h3>
                    <p className="text-2xl font-bold text-gray-900">{wishlistCount}</p>
                  </div>
                </div>

                <div className="space-y-4">
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Recent Orders</h3>
                    {recentOrders.length === 0 ? (
                      <>
                        <p className="text-gray-600">No orders yet.</p>
                        <Link
                          href="/shop"
                          className="text-blue-600 hover:underline font-semibold"
                        >
                          Start Shopping
                        </Link>
                      </>
                    ) : (
                      <div className="divide-y rounded border">
                        {recentOrders.map((o) => (
                          <div key={o._id} className="p-3 flex justify-between items-center">
                            <div>
                              <div className="text-sm font-semibold text-gray-900">
                                Order #{String(o._id).slice(-8)}
                              </div>
                              <div className="text-xs text-gray-600">
                                {new Date(o.createdAt).toLocaleDateString()} • {o.status}
                              </div>
                            </div>
                            <div className="text-sm font-bold text-gray-900">
                              ${Number(o.total || 0).toFixed(2)}
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}