"use client";
import { signIn } from "next-auth/react";
import { useState, Suspense } from "react";
import { useSearchParams } from "next/navigation";

function VerificationForm() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const searchParams = useSearchParams();
  const redirect = searchParams.get("redirect") || "/";

  async function handleSubmit(e) {
    e.preventDefault();
    await signIn("credentials", {
      username,
      password,
      callbackUrl: redirect,
    });
  }

  return (
    <main className="flex-grow-1">
      {/* HERO */}
      <section className="py-5 border-bottom border-secondary bg-gradient">
        <div className="container">
          <div className="row align-items-center gy-4">
            {/* Left: Text */}
            <div className="col-lg-6">
              <div className="mb-3">
                <span className="badge bg-info text-dark fw-semibold">
                  Secure Access · Credentials · NextAuth
                </span>
              </div>
              <h1 className="display-5 fw-bold mb-3">
                Verification Required
                <div className="h5 mt-2 text-muted fw-normal">
                  Please log in to continue
                </div>
              </h1>
              <p className="text-light-50 text-muted mb-4">
                This section is protected. Enter your credentials to unlock
                access to restricted pages.
              </p>

              {/* Login Form */}
              <form
                onSubmit={handleSubmit}
                className="card bg-dark border-secondary shadow-sm p-4"
              >
                <div className="mb-3">
                  <label className="form-label text-light">Username</label>
                  <input
                    type="text"
                    className="form-control bg-dark text-light border-secondary"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                    placeholder="Enter username"
                  />
                </div>
                <div className="mb-3">
                  <label className="form-label text-light">Password</label>
                  <input
                    type="password"
                    className="form-control bg-dark text-light border-secondary"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    placeholder="Enter password"
                  />
                </div>
                <button
                  type="submit"
                  className="btn btn-success btn-lg w-100 d-flex align-items-center justify-content-center gap-2"
                >
                  <span>Verify & Continue</span>
                  <span role="img" aria-label="lock">
                    🔐
                  </span>
                </button>
              </form>
            </div>

            {/* Right: Info Card */}
            <div className="col-lg-6">
              <div className="card bg-dark border-info h-100 shadow-sm">
                <div className="card-body d-flex flex-column">
                  <div className="d-flex justify-content-between align-items-center mb-2">
                    <span className="badge bg-info-subtle text-info border border-info">
                      Protected Area
                    </span>
                    <span className="fs-4">🛡️</span>
                  </div>
                  <h5 className="card-title mb-2">Why Verification?</h5>
                  <p className="card-text small text-muted mb-3">
                    Certain pages require authentication to ensure secure access
                    and protect sensitive workflows.
                  </p>
                  <ul className="list-unstyled small mt-auto mb-0">
                    <li className="d-flex justify-content-between">
                      <span>Session Security</span>
                      <span className="fw-semibold text-success">Enabled</span>
                    </li>
                    <li className="d-flex justify-content-between">
                      <span>Role-based Access</span>
                      <span className="fw-semibold text-success">Supported</span>
                    </li>
                    <li className="d-flex justify-content-between">
                      <span>Redirect Flow</span>
                      <span className="fw-semibold text-success">Automatic</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

export default function VerificationPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <VerificationForm />
    </Suspense>
  );
}