import React, { useEffect, useState } from 'react';
import { X, Copy, Check, BookOpen, FileText, Upload, Tag, Keyboard, Code, Layout } from 'lucide-react';

const CodeBlock = ({ code, label }) => {
    const [copied, setCopied] = useState(false);

    const handleCopy = () => {
        navigator.clipboard.writeText(code);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };

    return (
        <div className="relative group">
            {label && <p className="text-xs font-medium text-slate-500 mb-1.5">{label}</p>}
            <div className="bg-slate-900 rounded-lg p-3.5 font-mono text-sm text-slate-200 overflow-x-auto">
                <code>{code}</code>
                <button
                    onClick={handleCopy}
                    className="absolute top-2.5 right-2.5 p-1.5 rounded-md bg-slate-700/60 text-slate-400 hover:text-white hover:bg-slate-700 transition-colors opacity-0 group-hover:opacity-100"
                    title="Copy"
                >
                    {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
                </button>
            </div>
        </div>
    );
};

const Section = ({ icon: Icon, title, children, defaultOpen = false }) => {
    const [open, setOpen] = useState(defaultOpen);

    return (
        <div className="border border-slate-200 rounded-xl overflow-hidden">
            <button
                onClick={() => setOpen(!open)}
                className="w-full flex items-center gap-3 px-5 py-4 text-left hover:bg-slate-50 transition-colors"
            >
                <div className="bg-indigo-50 p-2 rounded-lg">
                    <Icon className="size-4 text-indigo-600" />
                </div>
                <span className="font-semibold text-slate-800 flex-1">{title}</span>
                <svg className={`size-4 text-slate-400 transition-transform ${open ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
                    <path fillRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clipRule="evenodd" />
                </svg>
            </button>
            {open && (
                <div className="px-5 pb-5 pt-1 space-y-4 border-t border-slate-100">
                    {children}
                </div>
            )}
        </div>
    );
};

const DocsSlideover = ({ isOpen, onClose }) => {

    useEffect(() => {
        const handleEscape = (e) => {
            if (e.key === 'Escape') onClose();
        };
        if (isOpen) {
            window.addEventListener('keydown', handleEscape);
            document.body.style.overflow = 'hidden';
        }
        return () => {
            window.removeEventListener('keydown', handleEscape);
            document.body.style.overflow = '';
        };
    }, [isOpen, onClose]);

    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-[99998]">
            {/* Backdrop */}
            <div
                className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm animate-in fade-in duration-200"
                onClick={onClose}
            />

            {/* Slideover Panel */}
            <div className="absolute inset-y-0 top-8 right-0 w-full max-w-xl bg-white shadow-2xl flex flex-col animate-in slide-in-from-right duration-300">
                {/* Header */}
                <div className="flex items-center justify-between px-6 py-4 border-b border-slate-200 bg-gradient-to-r from-indigo-50/50 to-white">
                    <div className="flex items-center gap-3">
                        <div className="bg-indigo-100 p-2 rounded-xl">
                            <BookOpen className="size-5 text-indigo-600" />
                        </div>
                        <div>
                            <h2 className="text-lg font-bold text-slate-900">Documentation</h2>
                            <p className="text-xs text-slate-500">PDF Rack Plugin Guide</p>
                        </div>
                    </div>
                    <button
                        onClick={onClose}
                        className="p-2 text-slate-400 hover:text-slate-900 hover:bg-slate-100 rounded-full transition-all"
                    >
                        <X className="size-5" />
                    </button>
                </div>

                {/* Content */}
                <div className="flex-1 overflow-y-auto p-6 space-y-4">

                    {/* Getting Started */}
                    <Section icon={Upload} title="Getting Started" defaultOpen={true}>
                        <p className="text-sm text-slate-600 leading-relaxed">
                            PDF Rack lets you manage and display PDF documents on your WordPress site with a beautiful, interactive viewer.
                        </p>
                        <div className="bg-indigo-50 rounded-lg p-4 space-y-2">
                            <p className="text-sm font-semibold text-indigo-900">Quick Start:</p>
                            <ol className="text-sm text-indigo-800 space-y-1.5 list-decimal list-inside">
                                <li>Click <strong>Upload PDF</strong> to add a document to your library</li>
                                <li>Click any PDF card to edit its title, description, and metadata</li>
                                <li>Copy the shortcode and paste it into any post or page</li>
                                <li>The PDF viewer will render automatically on the frontend</li>
                            </ol>
                        </div>
                    </Section>

                    {/* Core Features */}
                    <Section icon={Check} title="Core Features" defaultOpen={true}>
                        <ul className="space-y-3">
                            <li className="flex gap-3">
                                <div className="mt-0.5 bg-green-100 p-1 rounded-full text-green-600 shrink-0 size-5 flex items-center justify-center">
                                    <Check className="size-3" />
                                </div>
                                <div>
                                    <h4 className="text-sm font-medium text-slate-800">Media Library Preview</h4>
                                    <p className="text-xs text-slate-500 mt-0.5">Preview PDF contents directly within the WordPress Media Library details view.</p>
                                </div>
                            </li>
                            <li className="flex gap-3">
                                <div className="mt-0.5 bg-green-100 p-1 rounded-full text-green-600 shrink-0 size-5 flex items-center justify-center">
                                    <Check className="size-3" />
                                </div>
                                <div>
                                    <h4 className="text-sm font-medium text-slate-800">Generate Covers</h4>
                                    <p className="text-xs text-slate-500 mt-0.5">Generates and set cover image for PDFs.</p>
                                </div>
                            </li>
                            <li className="flex gap-3">
                                <div className="mt-0.5 bg-green-100 p-1 rounded-full text-green-600 shrink-0 size-5 flex items-center justify-center">
                                    <Check className="size-3" />
                                </div>
                                <div>
                                    <h4 className="text-sm font-medium text-slate-800">Responsive Viewer</h4>
                                    <p className="text-xs text-slate-500 mt-0.5">Mobile-friendly viewer with zoom, navigation, and fullscreen support.</p>
                                </div>
                            </li>
                        </ul>
                    </Section>

                    {/* Shortcode Usage */}
                    <Section icon={Code} title="Shortcode Usage" defaultOpen={true}>
                        <p className="text-sm text-slate-600 leading-relaxed">
                            Use the <code className="px-1.5 py-0.5 bg-slate-100 rounded text-indigo-600 font-mono text-xs">[pdf-rack]</code> shortcode to embed a PDF viewer anywhere on your site.
                        </p>

                        <div className="space-y-3">
                            <p className="text-xs font-semibold text-slate-700 uppercase tracking-wider">Available Attributes</p>
                            <div className="bg-slate-50 rounded-lg overflow-hidden border border-slate-200">
                                <table className="w-full text-sm">
                                    <thead>
                                        <tr className="border-b border-slate-200 bg-slate-100/50">
                                            <th className="text-left px-3 py-2 font-semibold text-slate-700">Attribute</th>
                                            <th className="text-left px-3 py-2 font-semibold text-slate-700">Default</th>
                                            <th className="text-left px-3 py-2 font-semibold text-slate-700">Description</th>
                                        </tr>
                                    </thead>
                                    <tbody className="text-slate-600">
                                        <tr className="border-b border-slate-100">
                                            <td className="px-3 py-2 font-mono text-xs text-indigo-600">id</td>
                                            <td className="px-3 py-2 text-xs">—</td>
                                            <td className="px-3 py-2 text-xs">WordPress attachment ID of the PDF</td>
                                        </tr>
                                        <tr className="border-b border-slate-100">
                                            <td className="px-3 py-2 font-mono text-xs text-indigo-600">url</td>
                                            <td className="px-3 py-2 text-xs">—</td>
                                            <td className="px-3 py-2 text-xs">Direct URL to a PDF file</td>
                                        </tr>
                                        <tr className="border-b border-slate-100">
                                            <td className="px-3 py-2 font-mono text-xs text-indigo-600">width</td>
                                            <td className="px-3 py-2 font-mono text-xs">100%</td>
                                            <td className="px-3 py-2 text-xs">Viewer width (CSS value)</td>
                                        </tr>
                                        <tr className="border-b border-slate-100">
                                            <td className="px-3 py-2 font-mono text-xs text-indigo-600">height</td>
                                            <td className="px-3 py-2 font-mono text-xs">90vh</td>
                                            <td className="px-3 py-2 text-xs">Viewer height (CSS value)</td>
                                        </tr>
                                        <tr className="border-b border-slate-100 last:border-0">
                                            <td className="px-3 py-2 font-mono text-xs text-indigo-600">title</td>
                                            <td className="px-3 py-2 font-mono text-xs text-slate-400">PDF Name</td>
                                            <td className="px-3 py-2 text-xs">Custom title for the viewer</td>
                                        </tr>
                                        <tr>
                                            <td className="px-3 py-2 font-mono text-xs text-indigo-600">background</td>
                                            <td className="px-3 py-2 font-mono text-xs text-slate-400">#f1f5f9</td>
                                            <td className="px-3 py-2 text-xs">Container background color</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </Section>

                    {/* Examples */}
                    <Section icon={FileText} title="Examples">
                        <div className="space-y-4">
                            <CodeBlock
                                label="Basic — Embed by PDF ID"
                                code='[pdf-rack id="123"]'
                            />
                            <CodeBlock
                                label="Custom Dimensions"
                                code='[pdf-rack id="123" width="800px" height="600px"]'
                            />
                            <CodeBlock
                                label="Custom Background Color"
                                code='[pdf-rack id="123" background="#ffffff"]'
                            />
                            <CodeBlock
                                label="Direct URL (external PDF)"
                                code='[pdf-rack url="https://example.com/document.pdf"]'
                            />
                            <CodeBlock
                                label="Full Options"
                                code='[pdf-rack id="123" width="100%" height="80vh" background="#f8fafc" title="Sales Report"]'
                            />
                        </div>
                    </Section>

                    {/* Categories & Tags */}
                    <Section icon={Tag} title="Categories & Tags">
                        <p className="text-sm text-slate-600 leading-relaxed">
                            Organize your PDFs using categories and tags for easier management within the dashboard.
                        </p>
                        <ul className="text-sm text-slate-600 space-y-2">
                            <li className="flex items-start gap-2">
                                <span className="mt-1 size-1.5 rounded-full bg-indigo-400 shrink-0" />
                                <span>Navigate to <strong>PDF Rack → Categories</strong> or <strong>Tags</strong> from the WordPress admin menu to manage taxonomies.</span>
                            </li>
                            <li className="flex items-start gap-2">
                                <span className="mt-1 size-1.5 rounded-full bg-indigo-400 shrink-0" />
                                <span>Assign categories and tags to PDFs via the PDF detail modal (click any PDF card).</span>
                            </li>
                            <li className="flex items-start gap-2">
                                <span className="mt-1 size-1.5 rounded-full bg-indigo-400 shrink-0" />
                                <span>Use the toolbar filters to quickly find PDFs by category or tag.</span>
                            </li>
                        </ul>
                    </Section>

                    {/* Viewer Features */}
                    <Section icon={Keyboard} title="Viewer Features & Shortcuts">
                        <p className="text-sm text-slate-600 leading-relaxed mb-3">
                            The PDF viewer provides an interactive reading experience with the following capabilities:
                        </p>
                        <div className="grid grid-cols-2 gap-2">
                            {[
                                { keys: '← →', desc: 'Previous / Next page' },
                                { keys: 'Home / End', desc: 'First / Last page' },
                                { keys: '+ / −', desc: 'Zoom in / out' },
                                { keys: 'Ctrl + 0', desc: 'Reset zoom' },
                                { keys: 'Esc', desc: 'Exit fullscreen' },
                                { keys: 'Click + Drag', desc: 'Pan / Scroll' },
                            ].map((item) => (
                                <div key={item.keys} className="flex items-center gap-2 bg-slate-50 rounded-lg px-3 py-2">
                                    <kbd className="text-[10px] font-mono font-bold bg-white border border-slate-200 rounded px-1.5 py-0.5 text-slate-700 shadow-sm whitespace-nowrap">
                                        {item.keys}
                                    </kbd>
                                    <span className="text-xs text-slate-600">{item.desc}</span>
                                </div>
                            ))}
                        </div>
                    </Section>

                </div>

                {/* Premium Features */}
                <Section icon={Layout} title="Premium Features (Coming Soon)">
                    <p className="text-sm text-slate-600 leading-relaxed mb-4">
                        Unlock the full potential of PDF Rack with our upcoming Pro version. Get early access to these powerful features:
                    </p>
                    <ul className="grid grid-cols-1 gap-3">
                        {[
                            { title: 'Flipbook Viewer', desc: 'Realistic 3D page flipping effect for an immersive reading experience.' },
                            { title: 'Lightbox Viewer', desc: 'Open PDFs in a stunning, distraction-free modal overlay.' },
                            { title: 'Carousel Display', desc: 'Showcase multiple PDFs in a beautiful, swipeable carousel slider.' },
                            { title: 'Secure PDF', desc: 'Protect your documents with passwords and prevent unauthorized downloads.' },
                            { title: 'Watermarking', desc: 'Automatically add custom text or image watermarks to your PDFs.' },
                            { title: 'Analytics', desc: 'Track views, downloads, and engagement metrics for your documents.' },
                        ].map((feature) => (
                            <li key={feature.title} className="flex gap-3 bg-gradient-to-r from-indigo-50/50 to-white border border-indigo-50 p-3 rounded-lg">
                                <div className="mt-1 bg-indigo-100 p-1.5 rounded text-indigo-600 shrink-0 h-fit">
                                    <Check className="size-3.5" />
                                </div>
                                <div>
                                    <h4 className="text-sm font-semibold text-slate-800">{feature.title}</h4>
                                    <p className="text-xs text-slate-500 mt-0.5">{feature.desc}</p>
                                </div>
                            </li>
                        ))}
                    </ul>
                </Section>

                {/* Footer */}
                <div className="px-6 py-4 border-t border-slate-200 bg-slate-50">
                    <p className="text-xs text-slate-400 text-center">
                        PDF Rack v{window.pdfRack?.version || '1.0.4'} — Built with ❤️
                    </p>
                </div>
            </div>
        </div>
    );
};

export default DocsSlideover;