"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";

export default function AccountPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Categories", id: "categories" },
    { name: "Featured", id: "featured" },
    { name: "Deals", id: "deals" },
    { name: "About", id: "about" },
    { name: "Contact", id: "contact" },
  ];

  const footerColumns = [
    {
      title: "Shop",
      items: [
        { label: "All Products", href: "/categories" },
        { label: "Electronics", href: "/categories#electronics" },
        { label: "Fashion", href: "/categories#fashion" },
        { label: "Home & Garden", href: "/categories#home" },
        { label: "Food & Groceries", href: "/categories#food" },
      ],
    },
    {
      title: "Customer Service",
      items: [
        { label: "Contact Us", href: "/contact" },
        { label: "Track Order", href: "/account" },
        { label: "Returns & Exchanges", href: "#faq" },
        { label: "Shipping Info", href: "#faq" },
        { label: "FAQ", href: "#faq" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/about" },
        { label: "Blog", href: "/blog" },
        { label: "Careers", href: "/careers" },
        { label: "Partners", href: "/partners" },
        { label: "Press", href: "/press" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Cookie Policy", href: "#" },
        { label: "Accessibility", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Uzum Market"
          bottomLeftText="Global Marketplace Community"
          bottomRightText="support@uzummarket.com"
        />
      </div>

      {/* Account Overview Section */}
      <div id="account-overview" data-section="account-overview" className="mx-auto px-4 md:px-6 py-16 md:py-24">
        <div className="max-w-4xl">
          <h1 className="text-4xl md:text-5xl font-bold mb-4 text-foreground">My Account</h1>
          <p className="text-lg text-foreground/70 mb-12">
            Welcome to your Uzum Market account. Manage your profile, view orders, and track deliveries all in one place.
          </p>
        </div>
      </div>

      {/* Account Sections Grid */}
      <div id="account-sections" data-section="account-sections" className="mx-auto px-4 md:px-6 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl">
          {/* Active Orders */}
          <div className="bg-card rounded-lg p-8 border border-accent/20">
            <h2 className="text-2xl font-bold mb-3 text-foreground">Active Orders</h2>
            <p className="text-foreground/60 mb-6">Track and manage your current orders</p>
            <button className="w-full px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg font-medium hover:opacity-90 transition-opacity">
              View Orders
            </button>
          </div>

          {/* Order History */}
          <div className="bg-card rounded-lg p-8 border border-accent/20">
            <h2 className="text-2xl font-bold mb-3 text-foreground">Order History</h2>
            <p className="text-foreground/60 mb-6">View your past purchases and reorder items</p>
            <button className="w-full px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg font-medium hover:opacity-90 transition-opacity">
              View History
            </button>
          </div>

          {/* Profile Settings */}
          <div className="bg-card rounded-lg p-8 border border-accent/20">
            <h2 className="text-2xl font-bold mb-3 text-foreground">Profile Settings</h2>
            <p className="text-foreground/60 mb-6">Update your personal information and preferences</p>
            <button className="w-full px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg font-medium hover:opacity-90 transition-opacity">
              Edit Profile
            </button>
          </div>

          {/* Wishlist */}
          <div className="bg-card rounded-lg p-8 border border-accent/20">
            <h2 className="text-2xl font-bold mb-3 text-foreground">Wishlist</h2>
            <p className="text-foreground/60 mb-6">View and manage your saved items</p>
            <button className="w-full px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg font-medium hover:opacity-90 transition-opacity">
              My Wishlist
            </button>
          </div>
        </div>
      </div>

      {/* Account Information Section */}
      <div id="account-info" data-section="account-info" className="mx-auto px-4 md:px-6 py-16">
        <div className="max-w-4xl bg-card rounded-lg p-8 border border-accent/20">
          <h2 className="text-3xl font-bold mb-8 text-foreground">Account Information</h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
            <div>
              <h3 className="text-sm font-semibold text-foreground/70 mb-2">Email Address</h3>
              <p className="text-foreground font-medium">customer@uzummarket.com</p>
            </div>
            <div>
              <h3 className="text-sm font-semibold text-foreground/70 mb-2">Phone Number</h3>
              <p className="text-foreground font-medium">+998 (90) 123-45-67</p>
            </div>
            <div>
              <h3 className="text-sm font-semibold text-foreground/70 mb-2">Member Since</h3>
              <p className="text-foreground font-medium">January 15, 2024</p>
            </div>
            <div>
              <h3 className="text-sm font-semibold text-foreground/70 mb-2">Account Status</h3>
              <p className="text-foreground font-medium text-primary-cta">Verified</p>
            </div>
          </div>

          <button className="px-6 py-3 bg-secondary-cta text-secondary-cta-text border border-foreground/20 rounded-lg font-medium hover:bg-accent transition-colors">
            Edit Contact Information
          </button>
        </div>
      </div>

      {/* Quick Links Section */}
      <div id="quick-links" data-section="quick-links" className="mx-auto px-4 md:px-6 py-16">
        <div className="max-w-4xl">
          <h2 className="text-3xl font-bold mb-8 text-foreground">Helpful Links</h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Link href="/categories" className="p-4 bg-card rounded-lg border border-accent/20 hover:border-primary-cta/50 transition-colors">
              <p className="font-semibold text-foreground">Continue Shopping</p>
              <p className="text-sm text-foreground/60">Browse products and find new items</p>
            </Link>
            
            <Link href="#faq" className="p-4 bg-card rounded-lg border border-accent/20 hover:border-primary-cta/50 transition-colors">
              <p className="font-semibold text-foreground">Shipping & Returns</p>
              <p className="text-sm text-foreground/60">Learn about our policies</p>
            </Link>
            
            <Link href="/contact" className="p-4 bg-card rounded-lg border border-accent/20 hover:border-primary-cta/50 transition-colors">
              <p className="font-semibold text-foreground">Contact Support</p>
              <p className="text-sm text-foreground/60">Get help with your account</p>
            </Link>
            
            <button className="p-4 bg-card rounded-lg border border-accent/20 hover:border-primary-cta/50 transition-colors text-left">
              <p className="font-semibold text-foreground">Sign Out</p>
              <p className="text-sm text-foreground/60">Safely log out of your account</p>
            </button>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Uzum Market"
          columns={footerColumns}
          copyrightText="© 2025 Uzum Market. All rights reserved. | Made with ❤️ for Central Asia"
        />
      </div>
    </ThemeProvider>
  );
}