Luncher/client/src/components/modals/SettingsModal.tsx

import { useEffect, useRef, useState } from "react";
import { Modal, Button, Form } from "react-bootstrap"
import { useSettings, ThemePreference } from "../../context/settings";
import { NotificationSettings, UdalostEnum, getNotificationSettings, updateNotificationSettings } from "../../../../types";
import { useAuth } from "../../context/auth";

type Props = {
    isOpen: boolean,
    onClose: () => void,
    onSave: (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean, themePreference?: ThemePreference) => void,
}

/** Modální dialog pro uživatelská nastavení. */
export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Props>) {
    const auth = useAuth();
    const settings = useSettings();
    const bankAccountRef = useRef<HTMLInputElement>(null);
    const nameRef = useRef<HTMLInputElement>(null);
    const hideSoupsRef = useRef<HTMLInputElement>(null);
    const themeRef = useRef<HTMLSelectElement>(null);

    const ntfyTopicRef = useRef<HTMLInputElement>(null);
    const discordWebhookRef = useRef<HTMLInputElement>(null);
    const teamsWebhookRef = useRef<HTMLInputElement>(null);
    const [notifSettings, setNotifSettings] = useState<NotificationSettings>({});
    const [enabledEvents, setEnabledEvents] = useState<UdalostEnum[]>([]);

    useEffect(() => {
        if (isOpen && auth?.login) {
            getNotificationSettings().then(response => {
                if (response.data) {
                    setNotifSettings(response.data);
                    setEnabledEvents(response.data.enabledEvents ?? []);
                }
            }).catch(() => {});
        }
    }, [isOpen, auth?.login]);

    const toggleEvent = (event: UdalostEnum) => {
        setEnabledEvents(prev =>
            prev.includes(event) ? prev.filter(e => e !== event) : [...prev, event]
        );
    };

    const handleSave = async () => {
        // Uložení notifikačních nastavení na server
        await updateNotificationSettings({
            body: {
                ntfyTopic: ntfyTopicRef.current?.value || undefined,
                discordWebhookUrl: discordWebhookRef.current?.value || undefined,
                teamsWebhookUrl: teamsWebhookRef.current?.value || undefined,
                enabledEvents,
            }
        }).catch(() => {});

        // Uložení ostatních nastavení (localStorage)
        onSave(
            bankAccountRef.current?.value,
            nameRef.current?.value,
            hideSoupsRef.current?.checked,
            themeRef.current?.value as ThemePreference,
        );
    };

    return (
        <Modal show={isOpen} onHide={onClose} size="lg">
            <Modal.Header closeButton>
                <Modal.Title><h2>Nastavení</h2></Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <h4>Vzhled</h4>
                <Form.Group className="mb-3">
                    <Form.Label>Barevný motiv</Form.Label>
                    <Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
                        <option value="system">Podle systému</option>
                        <option value="light">Světlý</option>
                        <option value="dark">Tmavý</option>
                    </Form.Select>
                </Form.Group>

                <hr />

                <h4>Obecné</h4>
                <Form.Group className="mb-3">
                    <Form.Check
                        id="hideSoupsCheckbox"
                        ref={hideSoupsRef}
                        type="checkbox"
                        label="Skrýt polévky"
                        defaultChecked={settings?.hideSoups}
                        title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální."
                    />
                    <Form.Text className="text-muted">
                        Experimentální funkce - zejména u TechTower bývá problém polévky spolehlivě rozeznat.
                    </Form.Text>
                </Form.Group>

                <hr />

                <h4>Notifikace</h4>
                <p>
                    Nastavením notifikací budete dostávat upozornění o událostech (např. "Jdeme na oběd") přímo do vámi zvoleného komunikačního kanálu.
                </p>

                <Form.Group className="mb-3">
                    <Form.Label>ntfy téma (topic)</Form.Label>
                    <Form.Control
                        ref={ntfyTopicRef}
                        type="text"
                        placeholder="moje-tema"
                        defaultValue={notifSettings.ntfyTopic}
                        key={notifSettings.ntfyTopic ?? 'ntfy-empty'}
                        onKeyDown={e => e.stopPropagation()}
                    />
                    <Form.Text className="text-muted">
                        Téma pro ntfy push notifikace. Nechte prázdné pro vypnutí.
                    </Form.Text>
                </Form.Group>

                <Form.Group className="mb-3">
                    <Form.Label>Discord webhook URL</Form.Label>
                    <Form.Control
                        ref={discordWebhookRef}
                        type="text"
                        placeholder="https://discord.com/api/webhooks/..."
                        defaultValue={notifSettings.discordWebhookUrl}
                        key={notifSettings.discordWebhookUrl ?? 'discord-empty'}
                        onKeyDown={e => e.stopPropagation()}
                    />
                    <Form.Text className="text-muted">
                        URL webhooku Discord kanálu. Nechte prázdné pro vypnutí.
                    </Form.Text>
                </Form.Group>

                <Form.Group className="mb-3">
                    <Form.Label>MS Teams webhook URL</Form.Label>
                    <Form.Control
                        ref={teamsWebhookRef}
                        type="text"
                        placeholder="https://outlook.office.com/webhook/..."
                        defaultValue={notifSettings.teamsWebhookUrl}
                        key={notifSettings.teamsWebhookUrl ?? 'teams-empty'}
                        onKeyDown={e => e.stopPropagation()}
                    />
                    <Form.Text className="text-muted">
                        URL webhooku MS Teams kanálu. Nechte prázdné pro vypnutí.
                    </Form.Text>
                </Form.Group>

                <Form.Group className="mb-3">
                    <Form.Label>Události k odběru</Form.Label>
                    {Object.values(UdalostEnum).map(event => (
                        <Form.Check
                            key={event}
                            id={`notif-event-${event}`}
                            type="checkbox"
                            label={event}
                            checked={enabledEvents.includes(event)}
                            onChange={() => toggleEvent(event)}
                        />
                    ))}
                    <Form.Text className="text-muted">
                        Zvolte události, o kterých chcete být notifikováni. Notifikace jsou odesílány pouze uživatelům se stejnou zvolenou lokalitou.
                    </Form.Text>
                </Form.Group>

                <hr />

                <h4>Bankovní účet</h4>
                <p>
                    Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.
                </p>

                <Form.Group className="mb-3">
                    <Form.Label>Číslo účtu</Form.Label>
                    <Form.Control
                        ref={bankAccountRef}
                        type="text"
                        placeholder="123456-1234567890/1234"
                        defaultValue={settings?.bankAccount}
                        onKeyDown={e => e.stopPropagation()}
                    />
                    <Form.Text className="text-muted">
                        Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.
                    </Form.Text>
                </Form.Group>

                <Form.Group className="mb-3">
                    <Form.Label>Název příjemce</Form.Label>
                    <Form.Control
                        ref={nameRef}
                        type="text"
                        placeholder="Jan Novák"
                        defaultValue={settings?.holderName}
                        onKeyDown={e => e.stopPropagation()}
                    />
                    <Form.Text className="text-muted">
                        Jméno majitele účtu pro QR platbu.
                    </Form.Text>
                </Form.Group>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={onClose}>
                    Storno
                </Button>
                <Button onClick={handleSave}>
                    Uložit
                </Button>
            </Modal.Footer>
        </Modal>
    );
}