"use client";

import React, { useState, useEffect } from "react";
import { useApp } from "@/context/AppContext";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
import { AIAssistant } from "@/components/AIAssistant";
import { mockProducts, mockReviews, Product, Order } from "@/data/mockData";
import { User, ShoppingBag, Heart, Award, MapPin, LogIn, Check, AlertCircle, Share2, Clipboard } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

export default function AccountPage() {
  const { user, login, logout, wishlist, toggleWishlist, formatPrice } = useApp();
  
  // Tab control
  const [activeTab, setActiveTab] = useState<"orders" | "wishlist" | "loyalty" | "addresses">("orders");

  // Authentication form states
  const [isRegistering, setIsRegistering] = useState(false);
  const [emailInput, setEmailInput] = useState("");
  const [passwordInput, setPasswordInput] = useState("");
  const [authError, setAuthError] = useState("");

  // Orders state
  const [orders, setOrders] = useState<any[]>([]);
  // Address state
  const [addressInput, setAddressInput] = useState("");
  const [savedAddresses, setSavedAddresses] = useState<string[]>([]);
  const [copiedReferral, setCopiedReferral] = useState(false);

  // Sync orders and addresses
  useEffect(() => {
    const localOrders = localStorage.getItem("starboy_orders");
    if (localOrders) {
      setOrders(JSON.parse(localOrders));
    }
    if (user) {
      setSavedAddresses(user.addresses);
    }
  }, [user]);

  const handleLoginSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setAuthError("");
    if (emailInput.trim() && passwordInput.length >= 6) {
      login(emailInput.trim());
    } else {
      setAuthError("Invalid credentials. Password must be at least 6 characters.");
    }
  };

  const handleOAuthLogin = () => {
    login("starboy.customer@gmail.com");
  };

  const handleAddAddress = (e: React.FormEvent) => {
    e.preventDefault();
    if (addressInput.trim()) {
      const updated = [...savedAddresses, addressInput.trim()];
      setSavedAddresses(updated);
      setAddressInput("");
      // Update context user
      if (user) {
        const updatedUser = { ...user, addresses: updated };
        localStorage.setItem("starboy_user", JSON.stringify(updatedUser));
      }
    }
  };

  const handleRemoveAddress = (idx: number) => {
    const updated = savedAddresses.filter((_, i) => i !== idx);
    setSavedAddresses(updated);
    if (user) {
      const updatedUser = { ...user, addresses: updated };
      localStorage.setItem("starboy_user", JSON.stringify(updatedUser));
    }
  };

  const handleCopyReferral = () => {
    navigator.clipboard.writeText("STARBOY-REF-9201");
    setCopiedReferral(true);
    setTimeout(() => setCopiedReferral(false), 2000);
  };

  // Filter wishlisted products
  const wishlistedProducts = mockProducts.filter((p) => wishlist.includes(p.id));

  return (
    <div className="flex min-h-screen flex-col bg-[#F8F7F2]">
      <Navbar />

      <main className="flex-1 py-12 px-6 md:px-12 mx-auto max-w-7xl w-full">
        
        {/* UNAUTHENTICATED VIEW: Login/Register Grid */}
        {!user ? (
          <div className="max-w-md mx-auto bg-white border border-[#1A1A1A]/10 p-6 md:p-8 space-y-6">
            <div className="text-center space-y-2 border-b border-[#1A1A1A]/10 pb-4">
              <span className="text-[9px] font-bold text-[#D4AF37] uppercase tracking-[0.35em] block">MEMBERSHIP ARCHIVE</span>
              <h2 className="font-serif text-xl font-bold uppercase tracking-widest text-[#0a0a0a]">
                {isRegistering ? "CREATE STARBOY ACCOUNT" : "SIGN IN TO THE COMMUNITY"}
              </h2>
            </div>

            <form onSubmit={handleLoginSubmit} className="space-y-4">
              <div className="space-y-1.5">
                <label className="text-[9px] font-bold uppercase tracking-wider text-neutral-400">Email Address</label>
                <input
                  type="email"
                  required
                  value={emailInput}
                  onChange={(e) => setEmailInput(e.target.value)}
                  placeholder="e.g. customer@starboy.com"
                  className="w-full bg-[#F8F7F2] border border-[#1A1A1A]/10 text-xs px-4 py-2.5 outline-none focus:border-[#D4AF37]"
                />
              </div>

              <div className="space-y-1.5">
                <label className="text-[9px] font-bold uppercase tracking-wider text-neutral-400">Password</label>
                <input
                  type="password"
                  required
                  value={passwordInput}
                  onChange={(e) => setPasswordInput(e.target.value)}
                  placeholder="••••••••"
                  className="w-full bg-[#F8F7F2] border border-[#1A1A1A]/10 text-xs px-4 py-2.5 outline-none focus:border-[#D4AF37]"
                />
              </div>

              {authError && (
                <div className="text-[10px] text-red-600 font-semibold flex items-center gap-1.5">
                  <AlertCircle className="w-3.5 h-3.5" /> {authError}
                </div>
              )}

              <button
                type="submit"
                className="w-full bg-[#0A0A0A] hover:bg-[#D4AF37] text-white hover:text-black font-semibold text-xs tracking-widest py-3 border border-black hover:border-[#D4AF37] transition-all uppercase"
              >
                {isRegistering ? "Register Account" : "Sign In"}
              </button>
            </form>

            <div className="relative flex py-2 items-center">
              <div className="flex-grow border-t border-neutral-200"></div>
              <span className="flex-shrink mx-4 text-[9px] text-neutral-400 font-bold uppercase tracking-wider">OR</span>
              <div className="flex-grow border-t border-neutral-200"></div>
            </div>

            {/* Social Google Login Button */}
            <button
              onClick={handleOAuthLogin}
              className="w-full bg-white hover:bg-neutral-50 text-neutral-700 font-semibold text-xs tracking-widest py-3 border border-[#1A1A1A]/20 transition-all flex items-center justify-center gap-2 uppercase"
            >
              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z" fill="#FBBC05"/>
                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
              </svg>
              Sign In With Google
            </button>

            <div className="text-center pt-2">
              <button
                onClick={() => setIsRegistering(!isRegistering)}
                className="text-[10px] text-neutral-500 hover:text-black underline uppercase font-bold tracking-wider"
              >
                {isRegistering ? "Already have an account? Sign In" : "New to Starboy? Register here"}
              </button>
            </div>
          </div>
        ) : (
          
          /* AUTHENTICATED VIEW: Account Portal */
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            
            {/* Left Column: Sidebar Menu Details */}
            <aside className="lg:col-span-3 border border-[#1A1A1A]/10 bg-white p-6 space-y-8">
              <div className="space-y-2 border-b border-[#1A1A1A]/10 pb-6 text-center lg:text-left">
                <span className="text-[9px] font-bold text-[#D4AF37] uppercase tracking-wider block">Logged In as</span>
                <h3 className="font-serif text-base font-bold text-black uppercase">{user.name}</h3>
                <p className="text-[10px] text-neutral-400 font-sans">{user.email}</p>
                <button
                  onClick={logout}
                  className="text-[9px] font-bold tracking-widest text-red-700 hover:underline uppercase block mt-2"
                >
                  Logout Session
                </button>
              </div>

              {/* Menu items */}
              <div className="flex flex-col gap-2">
                <button
                  onClick={() => setActiveTab("orders")}
                  className={`flex items-center gap-2 text-xs uppercase tracking-wider py-2 text-left border-b border-transparent ${
                    activeTab === "orders" ? "text-[#D4AF37] font-bold" : "text-[#1A1A1A] hover:text-[#D4AF37]"
                  }`}
                >
                  <ShoppingBag className="w-4 h-4" /> Order History ({orders.length})
                </button>
                <button
                  onClick={() => setActiveTab("wishlist")}
                  className={`flex items-center gap-2 text-xs uppercase tracking-wider py-2 text-left border-b border-transparent ${
                    activeTab === "wishlist" ? "text-[#D4AF37] font-bold" : "text-[#1A1A1A] hover:text-[#D4AF37]"
                  }`}
                >
                  <Heart className="w-4 h-4" /> Wishlist ({wishlistedProducts.length})
                </button>
                <button
                  onClick={() => setActiveTab("loyalty")}
                  className={`flex items-center gap-2 text-xs uppercase tracking-wider py-2 text-left border-b border-transparent ${
                    activeTab === "loyalty" ? "text-[#D4AF37] font-bold" : "text-[#1A1A1A] hover:text-[#D4AF37]"
                  }`}
                >
                  <Award className="w-4 h-4" /> Loyalty & VIP (S.{user.points} pts)
                </button>
                <button
                  onClick={() => setActiveTab("addresses")}
                  className={`flex items-center gap-2 text-xs uppercase tracking-wider py-2 text-left border-b border-transparent ${
                    activeTab === "addresses" ? "text-[#D4AF37] font-bold" : "text-[#1A1A1A] hover:text-[#D4AF37]"
                  }`}
                >
                  <MapPin className="w-4 h-4" /> Address Manager
                </button>
              </div>
            </aside>

            {/* Right Column: Tab View Content */}
            <section className="lg:col-span-9 bg-white border border-[#1A1A1A]/10 p-6 md:p-8 space-y-6">
              
              {/* TAB 1: Order History */}
              {activeTab === "orders" && (
                <div className="space-y-6">
                  <h2 className="font-serif text-lg font-bold uppercase tracking-widest text-black border-b pb-3">
                    YOUR ORDER ARCHIVE
                  </h2>

                  {orders.length === 0 ? (
                    <p className="text-xs text-neutral-400 font-sans italic py-6">You have not placed any orders yet.</p>
                  ) : (
                    <div className="space-y-6">
                      {orders.map((ord) => (
                        <div key={ord.orderId} className="border border-[#1A1A1A]/10 p-6 space-y-4">
                          {/* Top bar info */}
                          <div className="flex flex-col sm:flex-row sm:items-center justify-between border-b pb-3 gap-2 text-xs">
                            <div>
                              <span className="text-neutral-400 block text-[9px] uppercase font-bold">Order ID</span>
                              <span className="font-bold text-black uppercase">{ord.orderId}</span>
                            </div>
                            <div>
                              <span className="text-neutral-400 block text-[9px] uppercase font-bold">Date Placed</span>
                              <span className="font-bold text-neutral-800 font-sans">{new Date().toLocaleDateString()}</span>
                            </div>
                            <div>
                              <span className="text-neutral-400 block text-[9px] uppercase font-bold">Fulfillment Status</span>
                              <span className="font-bold text-yellow-700 uppercase">{ord.orderStatus || "Pending Verification"}</span>
                            </div>
                            <div>
                              <span className="text-neutral-400 block text-[9px] uppercase font-bold">Courier Tracking</span>
                              <span className="font-bold text-black uppercase font-sans tracking-wide">{ord.trackingNumber} ({ord.courier})</span>
                            </div>
                          </div>

                          {/* Items listing */}
                          <div className="space-y-3">
                            {ord.items.map((item: any, i: number) => (
                              <div key={i} className="flex justify-between items-center text-xs">
                                <div className="flex gap-3">
                                  <div className="relative h-10 w-8 border border-[#1A1A1A]/5">
                                    <Image src={item.image} alt={item.name} fill className="object-cover" />
                                  </div>
                                  <div className="my-auto">
                                    <span className="font-serif font-bold text-[11px] text-black uppercase block">{item.name}</span>
                                    <span className="text-[8px] text-neutral-400 uppercase tracking-widest">{item.size} / {item.color} x{item.quantity}</span>
                                  </div>
                                </div>
                                <span className="font-sans font-semibold text-black">{formatPrice(item.price * item.quantity)}</span>
                              </div>
                            ))}
                          </div>

                          {/* Order subtotal */}
                          <div className="border-t pt-3 flex justify-between items-center text-xs font-bold uppercase text-black">
                            <span>TOTAL INVOICE (INCL. DELIVERY)</span>
                            <span className="text-[#D4AF37] font-sans text-sm">{formatPrice(ord.total)}</span>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {/* TAB 2: Wishlist Grid */}
              {activeTab === "wishlist" && (
                <div className="space-y-6">
                  <h2 className="font-serif text-lg font-bold uppercase tracking-widest text-black border-b pb-3">
                    WISH-LIST ARCHIVE
                  </h2>

                  {wishlistedProducts.length === 0 ? (
                    <p className="text-xs text-neutral-400 font-sans italic py-6">Your wishlist is currently empty.</p>
                  ) : (
                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-6">
                      {wishlistedProducts.map((p) => (
                        <div key={p.id} className="group border border-[#1A1A1A]/10 bg-white p-3 flex flex-col justify-between hover:shadow shadow-sm">
                          <div className="relative aspect-[4/5] overflow-hidden bg-neutral-100 mb-3">
                            <Link href={`/product/${p.id}`}>
                              <Image src={p.image} alt={p.name} fill className="object-cover" />
                            </Link>
                          </div>
                          <div className="space-y-2 text-center">
                            <span className="text-[8px] font-bold text-neutral-400 uppercase tracking-widest block">{p.category}</span>
                            <Link href={`/product/${p.id}`}>
                              <h3 className="font-serif text-xs font-bold text-black uppercase tracking-wide truncate">{p.name}</h3>
                            </Link>
                            <span className="text-xs font-bold text-neutral-900 block">{formatPrice(p.price)}</span>
                            
                            <div className="pt-2 flex gap-1">
                              <Link
                                href={`/product/${p.id}`}
                                className="flex-1 bg-[#0A0A0A] hover:bg-[#D4AF37] text-white hover:text-black font-semibold text-[8px] tracking-widest py-2 text-center uppercase transition-colors"
                              >
                                View Product
                              </Link>
                              <button
                                onClick={() => toggleWishlist(p.id)}
                                className="border border-red-200 hover:border-red-600 hover:bg-red-50 text-red-600 p-2 text-xs transition-colors"
                              >
                                ✕
                              </button>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {/* TAB 3: Loyalty & VIP points */}
              {activeTab === "loyalty" && (
                <div className="space-y-6">
                  <h2 className="font-serif text-lg font-bold uppercase tracking-widest text-black border-b pb-3">
                    STARBOY CLUB LOYALTY & REWARDS
                  </h2>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {/* Points status */}
                    <div className="border border-[#1A1A1A]/10 p-6 bg-[#0a0a0a] text-white space-y-4">
                      <div>
                        <span className="text-[9px] font-bold text-[#D4AF37] uppercase tracking-widest block">Membership Level</span>
                        <h3 className="font-serif text-2xl font-bold uppercase tracking-wider text-white">{user.tier} TIER MEMBER</h3>
                      </div>

                      <div className="border-t border-neutral-800 pt-4 flex justify-between items-end">
                        <div>
                          <span className="text-[8px] font-bold text-neutral-400 uppercase tracking-wider block">Available Points</span>
                          <span className="text-3xl font-serif font-bold text-white">{user.points}</span>
                        </div>
                        <span className="text-[10px] text-neutral-400 font-sans mb-1">(Equivalent to Rs. {user.points})</span>
                      </div>
                    </div>

                    {/* Referral */}
                    <div className="border border-[#1A1A1A]/10 p-6 bg-[#F8F7F2]/40 space-y-4">
                      <div>
                        <span className="text-[9px] font-bold text-neutral-400 uppercase tracking-widest block">Share & Earn Credits</span>
                        <h4 className="font-serif text-sm font-bold uppercase text-black">REFERRAL PROGRAM</h4>
                        <p className="text-[10px] text-neutral-500 font-sans leading-relaxed mt-1">
                          Share your referral link. When your friends place their first drop order, they get Rs. 500 off, and you receive 500 loyalty credits!
                        </p>
                      </div>

                      <div className="flex gap-2">
                        <input
                          type="text"
                          readOnly
                          value="STARBOY-REF-9201"
                          className="bg-white border border-[#1A1A1A]/10 text-xs px-3 py-2 outline-none font-sans font-bold flex-1 text-center"
                        />
                        <button
                          onClick={handleCopyReferral}
                          className="bg-[#0A0A0A] hover:bg-[#D4AF37] text-white hover:text-black font-semibold text-[10px] tracking-widest px-4 py-2 uppercase transition-all duration-200"
                        >
                          {copiedReferral ? "Copied" : "Copy"}
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {/* TAB 4: Addresses */}
              {activeTab === "addresses" && (
                <div className="space-y-6">
                  <h2 className="font-serif text-lg font-bold uppercase tracking-widest text-black border-b pb-3">
                    SAVED ADDRESS DATABASE
                  </h2>

                  <div className="space-y-4">
                    {savedAddresses.map((addr, idx) => (
                      <div key={idx} className="border border-[#1A1A1A]/10 p-4 bg-[#F8F7F2]/40 flex justify-between items-center text-xs">
                        <div className="flex gap-2.5">
                          <MapPin className="w-4 h-4 text-neutral-400 flex-shrink-0" />
                          <p className="font-sans font-light text-neutral-700 leading-normal">{addr}</p>
                        </div>
                        <button
                          onClick={() => handleRemoveAddress(idx)}
                          className="text-red-600 font-bold hover:underline uppercase text-[9px] tracking-wider ml-4"
                        >
                          Delete
                        </button>
                      </div>
                    ))}
                  </div>

                  {/* Add address form */}
                  <form onSubmit={handleAddAddress} className="border border-[#1A1A1A]/10 p-6 bg-white space-y-4">
                    <h3 className="text-[10px] font-bold uppercase tracking-widest text-[#0a0a0a]">Register New Shipping Location</h3>
                    <div className="flex gap-2">
                      <input
                        type="text"
                        required
                        value={addressInput}
                        onChange={(e) => setAddressInput(e.target.value)}
                        placeholder="e.g. House 45, Street 2, Sector F-8, Islamabad, Pakistan"
                        className="bg-[#F8F7F2] border border-[#1A1A1A]/10 text-xs px-4 py-2.5 outline-none focus:border-[#D4AF37] flex-1"
                      />
                      <button
                        type="submit"
                        className="bg-[#0A0A0A] hover:bg-[#D4AF37] text-white hover:text-black font-semibold text-xs tracking-widest px-6 py-2.5 transition-colors uppercase border border-black hover:border-[#D4AF37]"
                      >
                        Add Address
                      </button>
                    </div>
                  </form>
                </div>
              )}

            </section>
          </div>
        )}

      </main>

      <Footer />
      <FloatingWhatsApp />
      <AIAssistant />
    </div>
  );
}