{# 
    Preact Demo - No Build Setup
    Shows component examples and patterns
#}
{% extends "base_preact.html" %}

{% block title %}Preact Demo - DocuPDF{% endblock %}

{% block content %}
<div class="container mt-5">
    <div id="demo-root"></div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}

<script type="module">
    import { h, render } from 'https://esm.sh/preact@10.19.3';
    import { useState } from 'https://esm.sh/preact@10.19.3/hooks';
    import htm from 'https://esm.sh/htm@3.1.1';

    const html = htm.bind(h);

    // === Counter Component ===
    function Counter() {
        const [count, setCount] = useState(0);

        return html`
            <div class="card bg-dark text-white mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-plus-circle me-2"></i>Counter Example</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center gap-3">
                        <button class="btn btn-outline-danger" onClick=${() => setCount(count - 1)}>
                            <i class="bi bi-dash-lg"></i>
                        </button>
                        <span class="fs-3 fw-bold" style="min-width: 80px; text-align: center;">${count}</span>
                        <button class="btn btn-outline-success" onClick=${() => setCount(count + 1)}>
                            <i class="bi bi-plus-lg"></i>
                        </button>
                    </div>
                </div>
            </div>
        `;
    }

    // === Toggle Example ===
    function ToggleExample() {
        const [enabled, setEnabled] = useState(false);

        return html`
            <div class="card bg-dark text-white mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-toggle-on me-2"></i>Toggle Switch</h5>
                </div>
                <div class="card-body">
                    <div class="form-check form-switch">
                        <input 
                            class="form-check-input" 
                            type="checkbox" 
                            role="switch"
                            checked=${enabled}
                            onChange=${(e) => setEnabled(e.target.checked)}
                        />
                        <label class="form-check-label">
                            ${enabled ? 'Enabled' : 'Disabled'}
                        </label>
                    </div>
                    <p class="text-muted mt-2 mb-0">Current state: <strong>${enabled ? 'ON' : 'OFF'}</strong></p>
                </div>
            </div>
        `;
    }

    // === Form Example ===
    function FormExample() {
        const [name, setName] = useState('');
        const [email, setEmail] = useState('');
        const [submitted, setSubmitted] = useState(false);

        const handleSubmit = (e) => {
            e.preventDefault();
            setSubmitted(true);
            setTimeout(() => setSubmitted(false), 3000);
        };

        return html`
            <div class="card bg-dark text-white mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-input-cursor-text me-2"></i>Form Example</h5>
                </div>
                <div class="card-body">
                    ${submitted ? html`
                        <div class="alert alert-success alert-dismissible fade show">
                            <i class="bi bi-check-circle me-2"></i>Form submitted successfully!
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    ` : ''}
                    <form onSubmit=${handleSubmit}>
                        <div class="mb-3">
                            <label class="form-label">Name</label>
                            <input 
                                type="text" 
                                class="form-control" 
                                value=${name}
                                onInput=${(e) => setName(e.target.value)}
                                placeholder="Enter your name"
                                required
                            />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Email</label>
                            <input 
                                type="email" 
                                class="form-control" 
                                value=${email}
                                onInput=${(e) => setEmail(e.target.value)}
                                placeholder="email@example.com"
                                required
                            />
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-send me-2"></i>Submit
                        </button>
                    </form>
                </div>
            </div>
        `;
    }

    // === File Upload Example ===
    function FileUploadExample() {
        const [files, setFiles] = useState([]);
        const [dragOver, setDragOver] = useState(false);

        const handleFiles = (newFiles) => {
            setFiles([...files, ...Array.from(newFiles)]);
        };

        const removeFile = (index) => {
            setFiles(files.filter((_, i) => i !== index));
        };

        const handleDrop = (e) => {
            e.preventDefault();
            setDragOver(false);
            handleFiles(e.dataTransfer.files);
        };

        return html`
            <div class="card bg-dark text-white mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-cloud-upload me-2"></i>File Upload</h5>
                </div>
                <div class="card-body">
                    <div 
                        class="border-2 border-dashed rounded-3 p-5 text-center mb-4"
                        style="cursor: pointer; border-color: ${dragOver ? '#0d6efd' : '#495057'}; background: ${dragOver ? 'rgba(13, 110, 253, 0.1)' : 'transparent'};"
                        onDragOver=${(e) => { e.preventDefault(); setDragOver(true); }}
                        onDragLeave=${() => setDragOver(false)}
                        onDrop=${handleDrop}
                        onClick=${() => document.getElementById('file-input').click()}
                    >
                        <input 
                            type="file" 
                            id="file-input" 
                            multiple 
                            accept="image/*"
                            class="d-none"
                            onChange=${(e) => handleFiles(e.target.files)}
                        />
                        <i class="bi bi-cloud-upload display-4 text-primary mb-3"></i>
                        <h5>Drag & Drop files here</h5>
                        <p class="text-muted mb-0">or click to browse</p>
                    </div>

                    ${files.length > 0 ? html`
                        <h6 class="text-white-50 border-bottom border-secondary pb-2 mb-3">
                            Selected Files (${files.length})
                        </h6>
                        <div class="row g-3">
                            ${files.map((file, index) => html`
                                <div class="col-6 col-md-3">
                                    <div class="card bg-secondary position-relative">
                                        <button 
                                            class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1"
                                            style="z-index: 10;"
                                            onClick=${() => removeFile(index)}
                                        >
                                            <i class="bi bi-x-lg"></i>
                                        </button>
                                        <div class="card-body text-center py-2">
                                            <i class="bi bi-file-earmark-image display-6"></i>
                                            <p class="small text-truncate mb-0 mt-2">${file.name}</p>
                                        </div>
                                    </div>
                                </div>
                            `)}
                        </div>
                    ` : ''}
                </div>
            </div>
        `;
    }

    // === Badge Examples ===
    function BadgeExample() {
        const badges = [
            { variant: 'primary', label: 'Primary' },
            { variant: 'success', label: 'Success' },
            { variant: 'danger', label: 'Danger' },
            { variant: 'warning', label: 'Warning', class: 'text-dark' },
            { variant: 'info', label: 'Info', class: 'text-dark' },
            { variant: 'secondary', label: 'Secondary' }
        ];

        return html`
            <div class="card bg-dark text-white mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-patch-check me-2"></i>Badges</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex flex-wrap gap-2">
                        ${badges.map(badge => html`
                            <span class="badge bg-${badge.variant} ${badge.class || ''}">
                                ${badge.label}
                            </span>
                        `)}
                    </div>
                </div>
            </div>
        `;
    }

    // === Main App ===
    function App() {
        return html`
            <div class="row">
                <div class="col-lg-6">
                    <${Counter} />
                    <${ToggleExample} />
                    <${BadgeExample} />
                </div>
                <div class="col-lg-6">
                    <${FormExample} />
                    <${FileUploadExample} />
                </div>
            </div>
        `;
    }

    // Render
    render(html`<${App} />`, document.getElementById('demo-root'));
</script>
{% endblock %}