'use client';
import React, {useEffect, useRef} from "react";
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faCode, faCopyright, faInfo, faLaptopCode, faTag, faX} from "@fortawesome/free-solid-svg-icons";
import {configs} from "@/lib/configs";
import {useTranslations} from "next-intl";

interface AboutEditorsProps {
    onClose: () => void;
}

export default function AboutEditors({onClose}: AboutEditorsProps) {
    const t = useTranslations();
    const modalRef: React.RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
    
    useEffect((): () => void => {
        document.body.style.overflow = 'hidden';
        return (): void => {
            document.body.style.overflow = 'auto';
        };
    }, []);
    
    const appInfo = {
        name: configs.appName,
        version: configs.appVersion,
        copyright: t("aboutEditors.copyright"),
        description: t("aboutEditors.description"),
        developers: [t("aboutEditors.teamMember")],
        technologies: [
            "TypeScript", "NextJS", "NodeJS", "Fastify", "TailwindCSS", "TipTap"
        ]
    };
    
    return (
        <div className="fixed inset-0 flex items-center justify-center bg-overlay z-50 backdrop-blur-sm">
            <div ref={modalRef}
                 className="bg-tertiary/90 backdrop-blur-sm text-text-primary rounded-2xl border border-secondary/50 shadow-2xl md:w-3/4 xl:w-1/4 lg:w-2/4 sm:w-11/12 max-h-[85vh] flex flex-col">
                <div className="flex justify-between items-center bg-primary px-5 py-4 rounded-t-2xl shadow-md">
                    <h2 className="font-['ADLaM_Display'] text-xl text-text-primary">
                        {t("aboutEditors.title")}
                    </h2>
                    <button
                        className="text-text-primary hover:text-text-primary p-2 rounded-xl hover:bg-text-primary/10 transition-all duration-200 hover:scale-110"
                        onClick={onClose}>
                        <FontAwesomeIcon icon={faX} className={'w-5 h-5'}/>
                    </button>
                </div>
                
                <div className="p-5 overflow-y-auto flex-grow custom-scrollbar">
                    <div className="flex flex-col items-center mb-6">
                        <h3 className="text-2xl font-['ADLaM_Display'] text-primary">{appInfo.name}</h3>
                    </div>

                    <div className="space-y-4">
                        <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
                            <div className="flex items-center mb-2">
                                <FontAwesomeIcon icon={faTag} className="text-primary mr-2 w-5 h-5"/>
                                <h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.version")}</h4>
                            </div>
                            <p className="text-muted ml-7">{appInfo.version}</p>
                        </div>
                        
                        <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
                            <div className="flex items-center mb-2">
                                <FontAwesomeIcon icon={faCopyright} className="text-primary mr-2 w-5 h-5"/>
                                <h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.copyrightLabel")}</h4>
                            </div>
                            <p className="text-muted ml-7">{appInfo.copyright}</p>
                        </div>
                        
                        <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
                            <div className="flex items-center mb-2">
                                <FontAwesomeIcon icon={faInfo} className="text-primary mr-2 w-5 h-5"/>
                                <h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.descriptionLabel")}</h4>
                            </div>
                            <p className="text-muted ml-7 leading-relaxed">{appInfo.description}</p>
                        </div>
                        
                        <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
                            <div className="flex items-center mb-2">
                                <FontAwesomeIcon icon={faLaptopCode} className="text-primary mr-2 w-5 h-5"/>
                                <h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.teamLabel")}</h4>
                            </div>
                            <ul className="text-muted ml-7">
                                {appInfo.developers.map((dev: string, index: number) => (
                                    <li key={index}>{dev}</li>
                                ))}
                            </ul>
                        </div>
                        
                        <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
                            <div className="flex items-center mb-2">
                                <FontAwesomeIcon icon={faCode} className="text-primary mr-2 w-5 h-5"/>
                                <h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.techLabel")}</h4>
                            </div>
                            <div className="flex flex-wrap gap-2 ml-7">
                                {appInfo.technologies.map((tech, index) => (
                                    <span
                                        key={index}
                                        className="bg-primary/20 text-primary px-2.5 py-1 rounded-lg text-sm font-medium border border-primary/30"
                                    >
                                        {tech}
                                    </span>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}