import { useForm } from '@inertiajs/react';
import { Monitor, Smartphone } from 'lucide-react';
import { useState, type FormEvent } from 'react';
import SessionController from '@/actions/App/Http/Controllers/Settings/SessionController';
import Heading from '@/components/heading';
import InputError from '@/components/input-error';
import PasswordInput from '@/components/password-input';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { formatDate } from '@/lib/utils';

export type BrowserSession = {
    id: string;
    ip_address: string | null;
    is_current: boolean;
    last_active: string;
    agent: {
        browser: string;
        platform: string;
    };
};

type Props = {
    sessions: BrowserSession[];
};

function isMobilePlatform(platform: string): boolean {
    return platform === 'iOS' || platform === 'Android';
}

export default function ManageBrowserSessions({ sessions }: Props) {
    const [open, setOpen] = useState(false);
    const form = useForm({ password: '' });
    const hasOtherSessions = sessions.some((session) => !session.is_current);

    function submit(event: FormEvent) {
        event.preventDefault();

        form.delete(SessionController.destroy.url(), {
            preserveScroll: true,
            onSuccess: () => {
                setOpen(false);
                form.reset();
            },
        });
    }

    return (
        <div className="space-y-6">
            <Heading
                variant="small"
                title="Sessions navigateur"
                description="Gérez et déconnectez vos sessions actives sur d’autres navigateurs et appareils"
            />

            {sessions.length === 0 ? (
                <p className="text-muted-foreground text-sm">
                    Aucune session active.
                </p>
            ) : (
                <div className="space-y-4">
                    {sessions.map((session) => {
                        const Icon = isMobilePlatform(session.agent.platform)
                            ? Smartphone
                            : Monitor;

                        return (
                            <div
                                key={session.id}
                                className="flex items-start gap-3"
                            >
                                <div className="bg-muted flex size-10 shrink-0 items-center justify-center rounded-md">
                                    <Icon className="text-muted-foreground size-5" />
                                </div>
                                <div className="min-w-0 space-y-1">
                                    <div className="flex flex-wrap items-center gap-2">
                                        <p className="text-sm font-medium">
                                            {session.agent.browser} —{' '}
                                            {session.agent.platform}
                                        </p>
                                        {session.is_current && (
                                            <Badge variant="secondary">
                                                Cet appareil
                                            </Badge>
                                        )}
                                    </div>
                                    <p className="text-muted-foreground text-xs">
                                        {session.ip_address ?? 'IP inconnue'}
                                        {!session.is_current && (
                                            <>
                                                {' '}
                                                · Dernière activité{' '}
                                                {formatDate(session.last_active)}
                                            </>
                                        )}
                                    </p>
                                </div>
                            </div>
                        );
                    })}
                </div>
            )}

            {hasOtherSessions && (
                <div>
                    <Button
                        variant="outline"
                        onClick={() => setOpen(true)}
                        data-test="logout-other-sessions-button"
                    >
                        Déconnecter les autres sessions
                    </Button>
                </div>
            )}

            <Dialog
                open={open}
                onOpenChange={(nextOpen) => {
                    setOpen(nextOpen);
                    if (!nextOpen) {
                        form.reset();
                        form.clearErrors();
                    }
                }}
            >
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>
                            Déconnecter les autres sessions
                        </DialogTitle>
                        <DialogDescription>
                            Entrez votre mot de passe pour confirmer que vous
                            souhaitez déconnecter vos autres sessions
                            navigateur.
                        </DialogDescription>
                    </DialogHeader>

                    <form onSubmit={submit} className="space-y-4">
                        <div className="grid gap-2">
                            <Label htmlFor="session_password">
                                Mot de passe
                            </Label>
                            <PasswordInput
                                id="session_password"
                                value={form.data.password}
                                onChange={(event) =>
                                    form.setData('password', event.target.value)
                                }
                                autoComplete="current-password"
                                placeholder="Mot de passe"
                            />
                            <InputError message={form.errors.password} />
                        </div>

                        <DialogFooter>
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => setOpen(false)}
                            >
                                Annuler
                            </Button>
                            <Button
                                type="submit"
                                variant="destructive"
                                disabled={form.processing}
                            >
                                Déconnecter les autres sessions
                            </Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>
        </div>
    );
}