import { X } from 'lucide-react';
import { useState } from 'react';

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

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

    if (!isOpen) return null;

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

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-zinc-950/80 backdrop-blur-sm">
            <div className="relative w-full max-w-2xl bg-zinc-900 rounded-2xl shadow-2xl m-4 overflow-hidden border border-zinc-700">
                {/* Header */}
                <div className="flex items-center justify-between px-6 py-4 border-b border-zinc-800 bg-zinc-900/50">
                    <h2 className="text-xl font-semibold text-white">Export Options</h2>
                    <button
                        onClick={onClose}
                        className="p-1 text-zinc-400 hover:text-white transition-colors rounded-md hover:bg-zinc-800"
                        aria-label="Close"
                    >
                        <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>

                    {/* 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">✓</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">✓</span>
                                        <span className="text-zinc-300">Backgrounds contained precisely</span>
                                    </div>
                                    <div className="flex items-start">
                                        <span className="text-red-500 mr-2">✗</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">✗</span>
                                        <span className="text-zinc-300">Document outline/navigation disabled</span>
                                    </div>
                                </div>
                                <div className="mt-3 text-xs text-zinc-500 italic">
                                    Best for: Portfolios, brochures, print-ready designs
                                </div>
                            </div>
                        </div>
                    </label>

                    {/* Option 2: Semantic */}
                    <label
                        className={`block p-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">✓</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">✓</span>
                                        <span className="text-zinc-300">Document navigation panel works</span>
                                    </div>
                                    <div className="flex items-start">
                                        <span className="text-green-500 mr-2">✓</span>
                                        <span className="text-zinc-300">Screen reader accessible</span>
                                    </div>
                                    <div className="flex items-start">
                                        <span className="text-yellow-500 mr-2">⚠</span>
                                        <span className="text-zinc-300">Minor padding/border alignment issues</span>
                                    </div>
                                </div>
                                <div className="mt-3 text-xs text-zinc-500 italic">
                                    Best for: Academic papers, reports, accessible documents
                                </div>
                            </div>
                        </div>
                    </label>
                </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={onClose}
                        className="px-4 py-2 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-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-500 transition-colors"
                    >
                        Export to Word
                    </button>
                </div>
            </div>
        </div>
    );
}
