import { parseServerDate } from '@/lib/date';
import { cn } from '@/lib/utils';
import { format } from 'date-fns';
import {
    AlertTriangle,
    Clock,
    KeyRound,
    ShieldAlert,
    ShieldCheck,
    UserCheck,
} from 'lucide-react';
import type { AdminUserDetail } from './types';

export default function SecurityTab({ user }: { user: AdminUserDetail }) {
    return (
        <>
            {/* Email verification */}
            <div
                className={cn(
                    'pf-glass flex items-start gap-4 rounded-xl p-5',
                    !user.email_verified_at && 'border border-amber-500/15',
                )}
            >
                {user.email_verified_at ? (
                    <ShieldCheck className="mt-0.5 h-5 w-5 shrink-0 text-green-500" />
                ) : (
                    <ShieldAlert className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                )}
                <div>
                    <p className="text-foreground text-sm font-semibold">
                        Email verification
                    </p>
                    {user.email_verified_at ? (
                        <p className="text-muted-foreground mt-0.5 text-sm">
                            Verified on{' '}
                            {format(
                                parseServerDate(user.email_verified_at),
                                'dd MMM yyyy',
                            )}
                        </p>
                    ) : (
                        <p className="mt-0.5 text-sm text-amber-600 dark:text-amber-400">
                            Email address has not been verified
                        </p>
                    )}
                </div>
            </div>

            {/* Password reset */}
            <div
                className={cn(
                    'pf-glass flex items-start gap-4 rounded-xl p-5',
                    user.force_password_reset && 'border border-amber-500/15',
                )}
            >
                {user.force_password_reset ? (
                    <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                ) : (
                    <KeyRound className="text-muted-foreground dark:text-muted-foreground/65 mt-0.5 h-5 w-5 shrink-0" />
                )}
                <div>
                    <p className="text-foreground text-sm font-semibold">
                        Password reset
                    </p>
                    <p
                        className={cn(
                            'mt-0.5 text-sm',
                            user.force_password_reset
                                ? 'text-amber-600 dark:text-amber-400'
                                : 'text-muted-foreground',
                        )}
                    >
                        {user.force_password_reset
                            ? 'Required on next login'
                            : 'No reset required'}
                    </p>
                </div>
            </div>

            {/* Last login */}
            <div className="pf-glass flex items-start gap-4 rounded-xl p-5">
                <Clock className="text-muted-foreground dark:text-muted-foreground/65 mt-0.5 h-5 w-5 shrink-0" />
                <div>
                    <p className="text-foreground text-sm font-semibold">
                        Last login
                    </p>
                    <p className="text-muted-foreground mt-0.5 text-sm">
                        {user.last_login_at
                            ? format(
                                  parseServerDate(user.last_login_at),
                                  'dd MMM yyyy, HH:mm',
                              )
                            : 'Never logged in'}
                    </p>
                </div>
            </div>

            {/* Account created */}
            <div className="pf-glass flex items-start gap-4 rounded-xl p-5">
                <UserCheck className="text-muted-foreground dark:text-muted-foreground/65 mt-0.5 h-5 w-5 shrink-0" />
                <div>
                    <p className="text-foreground text-sm font-semibold">
                        Account created
                    </p>
                    <p className="text-muted-foreground mt-0.5 text-sm">
                        {format(
                            parseServerDate(user.created_at),
                            'dd MMM yyyy, HH:mm',
                        )}
                    </p>
                </div>
            </div>
        </>
    );
}