"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import { useState } from "react";
import Link from "next/link";

export default function SignupPage() {
  const [formData, setFormData] = useState({
    companyName: "",
    email: "",
    password: "",
    confirmPassword: "",
    agreeTerms: false,
  });
  const [isLoading, setIsLoading] = useState(false);
  const [passwordStrength, setPasswordStrength] = useState<"weak" | "medium" | "strong" | null>(null);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value, type, checked } = e.target;
    setFormData({
      ...formData,
      [name]: type === "checkbox" ? checked : value,
    });

    if (name === "password") {
      if (value.length < 8) setPasswordStrength("weak");
      else if (value.length < 12) setPasswordStrength("medium");
      else setPasswordStrength("strong");
    }
  };

  const handleSignup = (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Features", id: "/features" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" },
          ]}
          brandName="SponsorDesk"
          bottomLeftText="HR & Legal Solutions"
          bottomRightText="support@sponsordesk.com"
        />
      </div>

      <div className="min-h-screen bg-[#fbfaff] flex items-center justify-center px-4 py-12">
        <div className="w-full max-w-md">
          <div className="bg-[#f7f5ff] rounded-3xl p-8 shadow-lg border border-[#d8cef5]">
            <div className="mb-8">
              <h1 className="text-3xl font-bold text-[#0f0022] mb-2">
                Get Started
              </h1>
              <p className="text-[#0f0022]/60">
                Create your SponsorDesk account and streamline employee management
              </p>
            </div>

            <form onSubmit={handleSignup} className="space-y-5">
              <div>
                <label className="block text-sm font-medium text-[#0f0022] mb-2">
                  Company Name
                </label>
                <input
                  type="text"
                  name="companyName"
                  value={formData.companyName}
                  onChange={handleChange}
                  placeholder="Your company name"
                  required
                  className="w-full px-4 py-3 rounded-xl bg-[#fbfaff] border border-[#d8cef5] text-[#0f0022] placeholder-[#0f0022]/40 focus:outline-none focus:ring-2 focus:ring-[#8b5cf6] transition"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-[#0f0022] mb-2">
                  Business Email
                </label>
                <input
                  type="email"
                  name="email"
                  value={formData.email}
                  onChange={handleChange}
                  placeholder="you@company.com"
                  required
                  className="w-full px-4 py-3 rounded-xl bg-[#fbfaff] border border-[#d8cef5] text-[#0f0022] placeholder-[#0f0022]/40 focus:outline-none focus:ring-2 focus:ring-[#8b5cf6] transition"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-[#0f0022] mb-2">
                  Password
                </label>
                <input
                  type="password"
                  name="password"
                  value={formData.password}
                  onChange={handleChange}
                  placeholder="At least 8 characters"
                  required
                  className="w-full px-4 py-3 rounded-xl bg-[#fbfaff] border border-[#d8cef5] text-[#0f0022] placeholder-[#0f0022]/40 focus:outline-none focus:ring-2 focus:ring-[#8b5cf6] transition"
                />
                {passwordStrength && (
                  <div className="mt-2 flex items-center gap-2">
                    <div className="flex-1 h-2 bg-[#d8cef5] rounded-full overflow-hidden">
                      <div
                        className={`h-full transition-all ${
                          passwordStrength === "weak"
                            ? "w-1/3 bg-red-400"
                            : passwordStrength === "medium"
                            ? "w-2/3 bg-yellow-400"
                            : "w-full bg-green-400"
                        }`}
                      />
                    </div>
                    <span className="text-xs font-medium text-[#0f0022]/60">
                      {passwordStrength === "weak"
                        ? "Weak"
                        : passwordStrength === "medium"
                        ? "Medium"
                        : "Strong"}
                    </span>
                  </div>
                )}
              </div>

              <div>
                <label className="block text-sm font-medium text-[#0f0022] mb-2">
                  Confirm Password
                </label>
                <input
                  type="password"
                  name="confirmPassword"
                  value={formData.confirmPassword}
                  onChange={handleChange}
                  placeholder="Confirm your password"
                  required
                  className="w-full px-4 py-3 rounded-xl bg-[#fbfaff] border border-[#d8cef5] text-[#0f0022] placeholder-[#0f0022]/40 focus:outline-none focus:ring-2 focus:ring-[#8b5cf6] transition"
                />
              </div>

              <label className="flex items-start gap-3 cursor-pointer">
                <input
                  type="checkbox"
                  name="agreeTerms"
                  checked={formData.agreeTerms}
                  onChange={handleChange}
                  required
                  className="w-4 h-4 mt-1 rounded accent-[#8b5cf6]"
                />
                <span className="text-sm text-[#0f0022]/70">
                  I agree to the{" "}
                  <a href="#" className="text-[#8b5cf6] hover:underline">
                    Terms of Service
                  </a>{" "}
                  and{" "}
                  <a href="#" className="text-[#8b5cf6] hover:underline">
                    Privacy Policy
                  </a>
                </span>
              </label>

              <button
                type="submit"
                disabled={isLoading || !formData.agreeTerms}
                className="w-full px-6 py-3 bg-[#8b5cf6] text-[#fbfaff] font-medium rounded-xl hover:bg-[#8b5cf6]/90 transition disabled:opacity-50"
              >
                {isLoading ? "Creating account..." : "Create Account"}
              </button>
            </form>

            <div className="mt-6 pt-6 border-t border-[#d8cef5]">
              <p className="text-center text-[#0f0022]/60 text-sm">
                Already have an account?{" "}
                <Link
                  href="/login"
                  className="text-[#8b5cf6] font-medium hover:text-[#8b5cf6]/80 transition"
                >
                  Sign in
                </Link>
              </p>
            </div>
          </div>

          <div className="mt-8 text-center text-xs text-[#0f0022]/50 space-y-2">
            <p>No credit card required • 14-day free trial • Cancel anytime</p>
            <p>
              Questions?{" "}
              <a href="#" className="text-[#8b5cf6] hover:underline">
                Contact our sales team
              </a>
            </p>
          </div>
        </div>
      </div>

      <footer className="bg-[#0f0022] text-[#fbfaff] py-8 mt-16">
        <div className="max-w-6xl mx-auto px-4 md:px-6 text-center text-sm text-[#fbfaff]/60">
          <p>© 2025 SponsorDesk. All rights reserved.</p>
        </div>
      </footer>
    </ThemeProvider>
  );
}