'use client';

import React, { useState, useEffect } from "react";
import { User, Lock, Star, Loader2 } from "lucide-react";
import SellerAccountCard from "@/components/shared/SellerAccountCard";
import { useRouter } from "next/navigation";
import { useAppDispatch, useAppSelector } from "@/state/hooks";
import { loginUser, openModal } from "@/state/auth";
import routes from "@/app/routes";
import { toast } from "react-hot-toast";

export default function ListingConsoleHero() {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const { user, status } = useAppSelector((state) => state.auth);

  const [mounted, setMounted] = useState(false);
  const [identifier, setIdentifier] = useState("");
  const [password, setPassword] = useState("");
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  useEffect(() => {
    setMounted(true);
  }, []);

  const isLoading = status === "loading";
  const isAuthenticated = mounted && !!user;

  const handleLoginSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMessage(null);

    const cleanIdentifier = identifier.trim();
    if (!cleanIdentifier) {
      setErrorMessage("Please enter your email or username.");
      return;
    }
    if (!password) {
      setErrorMessage("Please enter your password.");
      return;
    }

    try {
      const res = await dispatch(
        loginUser({
          identifier: cleanIdentifier,
          password,
          rememberMe: true,
        })
      );

      if (loginUser.fulfilled.match(res)) {
        toast.success("Logged in successfully!");
        setIdentifier("");
        setPassword("");
        router.push(routes.myListings);
      } else if (loginUser.rejected.match(res)) {
        const msg = (res.payload as { message?: string } | undefined)?.message || "Login failed. Please check your credentials.";
        setErrorMessage(msg);
        toast.error(msg);
      }
    } catch {
      setErrorMessage("An unexpected error occurred. Please try again.");
    }
  };

  return (
    <section className="w-full bg-slate-50 px-6 py-20 sm:px-10">
      <div className="mx-auto max-w-3xl text-center">
        <p
          className="font-helvetica mx-auto font-medium uppercase tracking-normal"
          style={{ fontSize: '14px', lineHeight: '100%', color: '#3A4756', maxWidth: '820px' }}
        >
          Zero friction listing console
        </p>
        <h1
          className="font-helvetica mx-auto mt-2 font-normal tracking-normal"
          style={{ fontSize: '40px', lineHeight: '110%', color: '#0B0F19', maxWidth: '820px' }}
        >
          List your assets on your terms
        </h1>
        <p
          className="font-helvetica mx-auto mt-4 font-normal tracking-normal"
          style={{ fontSize: '16px', lineHeight: '24px', color: '#3A4756', maxWidth: '820px' }}
        >
          No credit card needed to begin. Integrate your machinery listings
          directly, set your minimum bidding price, and let verified buyers
          bid transparently.
        </p>

        {isAuthenticated && user ? (
          <SellerAccountCard user={user} />
        ) : (
          /* Guest Seller Login Form */
          <form onSubmit={handleLoginSubmit} className="mt-8">
            {errorMessage && (
              <div className="mx-auto mb-4 max-w-[880px] p-3 rounded-lg bg-red-50 border border-red-200 text-xs text-red-600 font-medium text-center">
                {errorMessage}
              </div>
            )}

            <div className="mx-auto flex h-auto w-full max-w-[880px] flex-col items-stretch gap-2 rounded-2xl sm:rounded-full bg-white p-2 shadow-sm sm:h-[96px] sm:flex-row sm:items-center border border-slate-100">
              <div className="flex flex-1 items-center gap-3 rounded-full px-4 py-3 sm:py-4">
                <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-100">
                  <User className="h-4 w-4 text-slate-500" />
                </span>
                <div className="flex flex-1 flex-col text-left">
                  <label
                    htmlFor="email"
                    className="font-helvetica font-normal uppercase leading-none"
                    style={{ fontSize: '12px', letterSpacing: '0.5px', color: '#3A4756' }}
                  >
                    Email address
                  </label>
                  <input
                    id="email"
                    type="text"
                    value={identifier}
                    onChange={(e) => {
                      setIdentifier(e.target.value);
                      if (errorMessage) setErrorMessage(null);
                    }}
                    placeholder="Username or Email"
                    className="bg-transparent text-sm text-slate-900 placeholder:text-slate-300 focus:outline-none mt-1"
                  />
                </div>
              </div>

              <div className="hidden h-10 w-px bg-slate-200 sm:block" />

              <div className="flex flex-1 items-center gap-3 rounded-full px-4 py-3 sm:py-4">
                <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-100">
                  <Lock className="h-4 w-4 text-slate-500" />
                </span>
                <div className="flex flex-1 flex-col text-left">
                  <label
                    htmlFor="password"
                    className="font-helvetica font-normal uppercase leading-none"
                    style={{ fontSize: '12px', letterSpacing: '0.5px', color: '#3A4756' }}
                  >
                    Key password
                  </label>
                  <input
                    id="password"
                    type="password"
                    value={password}
                    onChange={(e) => {
                      setPassword(e.target.value);
                      if (errorMessage) setErrorMessage(null);
                    }}
                    placeholder="Password"
                    className="bg-transparent text-sm text-slate-900 placeholder:text-slate-300 focus:outline-none mt-1"
                  />
                </div>
              </div>

              <button
                type="submit"
                disabled={isLoading}
                className="flex shrink-0 items-center justify-center self-stretch rounded-full bg-blue-600 px-8 py-3 sm:py-0 text-sm font-medium text-white transition hover:bg-blue-700 disabled:opacity-70 disabled:cursor-not-allowed cursor-pointer gap-2"
              >
                {isLoading ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin text-white" />
                    <span>Logging In...</span>
                  </>
                ) : (
                  "Log in to Seller"
                )}
              </button>
            </div>

            <p className="mt-4 text-xs text-slate-600">
              <button
                type="button"
                onClick={() => dispatch(openModal("forgot"))}
                className="font-medium text-blue-600 hover:underline cursor-pointer underline"
              >
                Forgot Credentials?
              </button>
              <span className="mx-3 text-slate-300">&bull;</span>
              Need a seller account?{" "}
              <button
                type="button"
                onClick={() => dispatch(openModal("signup"))}
                className="font-semibold text-blue-600 hover:underline cursor-pointer underline"
              >
                Register Free
              </button>
            </p>
          </form>
        )}

        <div className="mt-6 flex items-center justify-center gap-2">
          <div className="flex items-center gap-0.5">
            {Array.from({ length: 5 }).map((_, i) => (
              <Star
                key={i}
                className="h-4 w-4 fill-amber-400 text-amber-400"
              />
            ))}
          </div>
          <p className="text-xs text-slate-600">
            Proudly supporting over 12,000+ active enterprise equipment
            brokers globally
          </p>
        </div>
      </div>
    </section>
  );
}