//
// Copyright (c) 2025-2026 rustmailer.com (https://rustmailer.com)
//
// This file is part of the Bichon Email Archiving Project
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program.  If not, see <http://www.gnu.org/licenses/>.


import { useFormContext } from "react-hook-form";
import { Account } from "./action-dialog";
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
import { useTranslation } from "react-i18next";
import useProxyList from "@/hooks/use-proxy";

export default function Step4() {
    const { t } = useTranslation();
    const { getValues } = useFormContext<Account>();
    const { getUrlById } = useProxyList();
    const summaryData = getValues();


    const sinceText = (() => {
        if (summaryData.date_since?.fixed) {
            return summaryData.date_since.fixed;
        }

        if (summaryData.date_since?.relative?.value) {
            return `${t('accounts.sinceRelativeValue', {
                value: summaryData.date_since!.relative!.value,
                unit: t(`accounts.${summaryData.date_since!.relative!.unit!.toLowerCase()}`)
            })}`;
        }

        return t('accounts.syncAll');
    })();

    const hasSince = !!summaryData.date_since;
    const hasBefore = !!summaryData.date_before?.value;

    return (
        <div className="rounded-xl">
            <Accordion type="multiple" defaultValue={['email', 'account_name', 'login_name', 'imap', 'date_since', 'sync_interval', 'sync_scope', 'sync_batch_size', 'download_schedule']}>
                <AccordionItem key="email" value="email">
                    <AccordionTrigger className="font-medium capitalize text-gray-600">{t('accounts.email')}:</AccordionTrigger>
                    <AccordionContent>{summaryData.email}</AccordionContent>
                </AccordionItem>

                <AccordionItem key="account_name" value="account_name">
                    <AccordionTrigger className="font-medium capitalize text-gray-600">{t('accounts.name')}:</AccordionTrigger>
                    <AccordionContent>{summaryData.account_name ?? t('accounts.notAvailable')}</AccordionContent>
                </AccordionItem>

                <AccordionItem key="login_name" value="login_name">
                    <AccordionTrigger className="font-medium capitalize text-gray-600">{t('accounts.login_name')}:</AccordionTrigger>
                    <AccordionContent>{summaryData.login_name ?? t('accounts.notAvailable')}</AccordionContent>
                </AccordionItem>

                <AccordionItem key="imap" value="imap">
                    <AccordionTrigger className="font-medium capitalize text-gray-600">{t('accounts.imap')}:</AccordionTrigger>
                    <AccordionContent>
                        <div className="overflow-x-auto">
                            <table className="min-w-full divide-y">
                                <tbody className="divide-y">
                                    <tr>
                                        <td className="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-600">{t('accounts.host')}:</td>
                                        <td className="px-6 py-2 whitespace-nowrap text-sm">{summaryData.imap.host}</td>
                                    </tr>
                                    <tr>
                                        <td className="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-600">{t('accounts.port')}:</td>
                                        <td className="px-6 py-2 whitespace-nowrap text-sm">{summaryData.imap.port}</td>
                                    </tr>
                                    <tr>
                                        <td className="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-600">{t('accounts.encryption')}:</td>
                                        <td className="px-6 py-2 whitespace-nowrap text-sm">{summaryData.imap.encryption}</td>
                                    </tr>
                                    <tr>
                                        <td className="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-600">{t('accounts.useDangerous')}:</td>
                                        <td className="px-6 py-2 whitespace-nowrap text-sm">{`${summaryData.use_dangerous}`}</td>
                                    </tr>
                                    <tr>
                                        <td className="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-600">{t('accounts.authType')}:</td>
                                        <td className="px-6 py-2 whitespace-nowrap text-sm">{summaryData.imap.auth.auth_type}</td>
                                    </tr>
                                    {summaryData.imap.auth.auth_type === 'Password' && (
                                        <tr>
                                            <td className="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-600">{t('accounts.password')}:</td>
                                            <td className="px-6 py-2 whitespace-nowrap text-sm break-words">{summaryData.imap.auth.password}</td>
                                        </tr>
                                    )}
                                    <tr>
                                        <td className="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-600">{t('accounts.useProxyField')}:</td>
                                        <td className="px-6 py-2 whitespace-nowrap text-sm">
                                            {(() => {
                                                if (!summaryData.imap.use_proxy) {
                                                    return t('accounts.useNoProxy');
                                                }
                                                const proxyUrl = getUrlById(summaryData.imap.use_proxy);
                                                return proxyUrl || `${t('common.yes')} (${summaryData.imap.use_proxy})`;
                                            })()}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </AccordionContent>
                </AccordionItem>

                <AccordionItem key="sync_scope" value="sync_scope">
                    <AccordionTrigger className="font-medium capitalize text-gray-600">
                        {t('accounts.downloadScope')}:
                    </AccordionTrigger>

                    <AccordionContent className="space-y-3">
                        {hasSince && (
                            <div className="flex flex-col">
                                <span className="text-xs text-muted-foreground">
                                    {t('accounts.sinceFixed')}:
                                </span>
                                <span className="text-sm">{sinceText}</span>
                            </div>
                        )}

                        {hasBefore && (
                            <div className="flex flex-col border-t pt-2">
                                <span className="text-xs text-muted-foreground">
                                    {t('accounts.beforeRelative')}:
                                </span>
                                <span className="text-sm">
                                    {t('accounts.beforeRelativeValue', {
                                        value: summaryData.date_before!.value,
                                        unit: t(`accounts.${summaryData.date_before!.unit!.toLowerCase()}`)
                                    })}
                                </span>
                            </div>
                        )}

                        {!hasSince && !hasBefore && (
                            <span className="text-sm">
                                {t('accounts.downloadAll')}
                            </span>
                        )}
                    </AccordionContent>
                </AccordionItem>


                <AccordionItem key="sync_interval" value="sync_interval">
                    <AccordionTrigger className="font-medium capitalize text-gray-600">{t('accounts.downloadInterval')}:</AccordionTrigger>
                    <AccordionContent>{summaryData.download_interval_min} {t('accounts.minutes')}</AccordionContent>
                </AccordionItem>

                <AccordionItem key="sync_batch_size" value="sync_batch_size">
                    <AccordionTrigger className="font-medium capitalize text-gray-600">{t('accounts.downloadBatchSize')}:</AccordionTrigger>
                    <AccordionContent>{summaryData.download_batch_size}</AccordionContent>
                </AccordionItem>

                <AccordionItem key="download_schedule" value="download_schedule">
                    <AccordionTrigger className="font-medium capitalize text-gray-600">{t('accounts.downloadSchedule')}:</AccordionTrigger>
                    <AccordionContent>{summaryData.download_schedule || t('accounts.notAvailable')}</AccordionContent>
                </AccordionItem>

                <AccordionItem key="auto_download_new_mailboxes" value="auto_download_new_mailboxes">
                    <AccordionTrigger className="font-medium capitalize text-gray-600">{t('accounts.autoDownloadNewMailboxes')}:</AccordionTrigger>
                    <AccordionContent>{summaryData.auto_download_new_mailboxes ? t('common.yes') : t('common.no')}</AccordionContent>
                </AccordionItem>
            </Accordion>
        </div>
    );
}
