import InputError from '@/Components/InputError';
import { Button } from '@/Components/ui/button';
import { Head, Link, useForm } from '@inertiajs/react';
import { Eye, EyeOff, Loader2, Lock, Mail } from 'lucide-react';
import { FormEventHandler, useState } from 'react';

const NAVY = '#1b3a6b';
const TEAL = '#05a7a0';

const features = [
    {
        icon: 'icon-dispositivi-indossabili.webp',
        lines: ['Dispositivi', 'indossabili'],
    },
    { icon: 'icon-promemoria-terapia.webp', lines: ['Promemoria', 'terapia'] },
    {
        icon: 'icon-monitoraggio.webp',
        lines: ['Monitoraggio H24', 'dei parametri vitali'],
    },
    { icon: 'icon-teleassistenza.webp', lines: ['Teleassistenza', 'H24'] },
    { icon: 'icon-supporto-cognitivo.webp', lines: ['Supporto', 'cognitivo'] },
    {
        icon: 'icon-psicologo-online.webp',
        lines: ['Il tuo psicologo', 'online'],
    },
];

function Feature({ icon, lines }: { icon: string; lines: string[] }) {
    return (
        <div className="flex items-center gap-3">
            <img
                src={`/img/login/${icon}`}
                alt=""
                className="h-14 w-14 shrink-0 object-contain xl:h-16 xl:w-16"
            />
            <p
                className="text-sm font-semibold leading-tight xl:text-base"
                style={{ color: NAVY }}
            >
                {lines[0]}
                <br />
                {lines[1]}
            </p>
        </div>
    );
}

export default function Login({
    status,
    canResetPassword,
}: {
    status?: string;
    canResetPassword: boolean;
}) {
    const { data, setData, post, processing, errors, reset } = useForm({
        email: '',
        password: '',
        remember: false,
    });

    const [showPassword, setShowPassword] = useState(false);

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route('login'), {
            onFinish: () => reset('password'),
        });
    };

    return (
        <>
            <Head title="Accedi" />

            <div className="flex min-h-screen flex-col bg-[linear-gradient(180deg,#eef5fc_0%,#e4eefa_55%,#dae9f6_100%)]">
                <main className="min-h-0 flex-1">
                    <div className="mx-auto grid h-full w-full max-w-[1600px] grid-cols-1 content-center items-center gap-6 px-6 py-4 lg:grid-cols-[1fr_minmax(360px,420px)_1fr] lg:gap-8 lg:px-10">
                        {/* ----------------------------- LEFT: branding ----------------------------- */}
                        <section className="hidden flex-col lg:flex">
                            <img
                                src="/img/login/logo-plus-salus.png"
                                alt="PlusSalus24"
                                className="mb-5 h-20 w-auto self-start xl:h-24"
                            />

                            <h1
                                className="text-4xl font-extrabold leading-tight xl:text-5xl"
                                style={{ color: NAVY }}
                            >
                                Accedi alla tua
                                <br />
                                salute digitale.
                            </h1>

                            <p className="text-slate-600 mt-4 max-w-md text-sm leading-relaxed xl:text-base">
                                Plusalus24 ti accompagna ogni giorno con
                                dispositivi indossabili, monitoraggio remoto dei
                                parametri vitali, supporto cognitivo, promemoria
                                terapia, teleassistenza e il tuo psicologo
                                online, sempre al tuo fianco.
                            </p>

                            <div className="mt-6 grid max-w-md grid-cols-2 gap-x-8 gap-y-5">
                                {features.map((f) => (
                                    <Feature
                                        key={f.icon}
                                        icon={f.icon}
                                        lines={f.lines}
                                    />
                                ))}
                            </div>

                            <div className="mt-6 flex max-w-md items-start gap-4 rounded-2xl bg-white/60 p-4 shadow-sm ring-1 ring-white/80">
                                <svg
                                    viewBox="0 0 48 48"
                                    className="h-10 w-10 shrink-0"
                                    aria-hidden="true"
                                >
                                    <path
                                        d="M24 3 6 10v12c0 11 7.5 18.5 18 23 10.5-4.5 18-12 18-23V10L24 3Z"
                                        fill={NAVY}
                                    />
                                    <rect
                                        x="17"
                                        y="22.5"
                                        width="14"
                                        height="11"
                                        rx="2"
                                        fill="#fff"
                                    />
                                    <path
                                        d="M19.5 22.5v-3a4.5 4.5 0 0 1 9 0v3"
                                        fill="none"
                                        stroke="#fff"
                                        strokeWidth="2.5"
                                    />
                                    <circle
                                        cx="24"
                                        cy="27.5"
                                        r="1.6"
                                        fill={NAVY}
                                    />
                                    <rect
                                        x="23.2"
                                        y="27.5"
                                        width="1.6"
                                        height="3.6"
                                        rx="0.8"
                                        fill={NAVY}
                                    />
                                </svg>
                                <div>
                                    <p
                                        className="text-sm font-bold"
                                        style={{ color: NAVY }}
                                    >
                                        Accesso sicuro e protetto
                                    </p>
                                    <p className="text-slate-500 mt-0.5 text-xs leading-relaxed">
                                        I tuoi dati sono custoditi con i più
                                        alti standard di sicurezza e
                                        certificazione.
                                    </p>
                                </div>
                            </div>
                        </section>

                        {/* ----------------------------- CENTER: login card ----------------------------- */}
                        <section className="mx-auto w-full max-w-[420px]">
                            <div className="rounded-3xl bg-white p-6 shadow-[0_20px_60px_-20px_rgba(27,58,107,0.25)] sm:p-8">
                                <div className="flex justify-center">
                                    <img
                                        src="/img/login/logo-plus-salus.png"
                                        alt="PlusSalus24"
                                        className="h-16 w-auto sm:h-20"
                                    />
                                </div>

                                <h2
                                    className="mt-4 text-center text-2xl font-bold"
                                    style={{ color: NAVY }}
                                >
                                    Bentornato
                                </h2>
                                <p className="text-slate-500 mx-auto mt-2 max-w-xs text-center text-sm leading-relaxed">
                                    Accedi al tuo account per continuare a
                                    prenderti cura della tua salute.
                                </p>

                                {status && (
                                    <div className="mt-4 text-center text-sm font-medium text-green-600">
                                        {status}
                                    </div>
                                )}

                                <form
                                    onSubmit={submit}
                                    className="mt-6 space-y-4"
                                >
                                    <div>
                                        <label
                                            htmlFor="email"
                                            className="mb-1.5 block text-sm font-semibold"
                                            style={{ color: NAVY }}
                                        >
                                            Email
                                        </label>
                                        <div className="relative">
                                            <Mail className="text-slate-400 pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" />
                                            <input
                                                id="email"
                                                name="email"
                                                type="email"
                                                autoComplete="username"
                                                autoFocus
                                                value={data.email}
                                                onChange={(e) =>
                                                    setData(
                                                        'email',
                                                        e.target.value,
                                                    )
                                                }
                                                placeholder="Inserisci la tua email"
                                                className="border-slate-200 text-slate-800 placeholder:text-slate-400 h-12 w-full rounded-xl border bg-white pl-11 pr-4 text-sm focus:border-[#05a7a0] focus:outline-none focus:ring-2 focus:ring-[#05a7a0]/30"
                                            />
                                        </div>
                                        <InputError
                                            message={errors.email}
                                            className="mt-1.5"
                                        />
                                    </div>

                                    <div>
                                        <label
                                            htmlFor="password"
                                            className="mb-1.5 block text-sm font-semibold"
                                            style={{ color: NAVY }}
                                        >
                                            Password
                                        </label>
                                        <div className="relative">
                                            <Lock className="text-slate-400 pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" />
                                            <input
                                                id="password"
                                                name="password"
                                                type={
                                                    showPassword
                                                        ? 'text'
                                                        : 'password'
                                                }
                                                autoComplete="current-password"
                                                value={data.password}
                                                onChange={(e) =>
                                                    setData(
                                                        'password',
                                                        e.target.value,
                                                    )
                                                }
                                                placeholder="Inserisci la tua password"
                                                className="border-slate-200 text-slate-800 placeholder:text-slate-400 h-12 w-full rounded-xl border bg-white pl-11 pr-11 text-sm focus:border-[#05a7a0] focus:outline-none focus:ring-2 focus:ring-[#05a7a0]/30"
                                            />
                                            <button
                                                type="button"
                                                onClick={() =>
                                                    setShowPassword((v) => !v)
                                                }
                                                aria-label={
                                                    showPassword
                                                        ? 'Nascondi password'
                                                        : 'Mostra password'
                                                }
                                                className="text-slate-400 hover:text-slate-600 absolute right-3.5 top-1/2 -translate-y-1/2"
                                            >
                                                {showPassword ? (
                                                    <EyeOff className="size-5" />
                                                ) : (
                                                    <Eye className="size-5" />
                                                )}
                                            </button>
                                        </div>
                                        <InputError
                                            message={errors.password}
                                            className="mt-1.5"
                                        />
                                    </div>

                                    {canResetPassword && (
                                        <div className="flex justify-end">
                                            <Link
                                                href={route('password.request')}
                                                className="text-sm font-semibold hover:underline"
                                                style={{ color: TEAL }}
                                            >
                                                Password dimenticata?
                                            </Link>
                                        </div>
                                    )}

                                    <Button
                                        type="submit"
                                        disabled={processing}
                                        className="h-12 w-full rounded-xl text-base font-semibold"
                                    >
                                        {processing && (
                                            <Loader2 className="animate-spin" />
                                        )}
                                        Accedi
                                    </Button>
                                </form>

                                <div className="mt-5 flex items-center gap-3">
                                    <span className="bg-slate-200 h-px flex-1" />
                                    <span className="bg-slate-100 flex size-7 items-center justify-center rounded-full">
                                        <Lock className="text-slate-400 size-3.5" />
                                    </span>
                                    <span className="bg-slate-200 h-px flex-1" />
                                </div>
                                <p className="text-slate-500 mt-3 text-center text-sm">
                                    Accesso sicuro e protetto
                                </p>
                            </div>
                        </section>

                        {/* ----------------------------- RIGHT: hero ----------------------------- */}
                        <section className="hidden flex-col items-center justify-center lg:flex">
                            <img
                                src="/img/login/hero-composition.webp"
                                alt="App PlusSalus24 su smartphone e smartwatch"
                                className="w-full max-w-[460px] object-contain drop-shadow-xl"
                                loading="eager"
                            />
                            <div className="-mt-12 flex flex-col items-center gap-1.5">
                                <span className="text-slate-400 text-xs font-semibold uppercase tracking-wide">
                                    Azienda partner
                                </span>
                                <img
                                    src="/img/login/logo-gima.jpg"
                                    alt="GIMA"
                                    className="h-14 w-auto object-contain"
                                />
                            </div>
                        </section>
                    </div>
                </main>

                {/* ----------------------------- FOOTER: legal + partnership ----------------------------- */}
                <footer className="border-slate-200/70 shrink-0 border-t bg-white/70 backdrop-blur">
                    <div className="mx-auto flex max-w-[1600px] flex-col items-center gap-2 px-6 py-2.5 text-center sm:flex-row sm:justify-between sm:text-left">
                        <div className="flex items-center gap-2">
                            <img
                                src="/img/footer-logo.png"
                                alt=""
                                className="h-6 w-6 shrink-0 object-contain"
                            />
                            <p className="text-slate-500 text-[11px] leading-snug sm:text-xs">
                                PluSalus24® | Dispositivo Medico Software
                                Classe I – MDR 2017/745 | Fabbricante: C-PLUS
                                S.r.l. | UDI-DI Base: 8052855100000
                            </p>
                        </div>
                        <div className="flex items-center gap-2">
                            <span className="text-slate-400 text-[11px]">
                                Azienda partner
                            </span>
                            <img
                                src="/img/login/logo-gima.jpg"
                                alt="GIMA"
                                className="h-7 w-auto object-contain"
                            />
                        </div>
                    </div>
                </footer>
            </div>
        </>
    );
}
