import { useEffect, useRef, useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
import { PendingQr, dismissQr } from '../../../types';
import { formatDateString } from '../Utils';
import ConfirmModal from './modals/ConfirmModal';

type Props = {
    pendingQrs?: PendingQr[];
    login?: string;
    // Zavolá se po úspěšném potvrzení platby, aby si rodič mohl znovu načíst data
    onDismissed?: () => void | Promise<void>;
};

// Sekce "Nevyřízené platby" – zobrazí QR kódy neuhrazených plateb přihlášeného uživatele
// včetně tlačítka "Zaplatil jsem" a potvrzovacího dialogu. Sdíleno hlavní stránkou i stránkou objednávek.
// Při příchodu nových nevyřízených plateb se navíc automaticky otevře modální dialog,
// aby si uživatel QR kódů určitě všiml (často si jich nevšimnou, protože sekce je dole na stránce).
export default function PendingPayments({ pendingQrs, login, onDismissed }: Readonly<Props>) {
    const [dismissQrId, setDismissQrId] = useState<string | null>(null);
    const [modalOpen, setModalOpen] = useState(false);

    // ID QR kódů, pro které už byl v rámci tohoto načtení stránky automaticky zobrazen
    // modální dialog. Drží se jen v paměti (ne v sessionStorage), takže se při každém
    // ručním přenačtení stránky vynuluje a dialog se znovu otevře, dokud uživatel platby
    // neuhradí. Zároveň se nepřekrývá při pouhém obnovení dat či příchodu už zobrazeného QR.
    const autoShownQrIds = useRef<Set<string>>(new Set());

    const qrIdsKey = (pendingQrs ?? []).map(qr => qr.id).join(',');

    // Automaticky otevřeme modální dialog, jakmile přijdou nové (dosud nezobrazené) platby.
    useEffect(() => {
        const ids = (pendingQrs ?? []).map(qr => qr.id);
        if (ids.length === 0) return;
        const unseen = ids.filter(id => !autoShownQrIds.current.has(id));
        if (unseen.length > 0) {
            setModalOpen(true);
            unseen.forEach(id => autoShownQrIds.current.add(id));
        }
    }, [qrIdsKey, pendingQrs]);

    if (!pendingQrs || pendingQrs.length === 0) return null;

    // Vykreslení jednoho QR kódu i s tlačítkem "Zaplatil jsem" – sdíleno sekcí i modálem.
    const renderQr = (qr: PendingQr) => (
        <div key={qr.id} className='qr-code mb-3'>
            <p>
                <strong>{formatDateString(qr.date)}</strong> — {qr.creator} ({qr.totalPrice / 100} Kč)
                {qr.purpose && <><br /><span className="text-muted">{qr.purpose}</span></>}
            </p>
            <img src={`/api/qr?login=${login}&id=${qr.id}`} alt='QR kód' />
            <div className='mt-2'>
                <Button variant="success" onClick={() => setDismissQrId(qr.id)}>
                    Zaplatil jsem
                </Button>
            </div>
        </div>
    );

    return (
        <>
            <div className='pizza-section fade-in mt-4'>
                <h3>Nevyřízené platby</h3>
                <p>
                    Máte neuhrazené platby.{' '}
                    <Button variant="link" className="p-0 align-baseline" onClick={() => setModalOpen(true)}>
                        Zobrazit QR kódy
                    </Button>
                </p>
                {pendingQrs.map(renderQr)}
            </div>
            <Modal show={modalOpen} onHide={() => setModalOpen(false)} centered scrollable>
                <Modal.Header closeButton>
                    <Modal.Title>Nevyřízené platby</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <p>Máte neuhrazené platby. Naskenujte QR kód pro zaplacení.</p>
                    {pendingQrs.map(renderQr)}
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={() => setModalOpen(false)}>
                        Zavřít
                    </Button>
                </Modal.Footer>
            </Modal>
            <ConfirmModal
                isOpen={dismissQrId !== null}
                title="Potvrzení platby"
                message="Opravdu jste zaplatili? QR kód bude odstraněn."
                confirmLabel="Zaplatil jsem"
                confirmVariant="success"
                onClose={() => setDismissQrId(null)}
                onConfirm={async () => {
                    if (!dismissQrId) return;
                    const id = dismissQrId;
                    setDismissQrId(null);
                    await dismissQr({ body: { id } });
                    await onDismissed?.();
                }}
            />
        </>
    );
}