"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import ButtonElasticEffect from '@/components/button/ButtonElasticEffect/ButtonElasticEffect';
import { useState } from 'react';

export default function CheckoutPage() {
  const [formData, setFormData] = useState({
    fullName: '',
    email: '',
    address: '',
    city: '',
    zip: '',
    cardName: '',
    cardNumber: '',
    expDate: '',
    cvv: ''
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Checkout form submitted:", formData);
    // In a real app, process payment and redirect to order confirmation
    window.location.href = "/order-confirmation";
  };

  const footerColumns = [
    {
      title: "Quick Links",      items: [
        { label: "Home", href: "/" },
        { label: "About Us", href: "/#about" },
        { label: "Services", href: "/#services" },
        { label: "Team", href: "/#team" },
        { label: "Shopping Cart", href: "/shopping-cart" },
        { label: "Checkout", href: "/checkout" },
        { label: "Order Confirmation", href: "/order-confirmation" }
      ],
    },
    {
      title: "Resources",      items: [
        { label: "FAQ", href: "/#faq" },
        { label: "Contact Us", href: "/#contact" },
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
      ],
    },
    {
      title: "Connect",      items: [
        { label: "info@fcplus.com", href: "mailto:info@fcplus.com" },
        { label: "+1 (555) 123-4567", href: "tel:+15551234567" },
        { label: "456 Gentleman's Way", href: "#" },
        { label: "Fashion District, NY 10018", href: "#" },
      ],
    },
  ];

  const navItems = [
    { name: "Home", id: "/" },
    { name: "About", id: "/#about" },
    { name: "Services", id: "/#services" },
    { name: "Team", id: "/#team" },
    { name: "Testimonials", id: "/#testimonials" },
    { name: "FAQ", id: "/#faq" },
    { name: "Contact", id: "/#contact" },
    { name: "Cart", id: "/shopping-cart" },
    { name: "Checkout", id: "/checkout" },
  ];

  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="compact"
        sizing="largeSmallSizeLargeTitles"
        background="floatingGradient"
        cardStyle="gradient-bordered"
        primaryButtonStyle="flat"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={navItems}
            brandName="FCplus Center"
          />
        </div>

        <main className="min-h-screen py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto">
          <h1 className="text-4xl font-bold text-center mb-12">Checkout</h1>
          <form onSubmit={handleSubmit} className="space-y-8 p-8 border rounded-lg shadow-lg bg-card">
            {/* Shipping Information */}
            <section>
              <h2 className="text-2xl font-semibold mb-4">Shipping Information</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label htmlFor="fullName" className="block text-sm font-medium text-foreground">Full Name</label>
                  <input
                    type="text"
                    id="fullName"
                    name="fullName"
                    value={formData.fullName}
                    onChange={handleChange}
                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
                    required
                  />
                </div>
                <div>
                  <label htmlFor="email" className="block text-sm font-medium text-foreground">Email Address</label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    value={formData.email}
                    onChange={handleChange}
                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
                    required
                  />
                </div>
                <div className="md:col-span-2">
                  <label htmlFor="address" className="block text-sm font-medium text-foreground">Address</label>
                  <input
                    type="text"
                    id="address"
                    name="address"
                    value={formData.address}
                    onChange={handleChange}
                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
                    required
                  />
                </div>
                <div>
                  <label htmlFor="city" className="block text-sm font-medium text-foreground">City</label>
                  <input
                    type="text"
                    id="city"
                    name="city"
                    value={formData.city}
                    onChange={handleChange}
                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
                    required
                  />
                </div>
                <div>
                  <label htmlFor="zip" className="block text-sm font-medium text-foreground">ZIP Code</label>
                  <input
                    type="text"
                    id="zip"
                    name="zip"
                    value={formData.zip}
                    onChange={handleChange}
                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
                    required
                  />
                </div>
              </div>
            </section>

            {/* Payment Information */}
            <section>
              <h2 className="text-2xl font-semibold mb-4">Payment Information</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="md:col-span-2">
                  <label htmlFor="cardName" className="block text-sm font-medium text-foreground">Name on Card</label>
                  <input
                    type="text"
                    id="cardName"
                    name="cardName"
                    value={formData.cardName}
                    onChange={handleChange}
                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
                    required
                  />
                </div>
                <div className="md:col-span-2">
                  <label htmlFor="cardNumber" className="block text-sm font-medium text-foreground">Card Number</label>
                  <input
                    type="text"
                    id="cardNumber"
                    name="cardNumber"
                    value={formData.cardNumber}
                    onChange={handleChange}
                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
                    required
                  />
                </div>
                <div>
                  <label htmlFor="expDate" className="block text-sm font-medium text-foreground">Expiration Date (MM/YY)</label>
                  <input
                    type="text"
                    id="expDate"
                    name="expDate"
                    value={formData.expDate}
                    onChange={handleChange}
                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
                    required
                  />
                </div>
                <div>
                  <label htmlFor="cvv" className="block text-sm font-medium text-foreground">CVV</label>
                  <input
                    type="text"
                    id="cvv"
                    name="cvv"
                    value={formData.cvv}
                    onChange={handleChange}
                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
                    required
                  />
                </div>
              </div>
            </section>

            <ButtonElasticEffect
              text="Pay Now"
              type="submit"
              className="w-full"
            />
          </form>
        </main>

        <div id="footer" data-section="footer">
          <FooterMedia
            imageSrc="http://img.b2bpic.net/free-photo/blue-suit-hangers-dark-background_107420-101413.jpg"
            imageAlt="Blue suits on hangers in a dark setting"
            logoText="FCplus Center"
            columns={footerColumns}
            copyrightText="© 2024 FCplus Center. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
