import AuthLayout from "@/layouts/auth-layout";
import { Head, useForm } from "@inertiajs/react";
import { FormEventHandler } from "react";
import {
    Button,
    Card,
    Col,
    Container,
    Form,
    Image,
    InputGroup,
    Row,
    Spinner,
} from "react-bootstrap";
import { MdPassword, MdPerson } from "react-icons/md";
import { alertSuccess, alertError } from "@/components/swal";

export default function Login({ status }: { status?: string }) {
    const { data, setData, post, processing, errors, reset } = useForm({
        username: "",
        password: "",
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();

        post(route("login"), {
            onFinish: () => reset("password"),
            onSuccess: () => {
                alertSuccess("Login berhasil");
            },
            onError: () => {
                alertError("Email atau password salah");
            },
        });
    };

    return (
        <AuthLayout>
            <Head title="Log in" />

            <Container>
                <Row className="justify-content-center">
                    <Col md={4}>
                        <Card
                            body
                            className="p-md-4 text-white"
                            style={{
                                backgroundColor: "rgba(20, 31, 56, 0.5)",
                                backdropFilter: "blur(16px)",
                            }}
                        >
                            <div className="mb-4 flex-center">
                                <div
                                    className="bg-white flex-center rounded-circle"
                                    style={{ width: 110, height: 110 }}
                                >
                                    <Image
                                        src="/assets/logo_pemkot.png"
                                        style={{ width: 100, height: 100 }}
                                        className="object-fit-contain"
                                    />
                                </div>
                            </div>

                            <hr />

                            <Form onSubmit={submit}>
                                <Form.Group className="mb-4">
                                    <Form.Label htmlFor="username">
                                        Username
                                    </Form.Label>
                                    <InputGroup hasValidation>
                                        <InputGroup.Text>
                                            <MdPerson />
                                        </InputGroup.Text>
                                        <Form.Control
                                            type="text"
                                            value={data.username}
                                            placeholder="Masukkan username"
                                            onChange={(e) =>
                                                setData(
                                                    "username",
                                                    e.target.value,
                                                )
                                            }
                                            isInvalid={!!errors.username}
                                        />
                                        <Form.Control.Feedback type="invalid">
                                            {errors.username}
                                        </Form.Control.Feedback>
                                    </InputGroup>
                                </Form.Group>

                                <Form.Group className="mb-2">
                                    <div className="d-flex align-items-center">
                                        <Form.Label htmlFor="password">
                                            Password
                                        </Form.Label>
                                    </div>

                                    <InputGroup hasValidation>
                                        <InputGroup.Text>
                                            <MdPassword />
                                        </InputGroup.Text>
                                        <Form.Control
                                            type="password"
                                            value={data.password}
                                            placeholder="Masukkan password"
                                            onChange={(e) =>
                                                setData(
                                                    "password",
                                                    e.target.value,
                                                )
                                            }
                                            isInvalid={!!errors.password}
                                        />
                                        <Form.Control.Feedback type="invalid">
                                            {errors.password}
                                        </Form.Control.Feedback>
                                    </InputGroup>
                                </Form.Group>

                                <div className="d-grid">
                                    <Button
                                        type="submit"
                                        className="mt-4"
                                        tabIndex={4}
                                        disabled={processing}
                                        data-test="login-button"
                                    >
                                        {processing && (
                                            <Spinner
                                                size="sm"
                                                className="me-2 border-2"
                                            />
                                        )}
                                        Log in
                                    </Button>

                                    <div className="text-center text-muted my-2">
                                        <small>or</small>
                                    </div>

                                    <a
                                        href="/auth/login"
                                        className="btn btn-outline-success"
                                        tabIndex={5}
                                    >
                                        Login with SSO
                                    </a>
                                </div>
                            </Form>

                            {status && (
                                <div className="mb-4 text-center text-sm font-medium text-green-600">
                                    {status}
                                </div>
                            )}
                        </Card>
                    </Col>
                </Row>
            </Container>
        </AuthLayout>
    );
}
