import React from 'react';
import { Head, usePage } from '@inertiajs/react';
import SettingsLayout from '@/Layouts/SettingsLayout';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
import UpdatePasswordForm from '@/Pages/Profile/Partials/UpdatePasswordForm';
import DeleteUserForm from '@/Pages/Profile/Partials/DeleteUserForm';
import TwoFactorAuthenticationForm from './Partials/TwoFactorAuthenticationForm'; // <-- NEW IMPORT
import { User, Shield } from "lucide-react";
import { useTranslation } from '@/hooks/useTranslation';

export default function Security() {
    const { t } = useTranslation();
    const { auth } = usePage().props;
    
    // Check if the current user is an admin
    const isAdmin = auth?.user?.role === 'admin';

    const userSettingsNav = [
        { name: t('Profile Info'), icon: User, routeName: 'settings.profile' },
        { name: t('Security & Password'), icon: Shield, routeName: 'settings.security' },
    ];

    return (
        <SettingsLayout 
            title={t('Security Settings')}
            description={t('Manage your password and account security.')}
            navigation={userSettingsNav}
            backRoute="dashboard"
        >
            <Head title={t('Security Settings')} />
            
            {/* Update Password Section */}
            <Card className="shadow-sm border-border/50 mb-6">
                <CardHeader>
                    <CardTitle>{t('Change Password')}</CardTitle>
                    <CardDescription>
                        {t('Ensure your account is using a long, random password to stay secure.')}
                    </CardDescription>
                </CardHeader>
                <CardContent>
                    <UpdatePasswordForm className="max-w-xl" />
                </CardContent>
            </Card>

            {/* --- NEW: Two-Factor Authentication Section --- */}
            <Card className="shadow-sm border-border/50 mb-6">
                <CardContent className="pt-6">
                    <TwoFactorAuthenticationForm />
                </CardContent>
            </Card>

            {/* Danger Zone Section */}
            <Card className={`shadow-sm ${isAdmin ? 'border-amber-500/20 bg-amber-500/5' : 'border-destructive/20 bg-destructive/5'}`}>
                <CardHeader>
                    <CardTitle className={isAdmin ? 'text-amber-700 dark:text-amber-500' : 'text-destructive'}>
                        {t('Danger Zone')}
                    </CardTitle>
                    <CardDescription>
                        {t('Permanently delete your account and all associated data.')}
                    </CardDescription>
                </CardHeader>
                <CardContent>
                    <DeleteUserForm className="max-w-xl" isAdmin={isAdmin} />
                </CardContent>
            </Card>

        </SettingsLayout>
    );
}