"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { UserPlus } from 'lucide-react';
import { useState } from 'react';

export default function SignupPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [fullName, setFullName] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSignup = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    
    if (password !== confirmPassword) {
      setError('Passwords do not match');
      return;
    }

    setLoading(true);
    // Add signup logic here
    setTimeout(() => setLoading(false), 1000);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="noise"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Learn", id: "features" },
            { name: "Courses", id: "learning" },
            { name: "Community", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Login", id: "/login" },
          ]}
          button={{
            text: "Start Learning",            href: "/"
          }}
          brandName="FinHub"
        />
      </div>

      <div className="min-h-screen flex items-center justify-center px-4 py-20">
        <div className="w-full max-w-md">
          <div className="bg-card rounded-lg shadow-lg p-8">
            <div className="flex items-center justify-center mb-6">
              <UserPlus className="text-primary-cta mr-2" size={32} />
              <h1 className="text-3xl font-bold text-foreground">Get Started</h1>
            </div>
            
            {error && (
              <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
                {error}
              </div>
            )}

            <form onSubmit={handleSignup} className="space-y-4">
              <div>
                <label htmlFor="fullName" className="block text-sm font-medium text-foreground mb-2">
                  Full Name
                </label>
                <input
                  type="text"
                  id="fullName"
                  value={fullName}
                  onChange={(e) => setFullName(e.target.value)}
                  className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-cta"
                  placeholder="John Doe"
                  required
                />
              </div>

              <div>
                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
                  Email Address
                </label>
                <input
                  type="email"
                  id="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-cta"
                  placeholder="your@email.com"
                  required
                />
              </div>

              <div>
                <label htmlFor="password" className="block text-sm font-medium text-foreground mb-2">
                  Password
                </label>
                <input
                  type="password"
                  id="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-cta"
                  placeholder="••••••••"
                  required
                />
              </div>

              <div>
                <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground mb-2">
                  Confirm Password
                </label>
                <input
                  type="password"
                  id="confirmPassword"
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-cta"
                  placeholder="••••••••"
                  required
                />
              </div>

              <button
                type="submit"
                disabled={loading}
                className="w-full bg-primary-cta text-primary-cta-text py-2 rounded-lg font-semibold hover:opacity-90 transition-opacity disabled:opacity-50"
              >
                {loading ? 'Creating Account...' : 'Create Account'}
              </button>
            </form>

            <div className="mt-6 text-center">
              <p className="text-foreground text-sm">
                Already have an account?{' '}
                <a href="/login" className="text-primary-cta hover:underline font-semibold">
                  Log in here
                </a>
              </p>
            </div>

            <div className="mt-4 text-center text-xs text-foreground opacity-75">
              <p>By signing up, you agree to our Terms and Privacy Policy</p>
            </div>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/abstract-gradient-background-with-soft-f-1772485585424-a9e26a7b.png"
          imageAlt="FinHub gradient background"
          logoText="FinHub"
          copyrightText="© 2025 FinHub | Making Finance Fun for Everyone"
          columns={[
            {
              title: "Learning",              items: [
                { label: "Courses", href: "learning" },
                { label: "Lessons", href: "features" },
                { label: "Challenges", href: "#" },
                { label: "Resources", href: "#" },
              ],
            },
            {
              title: "Community",              items: [
                { label: "Forum", href: "#" },
                { label: "Discord", href: "#" },
                { label: "Leaderboard", href: "#" },
                { label: "Events", href: "#" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Contact", href: "contact" },
                { label: "Privacy Policy", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
