import { Breadcrumbs } from "@/app/components/Breadcrumbs/Breadcrumbs";
import { InternalScreen } from "@/app/components/InternalScreen/InternalScreen";
import { SettingsInput } from "@/app/components/SettingsInput/SettingsInput";
import { useAccount } from "@/app/providers/AccountProvider/useAccount";
import { useAccountProvider } from "@/app/providers/AccountProvider/useAccountProvider";
import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
import { Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import { useNavigate } from "react-router-dom";

export function Safety() {
    const publicKey = usePublicKey();
    const [account, deleteAccount] = useAccount();
    const {removeAccountFromLoginDice} = useAccountProvider();

    const navigate = useNavigate();

    const openDeleteModal = () => {
        modals.openConfirmModal({
            title: 'Account delete',
            centered: true,
            children: (
            <Text size="sm">
                You are attempting to delete your account. Are you sure you want to proceed? This will result in a complete loss of data.
            </Text>
            ),
            withCloseButton: false,
            labels: { confirm: 'Continue', cancel: "No, sorry" },
            confirmProps: { color: 'red' },
            onConfirm: accountDelete
        });
    }

    const accountDelete = () => {
        removeAccountFromLoginDice();
        deleteAccount();
        navigate("/");
    }

    return (
        <>
            <Breadcrumbs text="Safety"></Breadcrumbs>
            <InternalScreen>
                <SettingsInput.Copy 
                    mt={'sm'} 
                    hit="Public Key" 
                    value={publicKey} 
                    placeholder="Public"></SettingsInput.Copy>
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    This is your public key. If you haven't set a @username yet, you can ask a friend to message you using your public key.
                </Text>
                <SettingsInput.Default 
                    mt={'sm'} 
                    disabled 
                    hit="Private key" 
                    value={account.privateKey}></SettingsInput.Default>
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    This is your private key. For security reasons, we provide it only in an encrypted form so you can simply admire it. 
                    If anyone asks you for this key, please do not share it.
                </Text>
                <SettingsInput.Clickable mt={'sm'} c={'red'}
                    hit="Backup" 
                    onClick={() => navigate("/main/backup")}
                    >
                    </SettingsInput.Clickable>  
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    Please save your seed phrase, it is necessary for future access to your conversations.
                    Do not share this seed phrase with anyone, otherwise, the person you share it with will gain access to your conversations.
                </Text> 
                <SettingsInput.Clickable mt={'sm'} c={'red'}
                    hit="Delete Account" 
                    onClick={openDeleteModal}
                    rightChevronHide
                    >
                    </SettingsInput.Clickable>  
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    This action cannot be undone, it will result in the complete deletion of account data from your device. 
                    Please note, this will also delete your data on the server, such as your avatar, encrypted messages, and username.
                </Text>                                                      
            </InternalScreen>
        </>
    )
}