"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import dynamic from "next/dynamic";
import Swal from "sweetalert2";
import Link from "next/link";

export default function Login() {
    const router = useRouter();

    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");

    const [form, setForm] = useState({
        email: "",
        password: "",
    });

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setForm((prev) => ({
        ...prev,
        [e.target.name]: e.target.value,
        }));
    };

    const handleLogin = async (e: React.FormEvent) => {
        e.preventDefault();
        Swal.fire({
            title: "Login Account...",
            text: "Please wait",
            allowOutsideClick: false,
            didOpen: () => {
            Swal.showLoading();
            },
        });

        try {
            const formData = new FormData();

            formData.append("email", form.email);
            formData.append("password", form.password);

            const res = await fetch("/api/auth/login", {
                method: "POST",
                body: formData,
            });

            const data = await res.json();

            Swal.close();

            if (!data.result) {
                Swal.fire({
                    icon: "error",
                    title: "Failed",
                    text: data.msg || "Something went wrong",
                });
                return;
            }

            // success → redirect ke verify page
            const token = data?.data?.token;
            Swal.fire({
                icon: "success",
                title: "Success!",
                text: data.msg,
                confirmButtonText: "OK",
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = `/`;
                    }
            });
        } catch {
            Swal.fire({
                icon: "error",
                title: "Error",
                text: "Something went wrong",
            });
        } finally {
            setLoading(false);
        }
    };
    return (
        <div className="card h-100">
            <form onSubmit={handleLogin}>
                <div className="card-body">
                    <h3 className="card-title">Login</h3>
                    <p className="card-subtitle">Sign in to access your Super Admin Dashboard.</p>
                    <div className="mb-3">
                        <label className="form-label required">Email</label>
                        <div>
                            <input type="text" name="email" className="form-control" placeholder="Enter email" onChange={handleChange} />
                        </div>
                    </div>
                    <div className="mb-3">
                        <label className="form-label required">Password</label>
                        <div>
                            <input type="password" name="password" className="form-control" placeholder="Enter password" onChange={handleChange} />
                        </div>
                    </div>
                </div>
                <div className="card-footer">
                    <div className="row align-items-center">
                    <div className="col"></div>
                    <div className="col-auto btn-list">
                        <button className="btn btn-success btn-2" disabled={loading}>{loading ? "Login..." : "Login Now"}</button>
                    </div>
                    </div>
                </div>
            </form>
        </div>
    );
}