import React, { useEffect, useState } from 'react';

import { useTranslation } from 'react-i18next';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

import { DOC_LAST_UPDATED } from '@/defines';
import { useResponsive } from '@/hooks/useResponsive';
import { getDirByLang, loadMdByLang } from '@/utils/mdLoader';

const PrivacyPolicy: React.FC = () => {
    const { i18n, t } = useTranslation();
    const { isMobile } = useResponsive();
    const [mdContent, setMdContent] = useState<string>('');
    const [mdLang, setMdLang] = useState<string>('en-US');
    const [dir, setDir] = useState<'ltr' | 'rtl'>('ltr');

    useEffect(() => {
        loadMdByLang('privacyPolicy', i18n.language, {
            replacements: { '[Insert Date]': DOC_LAST_UPDATED }, // 替换 MD 中的 [Insert Date]
        }).then(({ content, usedLang }) => {
            setMdLang(usedLang);
            setMdContent(content);
        });
    }, [i18n.language]);

    useEffect(() => {
        setDir(getDirByLang(mdLang));
    }, [mdLang]);

    return (
        <div className="flex items-start justify-center">
            <div className={`max-w-[1440px] w-full ${isMobile ? 'px-0' : 'px-[30px]'}`}>
                <div
                    className={`bg-[#0F1116] px-5 sm:px-5 lg:px-[100px] py-[30px] flex flex-col ${isMobile ? 'gap-5 mt-0 pb-[30px]' : 'gap-10 my-[50px] rounded-[12px] pb-[100px]'}`}
                >
                    <span
                        className={`w-full text-white font-semibold leading-[1.43] text-start uppercase ${isMobile ? 'text-[22px]' : 'text-[35px]'}`}
                    >
                        {t('pages.privacyPolicy.title')}
                    </span>
                    <div
                        className={`flex flex-col bg-[#1B1D22] text-white rounded-xl shadow-[0px_4px_10px_0px_rgba(0,0,0,0.05)] ${isMobile ? 'p-[14px] gap-2' : 'p-[25px_30px_25px_25px] gap-5'}`}
                        dir={dir}
                        style={{
                            direction: dir,
                            textAlign: dir === 'ltr' ? 'left' : 'right',
                        }}
                    >
                        {mdContent && (
                            <ReactMarkdown remarkPlugins={[remarkGfm]} components={{}}>
                                {mdContent}
                            </ReactMarkdown>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default PrivacyPolicy;