"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";

export default function AdminLoginPage() {
  const router = useRouter();
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const navItems = [
    { name: "Home", id: "home" },
    { name: "Streetwear", id: "streetwear" },
    { name: "Casuals", id: "casuals" },
    { name: "Specials", id: "specials" },
    { name: "Collections", id: "collections" },
    { name: "About", id: "about" },
  ];

  const footerColumns = [
    {
      title: "Shop",      items: [
        { label: "Streetwear", href: "#streetwear" },
        { label: "Casuals", href: "#casuals" },
        { label: "Specials", href: "#specials" },
        { label: "Seasonal Drops", href: "#seasonal" },
        { label: "New Arrivals", href: "#new" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/collections" },
        { label: "Our Story", href: "#story" },
        { label: "Careers", href: "#careers" },
        { label: "Press", href: "#press" },
        { label: "Blog", href: "#blog" },
      ],
    },
    {
      title: "Support",      items: [
        { label: "Contact Us", href: "#contact" },
        { label: "FAQ", href: "#faq" },
        { label: "Shipping Info", href: "#shipping" },
        { label: "Returns", href: "#returns" },
        { label: "Track Order", href: "#track" },
      ],
    },
    {
      title: "Legal",      items: [
        { label: "Privacy Policy", href: "#privacy" },
        { label: "Terms of Service", href: "#terms" },
        { label: "Refund Policy", href: "#refund" },
        { label: "Cookie Policy", href: "#cookies" },
        { label: "Accessibility", href: "#accessibility" },
      ],
    },
  ];

  const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setError("");
    setIsLoading(true);

    // Authenticate with hardcoded credentials
    if (id === "death" && password === "helloimdead") {
      // Store auth state in localStorage
      localStorage.setItem("adminAuth", JSON.stringify({ id, isAuthenticated: true }));
      // Redirect to admin dashboard
      router.push("/admin/dashboard");
    } else {
      setError("Invalid credentials. Please try again.");
      setPassword("");
    }

    setIsLoading(false);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav" className="mx-auto px-4 md:px-6">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="DripDrop"
          bottomLeftText="Admin Login"
          bottomRightText="hello@dripdrop.com"
        />
      </div>

      <div className="min-h-screen flex items-center justify-center px-4 md:px-6 py-12">
        <div className="w-full max-w-md">
          <div className="bg-white dark:bg-slate-900 rounded-lg shadow-lg p-8">
            <h1 className="text-3xl font-bold text-center mb-2">Admin Login</h1>
            <p className="text-center text-gray-600 dark:text-gray-400 mb-8">
              Access the admin dashboard
            </p>

            {error && (
              <div className="mb-6 p-4 bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-700 text-red-800 dark:text-red-200 rounded-md text-sm">
                {error}
              </div>
            )}

            <form onSubmit={handleLogin} className="space-y-6">
              <div>
                <label htmlFor="id" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  ID
                </label>
                <input
                  type="text"
                  id="id"
                  value={id}
                  onChange={(e) => setId(e.target.value)}
                  placeholder="Enter your ID"
                  disabled={isLoading}
                  className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent outline-none transition disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-slate-800 text-gray-900 dark:text-white"
                  required
                />
              </div>

              <div>
                <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Password
                </label>
                <input
                  type="password"
                  id="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="Enter your password"
                  disabled={isLoading}
                  className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent outline-none transition disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-slate-800 text-gray-900 dark:text-white"
                  required
                />
              </div>

              <button
                type="submit"
                disabled={isLoading}
                className="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isLoading ? "Logging in..." : "Login"}
              </button>
            </form>

            <div className="mt-6 text-center">
              <Link href="/" className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 text-sm">
                Back to Home
              </Link>
            </div>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer" className="mx-auto px-4 md:px-6 mt-12">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 DripDrop. All rights reserved. Premium fashion, worldwide."
          bottomRightText="Secure checkout powered by Razorpay & Stripe"
          ariaLabel="Site footer with navigation and legal information"
        />
      </div>
    </ThemeProvider>
  );
}
