import { useContext, useEffect, useState } from 'react';
import { Alert, Badge, Button, Card, Form, Modal, OverlayTrigger, Table, Tooltip } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrashCan } from '@fortawesome/free-regular-svg-icons';
import { faBasketShopping, faCircleCheck, faGear, faLock, faLockOpen, faSearch, faUserPlus } from '@fortawesome/free-solid-svg-icons';
import {
    ClientData, GroupState, MealSlot, OrderGroup, OrderGroupMember,
    getData, createGroup, deleteGroup, addGroupMember, removeGroupMember, updateGroupMember, setGroupState, updateGroupTimes,
} from '../../../types';
import { EVENT_MESSAGE, SocketContext } from '../context/socket';
import { useAuth } from '../context/auth';
import { useSettings } from '../context/settings';
import Login from '../Login';
import Header from '../components/Header';
import Footer from '../components/Footer';
import Loader from '../components/Loader';
import StoreAdminModal from '../components/modals/StoreAdminModal';
import PayForGroupModal from '../components/modals/PayForGroupModal';
import EditGroupFeesModal from '../components/modals/EditGroupFeesModal';

const SLOT = MealSlot.EXTRA;
const TIME_REGEX = /^([01]\d|2[0-3]):[0-5]\d$/;

function stateBadge(state: GroupState) {
    const map: Record<GroupState, { bg: string; label: string }> = {
        [GroupState.OPEN]: { bg: 'success', label: 'Otevřeno' },
        [GroupState.LOCKED]: { bg: 'warning', label: 'Uzamčeno' },
        [GroupState.ORDERED]: { bg: 'secondary', label: 'Objednáno' },
    };
    const { bg, label } = map[state] ?? { bg: 'light', label: state };
    return <Badge bg={bg}>{label}</Badge>;
}

export default function OrderGroupsPage() {
    const auth = useAuth();
    const settings = useSettings();
    const socket = useContext(SocketContext);
    const [data, setData] = useState<ClientData | undefined>();
    const [failure, setFailure] = useState(false);
    const [newGroupName, setNewGroupName] = useState('');
    const [creating, setCreating] = useState(false);
    const [adminModalOpen, setAdminModalOpen] = useState(false);
    const [editAmounts, setEditAmounts] = useState<Record<string, string>>({});
    const [editNotes, setEditNotes] = useState<Record<string, string>>({});
    const [editSurcharges, setEditSurcharges] = useState<Record<string, { text: string; amount: string }>>({});
    const [editTimes, setEditTimes] = useState<Record<string, { orderedAt: string; deliveryAt: string }>>({});
    const [payModal, setPayModal] = useState<OrderGroup | null>(null);
    const [feesModal, setFeesModal] = useState<OrderGroup | null>(null);
    const [confirmOrderGroup, setConfirmOrderGroup] = useState<OrderGroup | null>(null);
    const [pageError, setPageError] = useState<string | null>(null);

    const fetchData = async () => {
        try {
            const r = await getData({ query: { slot: SLOT } });
            if (r.data) setData(r.data);
        } catch {
            setFailure(true);
        }
    };

    useEffect(() => {
        if (!auth?.login) return;
        fetchData();
    }, [auth?.login]);

    useEffect(() => {
        socket.on(EVENT_MESSAGE, (newData: ClientData) => {
            if (newData.slot === SLOT) setData(prev => ({
                ...newData,
                stores: newData.stores ?? prev?.stores,
            }));
        });
        return () => { socket.off(EVENT_MESSAGE); };
    }, [socket]);

    useEffect(() => {
        const onReconnect = () => fetchData();
        socket.io.on('reconnect', onReconnect);
        return () => { socket.io.off('reconnect', onReconnect); };
    }, [socket]);

    const refresh = async (fn: () => Promise<any>): Promise<boolean> => {
        setPageError(null);
        const result = await fn();
        if (result?.error) {
            setPageError((result.error as any).error || 'Nastala chyba');
            await fetchData();
            return false;
        }
        if (result?.data) {
            setData(result.data);
            socket.emit?.('message', result.data as ClientData);
        }
        return true;
    };

    const handleCreate = async () => {
        if (!newGroupName || !auth?.login) return;
        setCreating(true);
        const ok = await refresh(() => createGroup({ body: { name: newGroupName } }));
        if (ok) setNewGroupName('');
        setCreating(false);
    };

    const handleJoin = (groupId: string) =>
        refresh(() => addGroupMember({ body: { id: groupId } }));

    const handleToggleLock = (group: OrderGroup) => {
        const next = group.state === GroupState.OPEN ? GroupState.LOCKED : GroupState.OPEN;
        return refresh(() => setGroupState({ body: { id: group.id, state: next } }));
    };

    const handleConfirmOrdered = async (group: OrderGroup) => {
        setConfirmOrderGroup(null);
        await refresh(() => setGroupState({ body: { id: group.id, state: GroupState.ORDERED } }));
    };

    const handleRevertOrdered = (group: OrderGroup) =>
        refresh(() => setGroupState({ body: { id: group.id, state: GroupState.LOCKED } }));

    const handleDelete = (groupId: string) =>
        refresh(() => deleteGroup({ body: { id: groupId } }));

    const handleSaveAmount = async (groupId: string, login: string) => {
        const key = `${groupId}:${login}`;
        const raw = editAmounts[key];
        const n = parseFloat(raw ?? '');
        if (!raw || isNaN(n) || n < 0) {
            setPageError('Zadejte platnou kladnou částku');
            return;
        }
        const ok = await refresh(() => updateGroupMember({ body: { id: groupId, login, amount: Math.round(n * 100) } }));
        if (ok) setEditAmounts(prev => { const next = { ...prev }; delete next[key]; return next; });
    };

    const handleSaveNote = async (groupId: string, login: string) => {
        const key = `${groupId}:${login}`;
        const note = editNotes[key] ?? '';
        const ok = await refresh(() => updateGroupMember({ body: { id: groupId, login, note } }));
        if (ok) setEditNotes(prev => { const next = { ...prev }; delete next[key]; return next; });
    };

    const handleSaveSurcharge = async (groupId: string, login: string) => {
        const key = `${groupId}:${login}`;
        const surchargeText = editSurcharges[key]?.text ?? '';
        const rawAmount = editSurcharges[key]?.amount ?? '';
        const surchargeAmount = rawAmount === '' ? 0 : parseFloat(rawAmount.replace(',', '.'));
        if (rawAmount !== '' && (isNaN(surchargeAmount) || surchargeAmount < 0)) {
            setPageError('Zadejte platnou výši příplatku');
            return;
        }
        const ok = await refresh(() => updateGroupMember({ body: { id: groupId, login, surchargeText, surchargeAmount: rawAmount === '' ? 0 : Math.round(surchargeAmount * 100) } }));
        if (ok) setEditSurcharges(prev => { const next = { ...prev }; delete next[key]; return next; });
    };

    const handleSaveTimes = async (group: OrderGroup) => {
        const times = editTimes[group.id];
        if (!times) return;
        const { orderedAt, deliveryAt } = times;
        if (orderedAt && !TIME_REGEX.test(orderedAt)) {
            setPageError('Čas objednání musí být ve formátu HH:MM');
            return;
        }
        if (deliveryAt && !TIME_REGEX.test(deliveryAt)) {
            setPageError('Čas doručení musí být ve formátu HH:MM');
            return;
        }
        const ok = await refresh(() => updateGroupTimes({ body: { id: group.id, orderedAt, deliveryAt } }));
        if (ok) setEditTimes(prev => { const next = { ...prev }; delete next[group.id]; return next; });
    };

    const canEditMember = (group: OrderGroup, targetLogin: string) => {
        if (group.state === GroupState.ORDERED) return false;
        if (auth?.login === group.creatorLogin) return true;
        if (auth?.login === targetLogin && group.state === GroupState.OPEN) return true;
        return false;
    };

    const canManageMembers = (group: OrderGroup) => {
        if (group.state === GroupState.ORDERED) return false;
        if (auth?.login === group.creatorLogin) return true;
        return group.state === GroupState.OPEN;
    };

    if (!auth?.login) return <Login />;

    if (failure) return (
        <Loader icon={faSearch} description="Nepodařilo se načíst data" animation="fa-beat" />
    );

    if (!data) return (
        <Loader icon={faSearch} description="Načítám..." animation="fa-bounce" />
    );

    const stores = data.stores ?? [];
    const groups = data.groups ?? [];

    return (
        <div className="app-container">
            <Header choices={data.choices} />
            <div className="wrapper">
                <div className="d-flex align-items-center justify-content-between mb-1">
                    <h1 className="title mb-0">Objednání</h1>
                    <Button variant="outline-secondary" size="sm" onClick={() => setAdminModalOpen(true)} title="Správa obchodů">
                        <FontAwesomeIcon icon={faGear} />
                    </Button>
                </div>
                <p style={{ color: 'var(--luncher-text-muted)' }}>Skupinové objednávky z obchodů a restaurací</p>

                {pageError && (
                    <Alert variant="danger" dismissible onClose={() => setPageError(null)} className="mt-2">
                        {pageError}
                    </Alert>
                )}

                <div className="content-wrapper">
                    <div className="content" style={{ maxWidth: 1200 }}>
                        {/* Vytvoření nové skupiny */}
                        <div className="choice-section fade-in mb-4">
                            <h5>Vytvořit skupinu</h5>
                            {stores.length === 0 ? (
                                <p className="text-muted">
                                    Nejsou přidány žádné obchody.{' '}
                                    <Button variant="link" size="sm" className="p-0" onClick={() => setAdminModalOpen(true)}>
                                        Přidat obchod
                                    </Button>
                                </p>
                            ) : (
                                <div className="d-flex gap-2 align-items-end flex-wrap">
                                    <Form.Select
                                        value={newGroupName}
                                        onChange={e => setNewGroupName(e.target.value)}
                                        style={{ maxWidth: 260 }}
                                    >
                                        <option value="">— vyberte obchod —</option>
                                        {stores.map(s => <option key={s} value={s}>{s}</option>)}
                                    </Form.Select>
                                    <Button variant="primary" onClick={handleCreate} disabled={creating || !newGroupName}>
                                        Vytvořit skupinu
                                    </Button>
                                </div>
                            )}
                        </div>

                        {/* Seznam skupin */}
                        {groups.length === 0 && (
                            <p className="text-muted fade-in">Zatím žádné skupiny pro dnešní den.</p>
                        )}

                        {groups.map(group => {
                            const login = auth!.login ?? '';
                            const isCreator = login === group.creatorLogin;
                            const isMember = login in group.members;
                            const isOrdered = group.state === GroupState.ORDERED;
                            const isLocked = group.state === GroupState.LOCKED;
                            const memberEntries = Object.entries(group.members) as [string, OrderGroupMember][];
                            const memberCount = memberEntries.length;
                            const editingTimes = group.id in editTimes;

                            const totalFees = (group.fees ?? 0) + (group.shipping ?? 0) + (group.tip ?? 0);
                            const feeShare = memberCount > 0 ? Math.round(totalFees / memberCount) : 0;
                            const getMemberTotal = (m: OrderGroupMember) => {
                                const base = m.amount ?? 0;
                                const surcharge = m.surchargeAmount ?? 0;
                                const dv = group.discountValue ?? 0;
                                const discount = dv > 0
                                    ? (group.discountType === 'percent'
                                        ? Math.round((base + surcharge) * dv / 100)
                                        : Math.round(dv / memberCount))
                                    : 0;
                                return base + surcharge + feeShare - discount;
                            };

                            return (
                                <Card key={group.id} className="mb-3 fade-in">
                                    <Card.Header className="d-flex justify-content-between align-items-center">
                                        <div className="d-flex align-items-center gap-2">
                                            <strong>{group.name}</strong>
                                            {stateBadge(group.state)}
                                            <small className="text-muted">zakladatel: {group.creatorLogin}</small>
                                        </div>
                                        <div className="d-flex gap-2">
                                            {isCreator && !isOrdered && (
                                                <>
                                                    <Button variant="outline-info" size="sm" onClick={() => setFeesModal(group)} title="Upravit poplatky a slevu">
                                                        Poplatky
                                                    </Button>
                                                    <Button variant="outline-secondary" size="sm" onClick={() => handleToggleLock(group)} title={isLocked ? 'Odemknout' : 'Uzamknout'}>
                                                        <FontAwesomeIcon icon={isLocked ? faLockOpen : faLock} />
                                                    </Button>
                                                    {isLocked && (
                                                        <Button variant="outline-primary" size="sm" onClick={() => setConfirmOrderGroup(group)}>
                                                            Objednáno
                                                        </Button>
                                                    )}
                                                    <Button variant="outline-danger" size="sm" onClick={() => handleDelete(group.id)} title="Smazat skupinu">
                                                        <FontAwesomeIcon icon={faTrashCan} />
                                                    </Button>
                                                </>
                                            )}
                                            {isCreator && isOrdered && (
                                                <>
                                                    {settings?.bankAccount && settings?.holderName && !group.qrGenerated && (
                                                        <Button variant="primary" size="sm" onClick={() => setPayModal(group)}>
                                                            <FontAwesomeIcon icon={faBasketShopping} className="me-1" />
                                                            Generovat QR
                                                        </Button>
                                                    )}
                                                    <Button variant="outline-warning" size="sm" onClick={() => handleRevertOrdered(group)} title="Vrátit na Uzamčeno (smaže QR kódy)">
                                                        <FontAwesomeIcon icon={faLockOpen} />
                                                    </Button>
                                                </>
                                            )}
                                            {!isMember && !isOrdered && !isLocked && (
                                                <Button variant="outline-success" size="sm" onClick={() => handleJoin(group.id)}>
                                                    <FontAwesomeIcon icon={faUserPlus} className="me-1" />
                                                    Přidat se
                                                </Button>
                                            )}
                                        </div>
                                    </Card.Header>
                                    <Card.Body className="p-0">
                                        <Table className="mb-0" size="sm">
                                            <thead>
                                                <tr>
                                                    <th>Člen</th>
                                                    <th style={{ width: 180 }}>Částka (bez slev)</th>
                                                    <th style={{ width: 220 }}>Příplatek</th>
                                                    <th>Poznámka</th>
                                                    <th style={{ width: 160 }}>Celkem (s poplatky)</th>
                                                    <th style={{ width: 40 }}></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {memberEntries.map(([memberLogin, member]) => {
                                                    const key = `${group.id}:${memberLogin}`;
                                                    const editingAmount = key in editAmounts;
                                                    const editingNote = key in editNotes;
                                                    const editingSurcharge = key in editSurcharges;
                                                    const canEdit = canEditMember(group, memberLogin);
                                                    const memberTotal = getMemberTotal(member);
                                                    return (
                                                        <tr key={memberLogin}>
                                                            <td>
                                                                <span className="user-info">
                                                                    <strong>{memberLogin}</strong>
                                                                    {memberLogin === group.creatorLogin && (
                                                                        <OverlayTrigger placement="top" overlay={<Tooltip>Zakladatel / objednávající</Tooltip>}>
                                                                            <span className="ms-1"><FontAwesomeIcon icon={faBasketShopping} className="buyer-icon" /></span>
                                                                        </OverlayTrigger>
                                                                    )}
                                                                    {member.paid && (
                                                                        <OverlayTrigger placement="top" overlay={<Tooltip>Zaplaceno</Tooltip>}>
                                                                            <span className="ms-1"><FontAwesomeIcon icon={faCircleCheck} className="text-success" /></span>
                                                                        </OverlayTrigger>
                                                                    )}
                                                                </span>
                                                            </td>
                                                            <td>
                                                                {canEdit && editingAmount ? (
                                                                    <div className="d-flex gap-1">
                                                                        <Form.Control
                                                                            type="number"
                                                                            size="sm"
                                                                            value={editAmounts[key]}
                                                                            onChange={e => setEditAmounts(prev => ({ ...prev, [key]: e.target.value }))}
                                                                            onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveAmount(group.id, memberLogin); if (e.key === 'Escape') setEditAmounts(prev => { const n = { ...prev }; delete n[key]; return n; }); }}
                                                                            style={{ width: 95 }}
                                                                            autoFocus
                                                                        />
                                                                        <Button size="sm" variant="outline-success" onClick={() => handleSaveAmount(group.id, memberLogin)}>✓</Button>
                                                                    </div>
                                                                ) : (
                                                                    <span
                                                                        style={{ cursor: canEdit ? 'pointer' : undefined }}
                                                                        onClick={() => canEdit && setEditAmounts(prev => ({ ...prev, [key]: member.amount != null ? String(member.amount / 100) : '' }))}
                                                                        title={canEdit ? 'Klikněte pro úpravu' : undefined}
                                                                    >
                                                                        {member.amount != null ? `${member.amount / 100} Kč` : <span className="text-muted">—</span>}
                                                                    </span>
                                                                )}
                                                            </td>
                                                            <td>
                                                                {canEdit && editingSurcharge ? (
                                                                    <div className="d-flex gap-1">
                                                                        <Form.Control
                                                                            type="text"
                                                                            size="sm"
                                                                            placeholder="popis"
                                                                            value={editSurcharges[key]?.text ?? ''}
                                                                            onChange={e => setEditSurcharges(prev => ({ ...prev, [key]: { ...prev[key], text: e.target.value } }))}
                                                                            onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveSurcharge(group.id, memberLogin); if (e.key === 'Escape') setEditSurcharges(prev => { const n = { ...prev }; delete n[key]; return n; }); }}
                                                                            style={{ width: 80 }}
                                                                            autoFocus
                                                                        />
                                                                        <Form.Control
                                                                            type="number"
                                                                            size="sm"
                                                                            placeholder="Kč"
                                                                            value={editSurcharges[key]?.amount ?? ''}
                                                                            onChange={e => setEditSurcharges(prev => ({ ...prev, [key]: { ...prev[key], amount: e.target.value } }))}
                                                                            onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveSurcharge(group.id, memberLogin); if (e.key === 'Escape') setEditSurcharges(prev => { const n = { ...prev }; delete n[key]; return n; }); }}
                                                                            style={{ width: 60 }}
                                                                        />
                                                                        <Button size="sm" variant="outline-success" onClick={() => handleSaveSurcharge(group.id, memberLogin)}>✓</Button>
                                                                    </div>
                                                                ) : (
                                                                    <span
                                                                        style={{ cursor: canEdit ? 'pointer' : undefined }}
                                                                        onClick={() => canEdit && setEditSurcharges(prev => ({ ...prev, [key]: { text: member.surchargeText ?? '', amount: member.surchargeAmount != null ? String(member.surchargeAmount / 100) : '' } }))}
                                                                        title={canEdit ? 'Klikněte pro úpravu příplatku' : undefined}
                                                                    >
                                                                        {member.surchargeAmount != null && member.surchargeAmount > 0 ? (
                                                                            <small>{member.surchargeText ? `${member.surchargeText}: ` : ''}<strong>{member.surchargeAmount / 100} Kč</strong></small>
                                                                        ) : (
                                                                            <small className="text-muted">—</small>
                                                                        )}
                                                                    </span>
                                                                )}
                                                            </td>
                                                            <td>
                                                                {canEdit && editingNote ? (
                                                                    <div className="d-flex gap-1">
                                                                        <Form.Control
                                                                            type="text"
                                                                            size="sm"
                                                                            value={editNotes[key]}
                                                                            onChange={e => setEditNotes(prev => ({ ...prev, [key]: e.target.value }))}
                                                                            onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveNote(group.id, memberLogin); if (e.key === 'Escape') setEditNotes(prev => { const n = { ...prev }; delete n[key]; return n; }); }}
                                                                            autoFocus
                                                                        />
                                                                        <Button size="sm" variant="outline-success" onClick={() => handleSaveNote(group.id, memberLogin)}>✓</Button>
                                                                    </div>
                                                                ) : (
                                                                    <span
                                                                        style={{ cursor: canEdit ? 'pointer' : undefined }}
                                                                        onClick={() => canEdit && setEditNotes(prev => ({ ...prev, [key]: member.note ?? '' }))}
                                                                        title={canEdit ? 'Klikněte pro úpravu poznámky' : undefined}
                                                                    >
                                                                        <small className="text-muted">{member.note || '—'}</small>
                                                                    </span>
                                                                )}
                                                            </td>
                                                            <td className="text-end">
                                                                <small className={memberTotal > 0 ? 'fw-bold' : 'text-muted'}>
                                                                    {memberTotal > 0 ? `${memberTotal / 100} Kč` : '—'}
                                                                </small>
                                                            </td>
                                                            <td>
                                                                <div className="d-flex gap-1 justify-content-end">
                                                                    {canManageMembers(group) && (isCreator || memberLogin === login) && (memberLogin !== group.creatorLogin) && (
                                                                        <FontAwesomeIcon
                                                                            icon={faTrashCan}
                                                                            className="action-icon"
                                                                            title={memberLogin === login ? 'Odhlásit se' : 'Odebrat z skupiny'}
                                                                            onClick={() => refresh(() => removeGroupMember({ body: { id: group.id, login: memberLogin } }))}
                                                                        />
                                                                    )}
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    );
                                                })}
                                            </tbody>
                                            {(() => {
                                                const sumBase = memberEntries.reduce((sum, [, m]) => sum + (m.amount ?? 0) + (m.surchargeAmount ?? 0), 0);
                                                const dv = group.discountValue ?? 0;
                                                const totalDiscount = dv > 0
                                                    ? (group.discountType === 'percent' ? Math.round(sumBase * dv / 100) : dv)
                                                    : 0;
                                                const groupTotal = sumBase + totalFees - totalDiscount;
                                                return groupTotal > 0 ? (
                                                    <tfoot>
                                                        <tr style={{ fontWeight: 700, borderTop: '2px solid var(--luncher-border)' }}>
                                                            <td colSpan={4} className="text-end" style={{ fontSize: '0.9em' }}>Celkem za skupinu:</td>
                                                            <td className="text-end">{groupTotal / 100} Kč</td>
                                                            <td></td>
                                                        </tr>
                                                    </tfoot>
                                                ) : null;
                                            })()}
                                        </Table>

                                        {/* Souhrn poplatků a slevy */}
                                        {(totalFees > 0 || (group.discountValue != null && group.discountValue > 0)) && (
                                            <div className="px-3 py-2 border-top d-flex gap-3 flex-wrap" style={{ fontSize: '0.85em', color: 'var(--luncher-text-muted)' }}>
                                                {group.fees != null && group.fees > 0 && <span>Poplatky: <strong>{group.fees / 100} Kč</strong></span>}
                                                {group.shipping != null && group.shipping > 0 && <span>Doprava: <strong>{group.shipping / 100} Kč</strong></span>}
                                                {group.tip != null && group.tip > 0 && <span>Spropitné: <strong>{group.tip / 100} Kč</strong></span>}
                                                {feeShare > 0 && <span>→ <strong>{feeShare / 100} Kč</strong>/os.</span>}
                                                {group.discountValue != null && group.discountValue > 0 && (
                                                    <span className="text-success">
                                                        Sleva: <strong>{group.discountType === 'percent' ? `${group.discountValue}%` : `${group.discountValue / 100} Kč`}</strong>
                                                    </span>
                                                )}
                                            </div>
                                        )}

                                        {/* Časy objednání a doručení */}
                                        {isOrdered && (
                                            <div className="px-3 py-2 border-top">
                                                {isCreator && editingTimes ? (
                                                    <div className="d-flex align-items-center gap-3 flex-wrap">
                                                        <div className="d-flex align-items-center gap-1">
                                                            <small className="text-muted text-nowrap">Objednáno v:</small>
                                                            <Form.Control
                                                                type="text"
                                                                size="sm"
                                                                placeholder="HH:MM"
                                                                value={editTimes[group.id]?.orderedAt ?? ''}
                                                                onChange={e => setEditTimes(prev => ({ ...prev, [group.id]: { ...prev[group.id], orderedAt: e.target.value } }))}
                                                                onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveTimes(group); }}
                                                                style={{ width: 75 }}
                                                                autoFocus
                                                            />
                                                        </div>
                                                        <div className="d-flex align-items-center gap-1">
                                                            <small className="text-muted text-nowrap">Doručení v:</small>
                                                            <Form.Control
                                                                type="text"
                                                                size="sm"
                                                                placeholder="HH:MM"
                                                                value={editTimes[group.id]?.deliveryAt ?? ''}
                                                                onChange={e => setEditTimes(prev => ({ ...prev, [group.id]: { ...prev[group.id], deliveryAt: e.target.value } }))}
                                                                onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveTimes(group); }}
                                                                style={{ width: 75 }}
                                                            />
                                                        </div>
                                                        <Button size="sm" variant="outline-success" onClick={() => handleSaveTimes(group)}>Uložit</Button>
                                                        <Button size="sm" variant="outline-secondary" onClick={() => setEditTimes(prev => { const n = { ...prev }; delete n[group.id]; return n; })}>Zrušit</Button>
                                                    </div>
                                                ) : (
                                                    <div
                                                        className="d-flex align-items-center gap-3 flex-wrap"
                                                        style={{ cursor: isCreator ? 'pointer' : undefined }}
                                                        onClick={() => isCreator && setEditTimes(prev => ({ ...prev, [group.id]: { orderedAt: group.orderedAt ?? '', deliveryAt: group.deliveryAt ?? '' } }))}
                                                        title={isCreator ? 'Klikněte pro úpravu časů' : undefined}
                                                    >
                                                        <small className="text-muted">
                                                            Objednáno v: <strong>{group.orderedAt ?? '—'}</strong>
                                                        </small>
                                                        <small className="text-muted">
                                                            Doručení v: <strong>{group.deliveryAt ?? '—'}</strong>
                                                        </small>
                                                    </div>
                                                )}
                                            </div>
                                        )}
                                    </Card.Body>
                                </Card>
                            );
                        })}
                    </div>
                </div>
            </div>
            <Footer />

            {/* Potvrzovací dialog pro přechod do stavu Objednáno */}
            <Modal show={!!confirmOrderGroup} onHide={() => setConfirmOrderGroup(null)} centered>
                <Modal.Header closeButton>
                    <Modal.Title>Potvrdit objednání</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    Opravdu chcete označit skupinu <strong>{confirmOrderGroup?.name}</strong> jako objednanou?
                    Tato akce uzavře skupinu a zaznamená čas objednání.
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={() => setConfirmOrderGroup(null)}>Zrušit</Button>
                    <Button variant="primary" onClick={() => confirmOrderGroup && handleConfirmOrdered(confirmOrderGroup)}>
                        Objednáno
                    </Button>
                </Modal.Footer>
            </Modal>

            <StoreAdminModal
                isOpen={adminModalOpen}
                onClose={() => setAdminModalOpen(false)}
                stores={stores}
                onStoresChanged={updated => setData(prev => prev ? { ...prev, stores: updated } : prev)}
            />

            {payModal && settings?.bankAccount && settings?.holderName && (
                <PayForGroupModal
                    isOpen={!!payModal}
                    onClose={() => setPayModal(null)}
                    onSuccess={fetchData}
                    group={payModal}
                    groupId={payModal.id}
                    payerLogin={auth.login}
                    bankAccount={settings.bankAccount}
                    bankAccountHolder={settings.holderName}
                />
            )}

            {feesModal && (
                <EditGroupFeesModal
                    isOpen={!!feesModal}
                    onClose={() => setFeesModal(null)}
                    group={feesModal}
                    onSaved={newData => {
                        if (newData) {
                            setData(newData);
                            socket.emit?.('message', newData as ClientData);
                        }
                        setFeesModal(null);
                    }}
                />
            )}
        </div>
    );
}