import { useEffect, useState } from "react";
import { Navbar, Nav, NavDropdown, Modal, Button } from "react-bootstrap";
import { useAuth } from "../context/auth";
import SettingsModal from "./modals/SettingsModal";
import { useSettings, ThemePreference } from "../context/settings";
import FeaturesVotingModal from "./modals/FeaturesVotingModal";
import PizzaCalculatorModal from "./modals/PizzaCalculatorModal";
import RefreshMenuModal from "./modals/RefreshMenuModal";
import GenerateQrModal from "./modals/GenerateQrModal";
import GenerateMockDataModal from "./modals/GenerateMockDataModal";
import ClearMockDataModal from "./modals/ClearMockDataModal";
import { useNavigate } from "react-router";
import { STATS_URL } from "../AppRoutes";
import { FeatureRequest, getVotes, updateVote, LunchChoices } from "../../../types";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";

const CHANGELOG = [
    "Nový moderní design aplikace",
    "Oprava parsování Sladovnické a TechTower",
    "Možnost označit se jako objednávající u volby \"budu objednávat\"",
    "Možnost generovat QR kódy pro platby (i mimo Pizza day)",
];

const IS_DEV = process.env.NODE_ENV === 'development';

type Props = {
    choices?: LunchChoices;
    dayIndex?: number;
};

export default function Header({ choices, dayIndex }: Props) {
    const auth = useAuth();
    const settings = useSettings();
    const navigate = useNavigate();
    const [settingsModalOpen, setSettingsModalOpen] = useState<boolean>(false);
    const [votingModalOpen, setVotingModalOpen] = useState<boolean>(false);
    const [pizzaModalOpen, setPizzaModalOpen] = useState<boolean>(false);
    const [refreshMenuModalOpen, setRefreshMenuModalOpen] = useState<boolean>(false);
    const [changelogModalOpen, setChangelogModalOpen] = useState<boolean>(false);
    const [qrModalOpen, setQrModalOpen] = useState<boolean>(false);
    const [generateMockModalOpen, setGenerateMockModalOpen] = useState<boolean>(false);
    const [clearMockModalOpen, setClearMockModalOpen] = useState<boolean>(false);
    const [featureVotes, setFeatureVotes] = useState<FeatureRequest[] | undefined>([]);

    // Zjistíme aktuální efektivní téma (pro zobrazení správné ikony)
    const [effectiveTheme, setEffectiveTheme] = useState<'light' | 'dark'>('light');

    useEffect(() => {
        const updateEffectiveTheme = () => {
            if (settings?.themePreference === 'system') {
                const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                setEffectiveTheme(isDark ? 'dark' : 'light');
            } else {
                setEffectiveTheme(settings?.themePreference || 'light');
            }
        };

        updateEffectiveTheme();

        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
        mediaQuery.addEventListener('change', updateEffectiveTheme);
        return () => mediaQuery.removeEventListener('change', updateEffectiveTheme);
    }, [settings?.themePreference]);

    useEffect(() => {
        if (auth?.login) {
            getVotes().then(response => {
                setFeatureVotes(response.data);
            })
        }
    }, [auth?.login]);

    const closeSettingsModal = () => {
        setSettingsModalOpen(false);
    }

    const closeVotingModal = () => {
        setVotingModalOpen(false);
    }

    const closePizzaModal = () => {
        setPizzaModalOpen(false);
    }

    const closeRefreshMenuModal = () => {
        setRefreshMenuModalOpen(false);
    }

    const closeQrModal = () => {
        setQrModalOpen(false);
    }

    const handleQrMenuClick = () => {
        if (!settings?.bankAccount || !settings?.holderName) {
            alert('Pro generování QR kódů je nutné mít v nastavení vyplněné číslo účtu a jméno držitele účtu.');
            return;
        }
        setQrModalOpen(true);
    }

    const toggleTheme = () => {
        // Přepínáme mezi light a dark (ignorujeme system pro jednoduchost)
        const newTheme: ThemePreference = effectiveTheme === 'dark' ? 'light' : 'dark';
        settings?.setThemePreference(newTheme);
    }

    const isValidInteger = (str: string) => {
        str = str.trim();
        if (!str) {
            return false;
        }
        str = str.replace(/^0+/, "") || "0";
        const n = Math.floor(Number(str));
        return n !== Infinity && String(n) === str && n >= 0;
    }

    const saveSettings = (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean, themePreference?: ThemePreference) => {
        if (bankAccountNumber) {
            try {
                // Validace kódu banky
                if (!bankAccountNumber.includes('/')) {
                    throw new Error("Číslo účtu neobsahuje lomítko/kód banky")
                }
                const split = bankAccountNumber.split("/");
                if (split[1].length !== 4) {
                    throw new Error("Kód banky musí být 4 číslice")
                }
                if (!isValidInteger(split[1])) {
                    throw new Error("Kód banky není číslo")
                }

                // Validace čísla a předčíslí
                let cislo = split[0];

                if (cislo.indexOf('-') > 0) {
                    cislo = cislo.replace('-', '');
                }
                if (!isValidInteger(cislo)) {
                    throw new Error("Předčíslí nebo číslo účtu neobsahuje pouze číslice")
                }
                if (cislo.length < 16) {
                    cislo = cislo.padStart(16, '0');
                }
                let sum = 0;
                for (let i = 0; i < cislo.length; i++) {
                    const char = cislo.charAt(i);
                    const order = (cislo.length - 1) - i;
                    const weight = (2 ** order) % 11;
                    sum += Number.parseInt(char) * weight
                }
                if (sum % 11 !== 0) {
                    throw new Error("Číslo účtu je neplatné")
                }
            } catch (e: any) {
                alert(e.message)
                return
            }
        }
        settings?.setBankAccountNumber(bankAccountNumber);
        settings?.setBankAccountHolderName(bankAccountHolderName);
        settings?.setHideSoupsOption(hideSoupsOption);
        if (themePreference) {
            settings?.setThemePreference(themePreference);
        }
        closeSettingsModal();
    }

    const saveFeatureVote = async (option: FeatureRequest, active: boolean) => {
        await updateVote({ body: { option, active } });
        const votes = [...featureVotes || []];
        if (active) {
            votes.push(option);
        } else {
            votes.splice(votes.indexOf(option), 1);
        }
        setFeatureVotes(votes);
    }

    return <Navbar variant='dark' expand="lg">
        <Navbar.Brand href="/">Luncher</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="nav">
                <button
                    className="theme-toggle"
                    onClick={toggleTheme}
                    title={effectiveTheme === 'dark' ? 'Přepnout na světlý režim' : 'Přepnout na tmavý režim'}
                    aria-label="Přepnout barevný motiv"
                >
                    <FontAwesomeIcon icon={effectiveTheme === 'dark' ? faSun : faMoon} />
                </button>
                <NavDropdown align="end" title={auth?.login} id="basic-nav-dropdown">
                    <NavDropdown.Item onClick={() => setSettingsModalOpen(true)}>Nastavení</NavDropdown.Item>
                    <NavDropdown.Item onClick={() => setRefreshMenuModalOpen(true)}>Přenačtení menu</NavDropdown.Item>
                    <NavDropdown.Item onClick={() => setVotingModalOpen(true)}>Hlasovat o nových funkcích</NavDropdown.Item>
                    <NavDropdown.Item onClick={() => setPizzaModalOpen(true)}>Pizza kalkulačka</NavDropdown.Item>
                    <NavDropdown.Item onClick={handleQrMenuClick}>Generování QR kódů</NavDropdown.Item>
                    <NavDropdown.Item onClick={() => navigate(STATS_URL)}>Statistiky</NavDropdown.Item>
                    <NavDropdown.Item onClick={() => setChangelogModalOpen(true)}>Novinky</NavDropdown.Item>
                    {IS_DEV && (
                        <>
                            <NavDropdown.Divider />
                            <NavDropdown.Item onClick={() => setGenerateMockModalOpen(true)}>🔧 Generovat mock data</NavDropdown.Item>
                            <NavDropdown.Item onClick={() => setClearMockModalOpen(true)}>🔧 Smazat data dne</NavDropdown.Item>
                        </>
                    )}
                    <NavDropdown.Divider />
                    <NavDropdown.Item onClick={auth?.logout}>Odhlásit se</NavDropdown.Item>
                </NavDropdown>
            </Nav>
        </Navbar.Collapse>
        <SettingsModal isOpen={settingsModalOpen} onClose={closeSettingsModal} onSave={saveSettings} />
        <RefreshMenuModal isOpen={refreshMenuModalOpen} onClose={closeRefreshMenuModal} />
        <FeaturesVotingModal isOpen={votingModalOpen} onClose={closeVotingModal} onChange={saveFeatureVote} initialValues={featureVotes} />
        <PizzaCalculatorModal isOpen={pizzaModalOpen} onClose={closePizzaModal} />
        {choices && settings?.bankAccount && settings?.holderName && (
            <GenerateQrModal
                isOpen={qrModalOpen}
                onClose={closeQrModal}
                choices={choices}
                bankAccount={settings.bankAccount}
                bankAccountHolder={settings.holderName}
            />
        )}
        {IS_DEV && (
            <>
                <GenerateMockDataModal
                    isOpen={generateMockModalOpen}
                    onClose={() => setGenerateMockModalOpen(false)}
                    currentDayIndex={dayIndex}
                />
                <ClearMockDataModal
                    isOpen={clearMockModalOpen}
                    onClose={() => setClearMockModalOpen(false)}
                    currentDayIndex={dayIndex}
                />
            </>
        )}
        <Modal show={changelogModalOpen} onHide={() => setChangelogModalOpen(false)}>
            <Modal.Header closeButton>
                <Modal.Title><h2>Novinky</h2></Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <ul>
                    {CHANGELOG.map((item, index) => (
                        <li key={index}>{item}</li>
                    ))}
                </ul>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setChangelogModalOpen(false)}>
                    Zavřít
                </Button>
            </Modal.Footer>
        </Modal>
    </Navbar>
}