import React, { Fragment } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import { X, ShieldCheck, FileText } from 'lucide-react';
import { USER_AGREEMENT_TEXT, KVKK_TEXT } from '../legal_texts';

interface LegalModalProps {
    isOpen: boolean;
    onClose: () => void;
    type?: 'terms' | 'kvkk' | null;
    title?: string;
    content?: string;
}

export const LegalModal: React.FC<LegalModalProps> = ({ isOpen, onClose, type, title: customTitle, content: customContent }) => {
    const title = customTitle || (type === 'terms' ? 'User Agreement & IP Rights' : type === 'kvkk' ? 'KVKK & Privacy Policy' : 'Information');
    const content = customContent || (type === 'terms' ? USER_AGREEMENT_TEXT : type === 'kvkk' ? KVKK_TEXT : '');
    const icon = type === 'terms' ? <ShieldCheck className="w-6 h-6 text-indigo-600" /> : <FileText className="w-6 h-6 text-indigo-600" />;

    return (
        <Transition appear show={isOpen} as={Fragment}>
            <Dialog as="div" className="relative z-50" onClose={onClose}>
                <Transition.Child
                    as={Fragment}
                    enter="ease-out duration-300"
                    enterFrom="opacity-0"
                    enterTo="opacity-100"
                    leave="ease-in duration-200"
                    leaveFrom="opacity-100"
                    leaveTo="opacity-0"
                >
                    <div className="fixed inset-0 bg-black/40 backdrop-blur-sm" />
                </Transition.Child>

                <div className="fixed inset-0 overflow-y-auto">
                    <div className="flex min-h-full items-center justify-center p-4 text-center">
                        <Transition.Child
                            as={Fragment}
                            enter="ease-out duration-300"
                            enterFrom="opacity-0 scale-95"
                            enterTo="opacity-100 scale-100"
                            leave="ease-in duration-200"
                            leaveFrom="opacity-100 scale-100"
                            leaveTo="opacity-0 scale-95"
                        >
                            <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                                <div className="flex items-center justify-between border-b pb-4 mb-4">
                                    <div className="flex items-center gap-3">
                                        {icon}
                                        <Dialog.Title as="h3" className="text-xl font-bold leading-6 text-gray-900">
                                            {title}
                                        </Dialog.Title>
                                    </div>
                                    <button
                                        onClick={onClose}
                                        className="rounded-full p-1 hover:bg-gray-100 transition-colors"
                                    >
                                        <X className="w-5 h-5 text-gray-500" />
                                    </button>
                                </div>

                                <div className="mt-2 text-sm text-gray-600 max-h-[60vh] overflow-y-auto whitespace-pre-line pr-2 custom-scrollbar">
                                    {content}
                                </div>

                                <div className="mt-6 flex justify-end pt-4 border-t">
                                    <button
                                        type="button"
                                        className="inline-flex justify-center rounded-lg border border-transparent bg-indigo-600 px-6 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 transition-all"
                                        onClick={onClose}
                                    >
                                        I Understand
                                    </button>
                                </div>
                            </Dialog.Panel>
                        </Transition.Child>
                    </div>
                </div>
            </Dialog>
        </Transition>
    );
};