typogenie/src/components/ExportOptionsModal.tsx

import { X } from 'lucide-react';
import { useState } from 'react';
import { useDialog } from '../hooks/useDialog';

interface ExportOptionsModalProps {
    isOpen: boolean;
    onClose: () => void;
    onExport: (useTableHeaders: boolean) => void;
}

export default function ExportOptionsModal({ isOpen, onClose, onExport }: ExportOptionsModalProps) {
    const { dialogRef, handleBackdropClick, close } = useDialog(isOpen, { onClose });
    const [selectedMode, setSelectedMode] = useState<'table' | 'semantic'>('semantic');

    if (!isOpen) return null;

    const handleExport = () => {
        onExport(selectedMode === 'table');
    };

    return (
        <dialog
            ref={dialogRef}
            onClick={handleBackdropClick}
            aria-labelledby="export-title"
            className="fixed inset-0 z-50 p-4 m-0 w-full h-full border-none bg-black/50 flex items-center justify-center"
        >
            <div
                className="relative w-full max-w-2xl bg-zinc-900 rounded-2xl shadow-2xl overflow-hidden border border-zinc-700"
                onClick={e => e.stopPropagation()}
            >
                {/* Header */}
                <div className="flex items-center justify-between px-6 py-4 border-b border-zinc-800 bg-zinc-900/50">
                    <h2 id="export-title" className="text-xl font-semibold text-white">Export Options</h2>
                    <button
                        onClick={close}
                        className="p-2 min-w-[44px] min-h-[44px] flex items-center justify-center text-zinc-400 hover:text-white transition-colors rounded-md hover:bg-zinc-800"
                        aria-label="Close export options"
                    >
                        <X size={20} />
                    </button>
                </div>

                {/* Content */}
                <div className="px-6 py-4 space-y-4 bg-zinc-900">
                    <p className="text-sm text-zinc-400 mb-6">
                        Choose how headers should be rendered in your Word document:
                    </p>

                    <fieldset>
                        <legend className="sr-only">Header rendering mode</legend>

                        {/* Option 1: High-Fidelity */}
                        <label
                            className={`block p-4 border-2 rounded-lg cursor-pointer transition-all ${selectedMode === 'table'
                                    ? 'border-indigo-500 bg-indigo-500/10'
                                    : 'border-zinc-700 hover:border-zinc-600 bg-zinc-800/50'
                                }`}
                        >
                            <div className="flex items-start">
                                <input
                                    type="radio"
                                    name="exportMode"
                                    value="table"
                                    checked={selectedMode === 'table'}
                                    onChange={() => setSelectedMode('table')}
                                    className="mt-1 mr-3 text-indigo-600 focus:ring-indigo-500 bg-zinc-700 border-zinc-600"
                                />
                                <div className="flex-1">
                                    <div className="font-semibold text-white mb-2">High-Fidelity Layout</div>
                                    <div className="space-y-1 text-sm">
                                        <div className="flex items-start">
                                            <span className="text-green-500 mr-2" aria-hidden="true">&#10003;</span>
                                            <span className="text-zinc-300">Perfect padding and border alignment</span>
                                        </div>
                                        <div className="flex items-start">
                                            <span className="text-green-500 mr-2" aria-hidden="true">&#10003;</span>
                                            <span className="text-zinc-300">Backgrounds contained precisely</span>
                                        </div>
                                        <div className="flex items-start">
                                            <span className="text-red-500 mr-2" aria-hidden="true">&#10007;</span>
                                            <span className="text-zinc-300">No automatic Table of Contents</span>
                                        </div>
                                        <div className="flex items-start">
                                            <span className="text-red-500 mr-2" aria-hidden="true">&#10007;</span>
                                            <span className="text-zinc-300">Document outline/navigation disabled</span>
                                        </div>
                                    </div>
                                    <div className="mt-3 text-xs text-zinc-400 italic">
                                        Best for: Portfolios, brochures, print-ready designs
                                    </div>
                                </div>
                            </div>
                        </label>

                        {/* Option 2: Semantic */}
                        <label
                            className={`block p-4 mt-4 border-2 rounded-lg cursor-pointer transition-all ${selectedMode === 'semantic'
                                    ? 'border-indigo-500 bg-indigo-500/10'
                                    : 'border-zinc-700 hover:border-zinc-600 bg-zinc-800/50'
                                }`}
                        >
                            <div className="flex items-start">
                                <input
                                    type="radio"
                                    name="exportMode"
                                    value="semantic"
                                    checked={selectedMode === 'semantic'}
                                    onChange={() => setSelectedMode('semantic')}
                                    className="mt-1 mr-3 text-indigo-600 focus:ring-indigo-500 bg-zinc-700 border-zinc-600"
                                />
                                <div className="flex-1">
                                    <div className="font-semibold text-white mb-2">Semantic Structure</div>
                                    <div className="space-y-1 text-sm">
                                        <div className="flex items-start">
                                            <span className="text-green-500 mr-2" aria-hidden="true">&#10003;</span>
                                            <span className="text-zinc-300">Auto-generated Table of Contents</span>
                                        </div>
                                        <div className="flex items-start">
                                            <span className="text-green-500 mr-2" aria-hidden="true">&#10003;</span>
                                            <span className="text-zinc-300">Document navigation panel works</span>
                                        </div>
                                        <div className="flex items-start">
                                            <span className="text-green-500 mr-2" aria-hidden="true">&#10003;</span>
                                            <span className="text-zinc-300">Screen reader accessible</span>
                                        </div>
                                        <div className="flex items-start">
                                            <span className="text-yellow-500 mr-2" aria-hidden="true">&#9888;</span>
                                            <span className="text-zinc-300">Minor padding/border alignment issues</span>
                                        </div>
                                    </div>
                                    <div className="mt-3 text-xs text-zinc-400 italic">
                                        Best for: Academic papers, reports, accessible documents
                                    </div>
                                </div>
                            </div>
                        </label>
                    </fieldset>
                </div>

                {/* Footer */}
                <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-zinc-800 bg-zinc-900">
                    <button
                        onClick={close}
                        className="px-5 py-3 text-sm font-medium text-zinc-300 bg-zinc-800 border border-zinc-700 rounded-md hover:bg-zinc-700 transition-colors"
                    >
                        Cancel
                    </button>
                    <button
                        onClick={handleExport}
                        className="px-5 py-3 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-500 transition-colors"
                    >
                        Export to Word
                    </button>
                </div>
            </div>
        </dialog>
    );
}