import { LitElement, html, css, svg } from 'lit';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './card/winzer-file-card.js';
import './winzer-day-view.js';
import './winzer-menu-group.js';
import './winzer-modal.js';
import './card/winzer-card.js';
import './winzer-header.js';
import './winzer-nav.js';
import './toggle-switch.js';

export class WinzerApp extends LitElement {
    static properties = {
        isUserModalOpen: { type: Boolean },
        isFilterModalOpen: { type: Boolean },
        currentTab: { type: String },

        // Configurable properties
        appTitle: { type: String, attribute: 'app-title' },
        appSubtitle: { type: String, attribute: 'app-subtitle' },
        navItems: { type: Array }, // [{ id, label, icon (svg string), url }]
        menuAccount: { type: Array },
        menuSession: { type: Array },
    };

    constructor() {
        super();
        this.isUserModalOpen = false;
        this.isFilterModalOpen = false;
        this.currentTab = 'news'; // Default tab

        // Defaults
        this.appTitle = 'WINZER-PORTAL';
        this.appSubtitle = 'Badischer Winzerkeller';

        // Default Navigation (can be overwritten via property)
        this.navItems = [
            {
                id: 'news',
                label: 'News',
                url: '/news',
                icon: svg`<svg viewBox="0 0 24 24"><path d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2-2v1m2 13a2 2 0 0 1-2-2V7m2 13a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>`
            },
            {
                id: 'anlieferung',
                label: 'Anlieferung',
                url: '/anlieferung',
                icon: svg`<svg viewBox="0 0 24 24"><circle cx="12" cy="10" r="2"/><circle cx="15.5" cy="8" r="2"/><circle cx="8.5" cy="8" r="2"/><circle cx="12" cy="6" r="2"/><circle cx="10" cy="13" r="2"/><circle cx="14" cy="13" r="2"/><circle cx="12" cy="16" r="2"/><path d="M12 2v4" stroke-linecap="round"/></svg>`
            },
            {
                id: 'tresor',
                label: 'Datei-Tresor',
                url: '/tresor',
                icon: svg`<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><path d="M12 12v3"/><path d="M12 12v-1"/></svg>`
            }
        ];

        this.menuAccount = [
            { label: 'Persönliche Daten', icon: svg`<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`, action: 'profile' },
            { label: 'Sicherheits-Einstellungen', icon: svg`<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`, action: 'security' },
            { label: 'Meine Buchungen', icon: svg`<circle cx="12" cy="10" r="2"/><circle cx="15.5" cy="8" r="2"/><circle cx="8.5" cy="8" r="2"/><circle cx="12" cy="6" r="2"/><circle cx="10" cy="13" r="2"/><circle cx="14" cy="13" r="2"/><circle cx="12" cy="16" r="2"/><path d="M12 2v4"/>`, action: 'bookings' }
        ];
        this.menuSession = [
            { label: 'Abmelden', icon: svg`<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>`, action: 'logout' }
        ];
    }

    static styles = css`
        :host {
            display: block;
            background-color: var(--bg-white);
            min-height: 100vh;
            width: 100%;
            position: relative;
        }
        .content { padding: 20px; padding-bottom: 90px; }
        .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
        h1 { font-size: 1.5rem; font-weight: 800; margin: 0; text-transform: uppercase; }
        .abo-label { font-size: 0.8rem; font-weight: 600; margin-left: auto; margin-right: 8px; }

        /* Filter Bar */
        .filter-bar {
            display: flex;
            align-items: center;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 16px;
            cursor: pointer;
        }
        .filter-icon {
            margin-left: 8px;
            width: 24px;
            height: 24px;
            color: var(--text-dark);
        }

        /* Filter Modal Styles */
        .filter-content {
            background-color: var(--bg-white);
            padding: 16px;
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-sm);
        }
        .filter-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        .filter-row label {
            display: flex;
            align-items: center;
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--text-dark);
        }
        .filter-row label svg {
            width: 20px;
            height: 20px;
            margin-right: 8px;
            color: var(--primary-color);
        }
        .filter-select {
            background-color: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 0.9rem;
            color: var(--text-dark);
            width: 160px;
        }
        .filter-btn {
            width: 100%;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            padding: 12px;
            font-weight: 600;
            font-size: 1rem;
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
        }
    `;

    render() {
        return html`
            <!-- Header -->
            <winzer-header
                    .mainTitle="${this.appTitle}"
                    .subTitle="${this.appSubtitle}"
                    @user-click="${() => this.isUserModalOpen = true}">
            </winzer-header>

            <div class="content">
                <!-- Dynamic Content Slot -->
                <!--
                   The main content is now injected via the default slot.
                   Contao renders the page content, and it gets placed here.
                -->
                <slot></slot>
            </div>

            <!-- Bottom Nav -->
            <winzer-nav
                    .activeTab="${this.currentTab}"
                    .items="${this.navItems}">
            </winzer-nav>

            <!-- MODAL: USER -->
            <winzer-modal title="Mein Benutzerkonto" ?open="${this.isUserModalOpen}" @close="${() => this.isUserModalOpen = false}">
                <winzer-menu-group .items="${this.menuAccount}"></winzer-menu-group>
                <winzer-menu-group .items="${this.menuSession}"></winzer-menu-group>
            </winzer-modal>

            <!-- MODAL: FILTER -->
            <winzer-modal title="FILTER - EINSTELLUNGEN" ?open="${this.isFilterModalOpen}" @close="${() => this.isFilterModalOpen = false}">
                <div class="filter-content">
                    <div class="filter-row">
                        <label>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
                            Kategorie:
                        </label>
                        <select class="filter-select">
                            <option>Traubengeld</option>
                            <option>Rechnungen</option>
                        </select>
                    </div>
                    <div class="filter-row">
                        <label>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                            Zeitraum:
                        </label>
                        <select class="filter-select">
                            <option>Letzter Monat</option>
                            <option>Dieses Jahr</option>
                        </select>
                    </div>
                    <div class="filter-row" style="margin-top: 20px;">
                        <label>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line><polyline points="18 20 21 23 24 20"></polyline></svg>
                            Sortierung:
                        </label>
                        <select class="filter-select">
                            <option>Datum absteigend</option>
                            <option>Datum aufsteigend</option>
                        </select>
                    </div>

                    <button class="filter-btn" @click="${() => this.isFilterModalOpen = false}">
                        Filtern
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                    </button>
                </div>
            </winzer-modal>
        `;
    }
}
customElements.define('winzer-app', WinzerApp);