"use client";

import { useState } from 'react';
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';

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    // Basic validation
    if (!email || !password) {
      setError('Email and password are required.');
      return;
    }
    // Simulate authentication
    console.log('Login attempt:', { email, password });
    alert('Login functionality not fully implemented. Check console for details.');
    // In a real app: call API, handle sessions, redirect
  };

  const navItems = [
    { name: "Home", id: "/" },
    { name: "Giveaways", id: "/#giveaways" },
    { name: "VIP Plan", id: "/#vip-plans" },
    { name: "Tournaments", id: "/#tournaments" },
    { name: "Winners", id: "/#winners" },
    { name: "FAQs", id: "/#faq" },
    { name: "Contact", id: "/#contact" },
    { name: "Login", id: "/login" },
    { name: "Sign Up", id: "/signup" }
  ];

  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="mediumLarge"
        background="none"
        cardStyle="soft-shadow"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={navItems}
            logoSrc="http://img.b2bpic.net/free-photo/shopping-cart-with-bubbles-geometric-shapes-3d-style_23-2152026895.jpg"
            logoAlt="The Drop Chronicle logo"
            brandName="The Drop Chronicle"
            button={{
              text: "Sign Up",              href: "/signup"
            }}
          />
        </div>

        <div className="relative isolate min-h-[calc(100vh-250px)] flex flex-col items-center justify-center p-4">
          <div className="mx-auto w-full max-w-md space-y-8 bg-card p-8 rounded-lg shadow-lg">
            <h1 className="text-4xl font-light text-center text-foreground">Login</h1>
            <p className="mt-2 text-center text-accent">
              Welcome back! Please enter your details to sign in.
            </p>
            <form onSubmit={handleLogin} className="space-y-6">
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-foreground">
                  Email address
                </label>
                <div className="mt-1">
                  <input
                    id="email"
                    name="email"
                    type="email"
                    autoComplete="email"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
                  />
                </div>
              </div>

              <div>
                <label htmlFor="password" className="block text-sm font-medium text-foreground">
                  Password
                </label>
                <div className="mt-1">
                  <input
                    id="password"
                    name="password"
                    type="password"
                    autoComplete="current-password"
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-background-accent text-foreground"
                  />
                </div>
              </div>

              {error && <p className="text-red-500 text-sm">{error}</p>}

              <div>
                <button
                  type="submit"
                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-cta hover:bg-primary-cta/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
                >
                  Sign in
                </button>
              </div>
            </form>
            <p className="mt-6 text-center text-foreground text-sm">
              Don't have an account?{' '}
              <a href="/signup" className="font-medium text-primary-cta hover:underline">
                Sign Up
              </a>
            </p>
          </div>
        </div>

        <div id="footer" data-section="footer">
          <FooterMedia
            imageSrc="http://img.b2bpic.net/free-photo/artistic-background-wallpaper-with-color-halftone-effect_58702-9399.jpg"
            imageAlt="Abstract neon pink and purple background"
            logoText="The Drop Chronicle"
            columns={[
              {
                title: "Community",                items: [
                  { label: "Giveaways", href: "/#giveaways" },
                  { label: "Tournaments", href: "/#tournaments" },
                  { label: "Winners Hall", href: "/#winners" },
                ],
              },
              {
                title: "Membership",                items: [
                  { label: "VIP Plans", href: "/#vip-plans" },
                  { label: "Referral System", href: "#" },
                  { label: "Achievement System", href: "#" },
                ],
              },
              {
                title: "Support",                items: [
                  { label: "FAQs", href: "/#faq" },
                  { label: "Contact Us", href: "/#contact" },
                  { label: "Live Chat", href: "#" },
                ],
              },
              {
                title: "Legal",                items: [
                  { label: "Terms of Service", href: "#" },
                  { label: "Privacy Policy", href: "#" },
                ],
              },
            ]}
            copyrightText="© 2024 The Drop Chronicle. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
