feat: spin the wheel, objednavani scrape menu, historie cen

2026-09-23 15:41:15 +02:00
1 parent 682deaf20b
commit e281615cc3
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { Modal, Button, Form } from "react-bootstrap"
-import { useSettings, ThemePreference } from "../../context/settings";
+import { useSettings, ThemePreference, StyleTheme, STYLE_THEMES } from "../../context/settings";
 import { NotificationSettings, UdalostEnum, getNotificationSettings, updateNotificationSettings } from "../../../../types";
 import { useAuth } from "../../context/auth";
 import { subscribeToPush, unsubscribeFromPush } from "../../hooks/usePushReminder";
@@ -19,6 +19,7 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
    const nameRef = useRef<HTMLInputElement>(null);
    const hideSoupsRef = useRef<HTMLInputElement>(null);
    const themeRef = useRef<HTMLSelectElement>(null);
+    const styleThemeRef = useRef<HTMLSelectElement>(null);

    const reminderTimeRef = useRef<HTMLInputElement>(null);
    const boltDeliveredRef = useRef<HTMLInputElement>(null);
@@ -75,6 +76,9 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
        }

        // Uložení ostatních nastavení (localStorage)
+        if (styleThemeRef.current?.value) {
+            settings?.setStyleTheme(styleThemeRef.current.value as StyleTheme);
+        }
        onSave(
            bankAccountRef.current?.value,
            nameRef.current?.value,
@@ -90,6 +94,12 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
            </Modal.Header>
            <Modal.Body>
                <h4>Vzhled</h4>
+                <Form.Group className="mb-3">
+                    <Form.Label>Styl</Form.Label>
+                    <Form.Select ref={styleThemeRef} defaultValue={settings?.styleTheme}>
+                        {STYLE_THEMES.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
+                    </Form.Select>
+                </Form.Group>
                <Form.Group className="mb-3">
                    <Form.Label>Barevný motiv</Form.Label>
                    <Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
@@ -0,0 +1,546 @@
+// Barvy výsečí — jednoduchý styl odvozuje odstíny od primární barvy,
+// styl Umamusume je přebíjí vlastní paletou (viz níže)
+:root {
+  --wheel-c0: var(--luncher-primary);
+  --wheel-c1: #0ea5e9;
+  --wheel-c2: #f59e0b;
+  --wheel-c3: #8b5cf6;
+  --wheel-c4: #ec4899;
+  --wheel-c5: #14b8a6;
+  --wheel-label: #ffffff;
+  --wheel-rim: var(--luncher-text);
+  --wheel-hub: var(--luncher-bg-card);
+}
+
+.spin-wheel-modal {
+  .spin-steps {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 12px;
+    font-size: 0.85rem;
+    font-weight: 700;
+
+    span {
+      padding: 4px 12px;
+      border-radius: 999px;
+      background: var(--luncher-bg-hover);
+      color: var(--luncher-text-muted);
+
+      &.active {
+        background: var(--luncher-primary);
+        color: #fff;
+      }
+
+      &.done {
+        background: var(--luncher-primary-light);
+        color: var(--luncher-primary);
+      }
+    }
+  }
+
+  .spin-source-info {
+    align-self: center;
+    margin-left: 4px;
+    color: var(--luncher-text-muted);
+    font-weight: 600;
+  }
+
+  .spin-steps {
+    flex-wrap: wrap;
+  }
+
+  // Přepínač zdroje jako segmentovaná „pilulka"
+  .spin-source {
+    display: inline-flex;
+    gap: 2px;
+    padding: 3px;
+    border-radius: 999px;
+    background: var(--luncher-bg-hover);
+
+    > .btn {
+      padding: 6px 16px;
+      font-size: 0.9rem;
+      border: none !important;
+      border-radius: 999px !important;
+      box-shadow: none !important;
+      margin: 0 !important;
+      transform: none !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--luncher-text-secondary);
+
+      &:hover {
+        background: var(--luncher-bg-card);
+        color: var(--luncher-primary);
+      }
+    }
+  }
+
+  .spin-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 240px;
+    gap: 20px;
+    align-items: start;
+
+    @media (max-width: 768px) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  .spin-wheel-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .spin-empty {
+    width: 100%;
+    max-width: 380px;
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 24px;
+    border: 2px dashed var(--luncher-border);
+    border-radius: 50%;
+    color: var(--luncher-text-muted);
+  }
+
+  .spin-result {
+    min-height: 1.6em;
+    font-size: 1.15rem;
+    text-align: center;
+    opacity: 0;
+    transform: translateY(6px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+
+    &.visible {
+      opacity: 1;
+      transform: none;
+    }
+
+    small {
+      color: var(--luncher-text-muted);
+    }
+  }
+
+  .spin-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: center;
+  }
+
+  .spin-button {
+    min-width: 160px;
+  }
+
+  .spin-options {
+    border: 1px solid var(--luncher-border);
+    border-radius: var(--luncher-radius);
+    background: var(--luncher-bg);
+    max-height: 440px;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 4px;
+      overflow-y: auto;
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 6px;
+      border-radius: var(--luncher-radius-sm);
+      font-size: 0.85rem;
+
+      &:hover {
+        background: var(--luncher-bg-hover);
+      }
+    }
+  }
+
+  .spin-options-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--luncher-border);
+    font-weight: 700;
+    font-size: 0.85rem;
+  }
+
+  .spin-restore {
+    background: none;
+    border: none;
+    color: var(--luncher-primary);
+    font-size: 0.8rem;
+    font-weight: 600;
+    padding: 0;
+  }
+
+  .spin-dot {
+    flex: none;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+  }
+
+  .spin-option-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .spin-option-kind {
+    color: var(--luncher-text-muted);
+    font-size: 0.7rem;
+  }
+
+  .spin-remove {
+    flex: none;
+    background: none;
+    border: none;
+    color: var(--luncher-text-muted);
+    padding: 2px 6px;
+    border-radius: 4px;
+
+    &:hover:not(:disabled) {
+      color: var(--luncher-danger);
+      background: var(--luncher-bg-hover);
+    }
+  }
+}
+
+.spin-wheel {
+  position: relative;
+  width: 100%;
+  max-width: 380px;
+  aspect-ratio: 1;
+}
+
+.spin-wheel-svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  filter: drop-shadow(0 6px 12px rgb(0 0 0 / 0.18));
+}
+
+.spin-wheel-pointer {
+  position: absolute;
+  top: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  width: 0;
+  height: 0;
+  border-left: 14px solid transparent;
+  border-right: 14px solid transparent;
+  border-top: 26px solid var(--luncher-danger);
+  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.3));
+}
+
+.spin-wheel-rim {
+  fill: var(--wheel-rim);
+}
+
+.spin-wheel-hub {
+  fill: var(--wheel-hub);
+  stroke: var(--wheel-rim);
+  stroke-width: 4;
+}
+
+.spin-seg {
+  stroke: var(--wheel-hub);
+  stroke-width: 1.5;
+}
+
+.spin-seg-label {
+  fill: var(--wheel-label);
+  font-weight: 700;
+  pointer-events: none;
+  paint-order: stroke;
+  stroke: rgb(0 0 0 / 0.25);
+  stroke-width: 2px;
+}
+
+@for $i from 0 through 5 {
+  .spin-seg-#{$i} {
+    fill: var(--wheel-c#{$i});
+    background: var(--wheel-c#{$i});
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spin-wheel-svg {
+    transition-duration: 0.6s !important;
+  }
+}
+
+.spin-wheel-modal .modal-header {
+  gap: 12px;
+  flex-wrap: wrap;
+
+  .modal-title {
+    flex: 1;
+    min-width: 0;
+
+    h2 {
+      margin: 0;
+    }
+  }
+}
+
+// ============================================
+// STYL UMAMUSUME kola štěstí (dle stylu zvoleného v nastavení).
+// Trávník dostihové dráhy, růžové a nebeské akcenty, zlaté lemy,
+// zaoblené tučné písmo a „herní" tlačítka s vystouplým spodkem.
+// ============================================
+.spin-wheel-modal.spin-theme-umamusume {
+  --uma-font: 'M PLUS Rounded 1c', 'Nunito', 'Inter', sans-serif;
+  --uma-turf: #5cc23d;
+  --uma-turf-deep: #2e9a3a;
+  --uma-turf-shadow: #1f7a2c;
+  --uma-pink: #ff6fa3;
+  --uma-pink-deep: #e84d86;
+  --uma-gold: #ffc531;
+  --uma-panel: #f4fbef;
+  --uma-border: #c6ebb2;
+  --uma-text: #1d3322;
+  --wheel-c0: var(--uma-turf);
+  --wheel-c1: var(--uma-pink);
+  --wheel-c2: #43b8f0;
+  --wheel-c3: #f2a91a;
+  --wheel-c4: #a078f0;
+  --wheel-c5: #ff8a3d;
+  --wheel-rim: var(--uma-gold);
+  --wheel-hub: #ffffff;
+
+  font-family: var(--uma-font);
+
+  .modal-content {
+    border: 4px solid var(--uma-border);
+    border-radius: 22px;
+    overflow: hidden;
+    background-color: #fff;
+    background-image: repeating-linear-gradient(135deg, rgb(92 194 61 / 0.06) 0 16px, transparent 16px 32px);
+    color: var(--uma-text);
+  }
+
+  .modal-header {
+    background:
+      repeating-linear-gradient(115deg, rgb(255 255 255 / 0.13) 0 12px, transparent 12px 24px),
+      linear-gradient(90deg, var(--uma-turf-deep), var(--uma-turf));
+    border-bottom: 4px solid var(--uma-gold);
+
+    h2 {
+      color: #fff;
+      font-family: var(--uma-font);
+      font-weight: 800;
+      text-shadow: 0 2px 0 var(--uma-turf-shadow);
+    }
+
+    .btn-close {
+      filter: invert(1) grayscale(1) brightness(2);
+      opacity: 0.9;
+    }
+  }
+
+  .modal-footer {
+    border-top: 3px dashed var(--uma-border);
+  }
+
+  .spin-steps span {
+    font-family: var(--uma-font);
+    background: #e7f3e0;
+    color: #7c9a82;
+    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
+    border-radius: 0;
+    padding: 4px 18px;
+
+    &.active {
+      background: linear-gradient(90deg, var(--uma-pink-deep), var(--uma-pink));
+      color: #fff;
+    }
+
+    &.done {
+      background: var(--uma-turf);
+      color: #fff;
+    }
+  }
+
+  .btn {
+    font-family: var(--uma-font);
+    font-weight: 800;
+    border-radius: 999px;
+    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.2s ease;
+
+    &:active:not(:disabled) {
+      transform: translateY(3px);
+      box-shadow: 0 1px 0 var(--uma-btn-shadow, transparent);
+    }
+  }
+
+  .btn-primary {
+    --uma-btn-shadow: var(--uma-turf-shadow);
+    background: linear-gradient(180deg, #7ad85a, var(--uma-turf-deep));
+    box-shadow: 0 4px 0 var(--uma-turf-shadow);
+    color: #fff;
+    text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
+
+    &:disabled {
+      background: #b9cbbd;
+      box-shadow: 0 4px 0 #97aa9b;
+    }
+  }
+
+  .spin-button {
+    --uma-btn-shadow: #b8335f;
+    background: linear-gradient(180deg, #ff8db5, var(--uma-pink-deep));
+    box-shadow: 0 5px 0 #b8335f;
+    font-size: 1.15rem;
+    padding: 12px 36px;
+  }
+
+  .btn-outline-primary {
+    --uma-btn-shadow: var(--uma-border);
+    background: #fff;
+    border: 2px solid var(--uma-turf);
+    color: var(--uma-turf-deep);
+    box-shadow: 0 4px 0 var(--uma-border);
+
+    &:hover {
+      background: #eaf8e2;
+      color: var(--uma-turf-deep);
+    }
+  }
+
+  .btn-secondary {
+    --uma-btn-shadow: #d4ddd6;
+    background: #fff;
+    border: 2px solid #d4ddd6;
+    color: var(--uma-text);
+    box-shadow: 0 4px 0 #d4ddd6;
+  }
+
+  .spin-source {
+    background: #e7f3e0;
+
+    > .btn-primary {
+      background: linear-gradient(180deg, #7ad85a, var(--uma-turf-deep));
+      box-shadow: 0 2px 0 var(--uma-turf-shadow) !important;
+    }
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: var(--uma-turf-deep);
+
+      &:hover {
+        background: #fff;
+      }
+    }
+  }
+
+  .spin-result {
+    font-weight: 800;
+
+    strong {
+      color: var(--uma-pink-deep);
+    }
+  }
+
+  .spin-options {
+    background: var(--uma-panel);
+    border: 3px solid var(--uma-border);
+    border-radius: 16px;
+
+    li:hover {
+      background: #fff0f6;
+    }
+  }
+
+  .spin-options-header {
+    border-bottom: 3px solid var(--uma-border);
+    color: var(--uma-turf-deep);
+  }
+
+  .spin-empty {
+    border-color: var(--uma-border);
+  }
+
+  .spin-wheel-pointer {
+    border-top-color: var(--uma-pink-deep);
+  }
+
+  .spin-seg {
+    stroke: #fff;
+    stroke-width: 2.5;
+  }
+
+  .spin-seg-label {
+    font-family: var(--uma-font);
+    font-weight: 800;
+  }
+}
+
+// Tmavý režim — noční dostih pod reflektory
+[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-umamusume {
+  --uma-panel: #19223d;
+  --uma-border: #2c3a66;
+  --uma-text: #f3f6ff;
+  --wheel-hub: #19223d;
+
+  .modal-content {
+    background-color: #10172b;
+    background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.03) 0 16px, transparent 16px 32px);
+  }
+
+  .spin-steps span:not(.active):not(.done) {
+    background: #222d4f;
+    color: #7d89ad;
+  }
+
+  .btn-outline-primary, .btn-secondary {
+    background: #19223d;
+    color: #f3f6ff;
+  }
+
+  .spin-source {
+    background: #222d4f;
+
+    > .btn-outline-primary {
+      background: transparent;
+      color: #b8c2e0;
+
+      &:hover {
+        background: #19223d;
+        color: #fff;
+      }
+    }
+  }
+
+  .spin-options li:hover {
+    background: #2a2344;
+  }
+}
+
+// Ikona kola se při najetí pootočí
+.spin-wheel-icon {
+  transition: transform 0.4s ease !important;
+
+  &:hover {
+    transform: rotate(180deg) scale(1.15) !important;
+  }
+}
@@ -0,0 +1,393 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Modal, Button, ButtonGroup } from "react-bootstrap";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark, faRotateLeft } from "@fortawesome/free-solid-svg-icons";
+import { Restaurant, RestaurantDayMenuMap, Store, StoreMenu, StoreMenuSource, getStoreMenu, listStores } from "../../../../types";
+import { getLunchChoiceName } from "../../enums";
+import WheelConfetti from "../WheelConfetti";
+import { useSettings } from "../../context/settings";
+import "./SpinWheelModal.scss";
+
+/** Výsledek kola štěstí — buď jídlo z dnešního menu podniku, nebo jídlo z rozvozu. */
+export type WheelPick =
+    | { kind: 'menu', restaurant: Restaurant, foodIndex?: number, foodName?: string }
+    | { kind: 'store', store: string, dish?: string };
+
+type Source = 'all' | 'menu' | 'store';
+
+type Place = {
+    id: string,
+    label: string,
+    kind: 'menu' | 'store',
+    restaurant?: Restaurant,
+    /** Jídla dnešního menu; u rozvozu se nabídka dotahuje až při druhém kole. */
+    dishes: Dish[],
+};
+
+type Dish = { name: string, index?: number, price?: string };
+
+const SOURCE_LABELS: Record<StoreMenuSource, string> = {
+    bolt: 'Nabídka z Bolt Food',
+    wolt: 'Nabídka z Wolt',
+    history: 'Nabídku se nepodařilo stáhnout — jídla z historie objednávek',
+    none: 'Nabídku se nepodařilo stáhnout',
+};
+
+type Props = {
+    isOpen: boolean,
+    onClose: () => void,
+    menus?: RestaurantDayMenuMap,
+    onPick: (pick: WheelPick) => Promise<void>,
+};
+
+const SPIN_MS = 4800;
+const WHEEL_SIZE = 360;
+const RADIUS = WHEEL_SIZE / 2 - 6;
+const SEGMENT_COLORS = 6;
+const MAX_LABELED_SEGMENTS = 40;
+
+/** Kryptograficky náhodný index v rozsahu 0..n-1 (bez modulo zkreslení to u malých n nevadí). */
+function randomIndex(n: number): number {
+    const buf = new Uint32Array(1);
+    crypto.getRandomValues(buf);
+    return buf[0] % n;
+}
+
+function truncate(text: string, max: number): string {
+    return text.length > max ? text.slice(0, max - 1) + '…' : text;
+}
+
+/** Bod na kružnici; úhel ve stupních měřený od „12 hodin" po směru hodinových ručiček. */
+function polar(angle: number, r: number) {
+    const rad = (angle - 90) * Math.PI / 180;
+    return { x: WHEEL_SIZE / 2 + r * Math.cos(rad), y: WHEEL_SIZE / 2 + r * Math.sin(rad) };
+}
+
+function segmentPath(start: number, end: number): string {
+    const c = WHEEL_SIZE / 2;
+    if (end - start >= 360) {
+        return `M ${c} ${c - RADIUS} A ${RADIUS} ${RADIUS} 0 1 1 ${c - 0.01} ${c - RADIUS} Z`;
+    }
+    const a = polar(start, RADIUS);
+    const b = polar(end, RADIUS);
+    const large = end - start > 180 ? 1 : 0;
+    return `M ${c} ${c} L ${a.x} ${a.y} A ${RADIUS} ${RADIUS} 0 ${large} 1 ${b.x} ${b.y} Z`;
+}
+
+type WheelProps = {
+    labels: string[],
+    rotation: number,
+    spinning: boolean,
+    onSpinEnd: () => void,
+};
+
+function Wheel({ labels, rotation, spinning, onSpinEnd }: Readonly<WheelProps>) {
+    const n = labels.length;
+    const angle = 360 / Math.max(n, 1);
+    const fontSize = n > 24 ? 8.5 : n > 14 ? 10 : n > 8 ? 12 : 14;
+    const maxChars = n > 24 ? 26 : n > 14 ? 24 : 20;
+    // U velkých nabídek jsou popisky nečitelné — názvy jsou v seznamu vedle kola
+    const showLabels = n <= MAX_LABELED_SEGMENTS;
+    return (
+        <div className="spin-wheel">
+            <div className="spin-wheel-pointer" aria-hidden />
+            <svg
+                viewBox={`0 0 ${WHEEL_SIZE} ${WHEEL_SIZE}`}
+                className="spin-wheel-svg"
+                style={{
+                    transform: `rotate(${rotation}deg)`,
+                    transition: spinning ? `transform ${SPIN_MS}ms cubic-bezier(0.12, 0.72, 0.16, 1)` : 'none',
+                }}
+                onTransitionEnd={e => { if (e.propertyName === 'transform') onSpinEnd(); }}
+                role="img"
+                aria-label={`Kolo s ${n} možnostmi`}
+            >
+                <circle cx={WHEEL_SIZE / 2} cy={WHEEL_SIZE / 2} r={RADIUS + 4} className="spin-wheel-rim" />
+                {labels.map((label, i) => {
+                    const start = i * angle;
+                    const mid = start + angle / 2;
+                    return (
+                        <g key={`${i}-${label}`}>
+                            <path d={segmentPath(start, start + angle)} className={`spin-seg spin-seg-${i % SEGMENT_COLORS}`} />
+                            {showLabels && <text
+                                x={WHEEL_SIZE / 2 + 34}
+                                y={WHEEL_SIZE / 2}
+                                transform={`rotate(${mid - 90} ${WHEEL_SIZE / 2} ${WHEEL_SIZE / 2})`}
+                                dominantBaseline="middle"
+                                fontSize={fontSize}
+                                className="spin-seg-label"
+                            >
+                                {truncate(label, maxChars)}
+                            </text>}
+                        </g>
+                    );
+                })}
+                <circle cx={WHEEL_SIZE / 2} cy={WHEEL_SIZE / 2} r={26} className="spin-wheel-hub" />
+            </svg>
+        </div>
+    );
+}
+
+/**
+ * Kolo štěstí pro nerozhodnuté: první kolo vybere podnik (dnešní menu nebo rozvoz),
+ * druhé kolo jídlo z něj (bez polévek). Možnosti lze z kola průběžně vyřazovat.
+ */
+export default function SpinWheelModal({ isOpen, onClose, menus, onPick }: Readonly<Props>) {
+    const [stores, setStores] = useState<Store[]>();
+    const [storeMenus, setStoreMenus] = useState<Record<string, StoreMenu | 'loading' | 'error'>>({});
+    const [source, setSource] = useState<Source>('all');
+    const [excludedPlaces, setExcludedPlaces] = useState<Set<string>>(new Set());
+    const [excludedDishes, setExcludedDishes] = useState<Set<string>>(new Set());
+    const [place, setPlace] = useState<Place>();
+    const [dish, setDish] = useState<Dish>();
+    const [phase, setPhase] = useState<'place' | 'dish'>('place');
+    const [rotation, setRotation] = useState(0);
+    const [spinning, setSpinning] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [respinRequested, setRespinRequested] = useState(false);
+    const theme = useSettings()?.styleTheme ?? 'simple';
+    const [confetti, setConfetti] = useState<{ key: number, big: boolean }>({ key: 0, big: false });
+    const pendingResult = useRef<number>(undefined);
+
+    useEffect(() => {
+        if (isOpen && !stores) {
+            listStores().then(r => setStores(r.data ?? [])).catch(() => setStores([]));
+        }
+    }, [isOpen, stores]);
+
+    const allPlaces = useMemo<Place[]>(() => {
+        const result: Place[] = [];
+        for (const key of Object.keys(Restaurant) as Restaurant[]) {
+            const menu = menus?.[key];
+            if (!menu || menu.closed || !menu.food?.length) continue;
+            const dishes = menu.food
+                .map((f, index) => ({ name: f.name, index, price: f.price, isSoup: f.isSoup }))
+                .filter(f => !f.isSoup)
+                .map(({ name, index, price }) => ({ name, index, price }));
+            result.push({ id: `menu:${key}`, label: getLunchChoiceName(key), kind: 'menu', restaurant: key, dishes });
+        }
+        for (const s of stores ?? []) {
+            result.push({ id: `store:${s.name}`, label: s.name, kind: 'store', dishes: [] });
+        }
+        return result;
+    }, [menus, stores]);
+
+    const storeMenu = place?.kind === 'store' ? storeMenus[place.label] : undefined;
+    const allDishes = useMemo<Dish[]>(() => {
+        if (place?.kind !== 'store') return place?.dishes ?? [];
+        if (!storeMenu || typeof storeMenu === 'string') return [];
+        return storeMenu.dishes
+            .filter(d => d.isMain !== false)
+            .map(d => ({ name: d.name, price: d.price != null ? `${d.price} Kč` : undefined }));
+    }, [place, storeMenu]);
+
+    const places = useMemo(
+        () => allPlaces.filter(p => (source === 'all' || p.kind === source) && !excludedPlaces.has(p.id)),
+        [allPlaces, source, excludedPlaces],
+    );
+    const dishes = useMemo(
+        () => allDishes.filter(d => !excludedDishes.has(`${place?.id}|${d.name}`)),
+        [place, allDishes, excludedDishes],
+    );
+
+    const wheelItems = phase === 'place' ? places.map(p => p.label) : dishes.map(d => d.name);
+    const result = phase === 'place' ? place : dish;
+
+    const resetWheel = () => {
+        setSpinning(false);
+        setRotation(r => r % 360);
+    };
+
+    const spin = () => {
+        const n = wheelItems.length;
+        if (n === 0 || spinning) return;
+        const index = randomIndex(n);
+        const angle = 360 / n;
+        const jitter = (Math.random() - 0.5) * angle * 0.6;
+        const target = 360 - (index * angle + angle / 2) + jitter;
+        const turns = 5 + randomIndex(3);
+        pendingResult.current = index;
+        if (phase === 'place') setPlace(undefined); else setDish(undefined);
+        setSpinning(true);
+        setRotation(r => r - (r % 360) + turns * 360 + ((target % 360) + 360) % 360);
+    };
+
+    const handleSpinEnd = () => {
+        const index = pendingResult.current;
+        if (index == null) return;
+        pendingResult.current = undefined;
+        setSpinning(false);
+        if (phase === 'place') setPlace(places[index]);
+        else setDish(dishes[index]);
+        setConfetti(c => ({ key: c.key + 1, big: phase === 'dish' }));
+    };
+
+    const goToDishes = () => {
+        if (place?.kind === 'store' && (!storeMenus[place.label] || storeMenus[place.label] === 'error')) {
+            const name = place.label;
+            setStoreMenus(prev => ({ ...prev, [name]: 'loading' }));
+            getStoreMenu({ query: { name } })
+                .then(r => setStoreMenus(prev => ({ ...prev, [name]: r.data ?? 'error' })))
+                .catch(() => setStoreMenus(prev => ({ ...prev, [name]: 'error' })));
+        }
+        setDish(undefined);
+        setPhase('dish');
+        resetWheel();
+    };
+
+    const backToPlaces = () => {
+        setDish(undefined);
+        setPlace(undefined);
+        setPhase('place');
+        resetWheel();
+    };
+
+    const removeOption = (i: number) => {
+        if (spinning) return;
+        if (phase === 'place') {
+            const p = places[i];
+            setExcludedPlaces(prev => new Set(prev).add(p.id));
+            if (place?.id === p.id) setPlace(undefined);
+        } else if (place) {
+            const d = dishes[i];
+            setExcludedDishes(prev => new Set(prev).add(`${place.id}|${d.name}`));
+            if (dish?.name === d.name) setDish(undefined);
+        }
+    };
+
+    const removeResultAndRespin = () => {
+        const i = phase === 'place' ? places.findIndex(p => p.id === place?.id) : dishes.findIndex(d => d.name === dish?.name);
+        if (i < 0) return;
+        removeOption(i);
+        setRespinRequested(true);
+    };
+
+    // Po vyřazení se kolo překreslí s menším počtem výsečí — roztočíme ho až nad novými daty
+    useEffect(() => {
+        if (respinRequested) {
+            setRespinRequested(false);
+            spin();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [respinRequested]);
+
+    const restoreAll = () => {
+        if (phase === 'place') setExcludedPlaces(new Set());
+        else if (place) setExcludedDishes(prev => new Set([...prev].filter(k => !k.startsWith(`${place.id}|`))));
+    };
+
+    const accept = async () => {
+        if (!place) return;
+        setSaving(true);
+        try {
+            if (place.kind === 'menu') {
+                await onPick({ kind: 'menu', restaurant: place.restaurant!, foodIndex: dish?.index, foodName: dish?.name });
+            } else {
+                await onPick({ kind: 'store', store: place.label, dish: dish?.name });
+            }
+            onClose();
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    const excludedCount = phase === 'place'
+        ? allPlaces.filter(p => (source === 'all' || p.kind === source) && excludedPlaces.has(p.id)).length
+        : allDishes.length - dishes.length;
+    const menuLoading = phase === 'dish' && storeMenu === 'loading';
+
+    return (
+        <Modal show={isOpen} onHide={onClose} size="lg" className={`spin-wheel-modal spin-theme-${theme}`}>
+            <Modal.Header closeButton>
+                <Modal.Title>
+                    <h2>{phase === 'place' ? 'Kolo štěstí: kam?' : `Kolo štěstí: co v ${place?.label}?`}</h2>
+                </Modal.Title>
+            </Modal.Header>
+            <WheelConfetti theme={theme} burstKey={confetti.key} big={confetti.big} />
+            <Modal.Body>
+                <div className="spin-steps">
+                    <span className={phase === 'place' ? 'active' : 'done'}>1. Podnik</span>
+                    <span className={phase === 'dish' ? 'active' : ''}>2. Jídlo</span>
+                    {phase === 'dish' && storeMenu && typeof storeMenu !== 'string' && (
+                        <small className="spin-source-info">{SOURCE_LABELS[storeMenu.source]}</small>
+                    )}
+                </div>
+                {phase === 'place' && (
+                    <ButtonGroup className="spin-source mb-3" aria-label="Zdroj podniků">
+                        {([['all', 'Vše'], ['menu', 'Dnešní menu'], ['store', 'Rozvoz']] as [Source, string][]).map(([value, label]) => (
+                            <Button key={value} variant={source === value ? 'primary' : 'outline-primary'} disabled={spinning}
+                                onClick={() => { setSource(value); setPlace(undefined); }}>
+                                {label}
+                            </Button>
+                        ))}
+                    </ButtonGroup>
+                )}
+                <div className="spin-layout">
+                    <div className="spin-wheel-column">
+                        {(phase === 'place' && !stores) || menuLoading ? (
+                            <div className="spin-empty">{menuLoading ? 'Stahuji nabídku podniku…' : 'Načítám podniky…'}</div>
+                        ) : wheelItems.length === 0 ? (
+                            <div className="spin-empty">
+                                {phase === 'dish'
+                                    ? 'Tady nemáme žádná jídla k točení — vyber si na místě.'
+                                    : 'Na kole nezbyla žádná možnost.'}
+                            </div>
+                        ) : (
+                            <Wheel labels={wheelItems} rotation={rotation} spinning={spinning} onSpinEnd={handleSpinEnd} />
+                        )}
+                        <div className={`spin-result${result ? ' visible' : ''}`} aria-live="polite">
+                            {result && (phase === 'place'
+                                ? <>Padlo: <strong>{place!.label}</strong> <small>({place!.kind === 'menu' ? 'dnešní menu' : 'rozvoz'})</small></>
+                                : <>Padlo: <strong>{dish!.name}</strong>{dish!.price && <small> ({dish!.price})</small>}</>)}
+                        </div>
+                        <div className="spin-actions">
+                            <Button onClick={spin} disabled={spinning || wheelItems.length === 0} className="spin-button">
+                                {spinning ? 'Točí se…' : result ? 'Točit znovu' : 'Roztočit!'}
+                            </Button>
+                            {result && !spinning && wheelItems.length > 1 && (
+                                <Button variant="outline-primary" onClick={removeResultAndRespin}>Vyřadit a točit znovu</Button>
+                            )}
+                        </div>
+                    </div>
+                    <div className="spin-options">
+                        <div className="spin-options-header">
+                            <span>Na kole ({wheelItems.length})</span>
+                            {excludedCount > 0 && (
+                                <button className="spin-restore" onClick={restoreAll} disabled={spinning} title="Vrátit vyřazené možnosti">
+                                    <FontAwesomeIcon icon={faRotateLeft} /> Vrátit {excludedCount}
+                                </button>
+                            )}
+                        </div>
+                        <ul>
+                            {wheelItems.map((label, i) => (
+                                <li key={`${i}-${label}`}>
+                                    <span className={`spin-dot spin-seg-${i % SEGMENT_COLORS}`} />
+                                    <span className="spin-option-label" title={label}>{label}</span>
+                                    {phase === 'place'
+                                        ? <small className="spin-option-kind">{places[i].kind === 'menu' ? 'menu' : 'rozvoz'}</small>
+                                        : dishes[i].price && <small className="spin-option-kind">{dishes[i].price}</small>}
+                                    <button className="spin-remove" onClick={() => removeOption(i)} disabled={spinning}
+                                        title={`Vyřadit z kola: ${label}`} aria-label={`Vyřadit ${label}`}>
+                                        <FontAwesomeIcon icon={faXmark} />
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            </Modal.Body>
+            <Modal.Footer>
+                {phase === 'dish' && <Button variant="secondary" onClick={backToPlaces} disabled={spinning}>Zpět na podniky</Button>}
+                {phase === 'place' && place && !spinning && (
+                    <Button variant="outline-primary" onClick={accept} disabled={saving}>Beru jen podnik</Button>
+                )}
+                {phase === 'place' && place && !spinning && (
+                    <Button onClick={goToDishes}>Dál: točit jídlo</Button>
+                )}
+                {phase === 'dish' && !spinning && (dish || dishes.length === 0) && (
+                    <Button onClick={accept} disabled={saving}>{dish ? 'Beru to!' : 'Beru podnik'}</Button>
+                )}
+            </Modal.Footer>
+        </Modal>
+    );
+}
@@ -1,9 +1,11 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Modal, Button, Form, ListGroup, Alert } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTrashCan } from "@fortawesome/free-regular-svg-icons";
-import { faPen, faPlus, faUpRightFromSquare, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { addStore, deleteStore, updateStore, Store } from "../../../../types";
+import { faArrowsRotate, faPen, faPlus, faUpRightFromSquare, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { addStore, deleteStore, updateStore, getStoreMenuStatus, refreshStoreMenu, Store, StoreMenuProvider, StoreScrapeInfo, StoreScrapeStatus } from "../../../../types";
+import { getHumanDateTime } from "../../Utils";
+import PriceHistory from "../PriceHistory";
 import { getStoreUrls, storeUrlLabel } from "../../utils/storeUrls";

 type Props = {
@@ -20,6 +22,23 @@ type EditState = {
    urls: string[];
 };

+const PROVIDER_LABELS: Record<StoreMenuProvider, string> = { bolt: 'Bolt Food', wolt: 'Wolt' };
+
+/** Krátký popis stavu stahování nabídky od jedné služby. */
+function describeScrape(p: StoreScrapeStatus): { text: string, className: string, title?: string } {
+    const when = (iso?: string) => iso ? getHumanDateTime(new Date(iso)) : '';
+    switch (p.state) {
+        case 'ok':
+            return { text: `${p.dishCount} hlavních jídel (${when(p.lastSuccessAt)})${p.lastError ? ` · poslední obnovení selhalo: ${p.lastError}` : ''}`, className: 'text-success' };
+        case 'failed':
+            return { text: `selhalo ${p.failures}× (${when(p.lastAttemptAt)}): ${p.lastError ?? ''} · zkusí se znovu`, className: 'text-warning' };
+        case 'blocked':
+            return { text: `zablokováno po ${p.failures} neúspěších (${when(p.lastAttemptAt)}): ${p.lastError ?? ''}`, className: 'text-danger' };
+        default:
+            return { text: 'nestaženo', className: 'text-muted', title: 'Stáhne se automaticky, až bude nabídka potřeba v kole štěstí (a žádná jiná služba ji nemá)' };
+    }
+}
+
 /** Vstupní pole pro URL nabídek — vždy alespoň jedno prázdné, aby bylo kam psát. */
 function toUrlInputs(urls: string[]): string[] {
    return urls.length > 0 ? urls : [''];
@@ -33,6 +52,38 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
    const [heslo, setHeslo] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
+    const [scrapeInfo, setScrapeInfo] = useState<Record<string, StoreScrapeInfo>>({});
+    const [refreshing, setRefreshing] = useState<string | null>(null);
+    // Rozbalená historie cen („obchod|služba")
+    const [historyOpen, setHistoryOpen] = useState<string | null>(null);
+
+    // Stav stahování nabídek (Bolt Food/Wolt) — při otevření a po změně seznamu obchodů
+    useEffect(() => {
+        if (!isOpen) return;
+        getStoreMenuStatus().then(res => {
+            setScrapeInfo(Object.fromEntries((res.data ?? []).map(i => [i.store, i])));
+        }).catch(() => { /* stav je jen informativní */ });
+    }, [isOpen, stores]);
+
+    const handleRefreshMenu = async (name: string, provider: StoreMenuProvider) => {
+        setError(null);
+        setRefreshing(`${name}|${provider}`);
+        try {
+            const res = await refreshStoreMenu({ body: { name, provider, heslo } });
+            if (res.data) {
+                setScrapeInfo(prev => ({ ...prev, [name]: res.data! }));
+            }
+            // Znovu načíst případně otevřenou historii (mohla přibýt nová verze)
+            if (historyOpen === `${name}|${provider}`) {
+                setHistoryOpen(null);
+                setTimeout(() => setHistoryOpen(`${name}|${provider}`));
+            }
+        } catch (e: any) {
+            setError(e.message || 'Nastala chyba');
+        } finally {
+            setRefreshing(null);
+        }
+    };

    const addUrlRow = (urls: string[]) => [...urls, ''];

@@ -147,7 +198,7 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
    );

    return (
-        <Modal show={isOpen} onHide={onClose}>
+        <Modal show={isOpen} onHide={onClose} size="lg">
            <Modal.Header closeButton>
                <Modal.Title><h2>Správa obchodů</h2></Modal.Title>
            </Modal.Header>
@@ -244,6 +295,35 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
                                                ))}
                                            </small>
                                        )}
+                                        {scrapeInfo[s.name]?.providers.map(p => {
+                                            const { text, className, title } = describeScrape(p);
+                                            const key = `${s.name}|${p.provider}`;
+                                            return (
+                                                <div key={p.provider}>
+                                                <small className="d-flex align-items-baseline gap-2 mt-1">
+                                                    <span className="text-nowrap text-muted">Menu {PROVIDER_LABELS[p.provider]}:</span>
+                                                    <span className={className} title={title}>{text}</span>
+                                                    <Button
+                                                        variant="link"
+                                                        size="sm"
+                                                        className="p-0"
+                                                        disabled={!heslo || refreshing != null}
+                                                        title={heslo ? `Znovu stáhnout nabídku z ${PROVIDER_LABELS[p.provider]}` : 'Pro obnovení zadejte admin heslo'}
+                                                        onClick={() => handleRefreshMenu(s.name, p.provider)}
+                                                    >
+                                                        <FontAwesomeIcon icon={faArrowsRotate} spin={refreshing === key} />
+                                                    </Button>
+                                                    {p.dishCount > 0 && (
+                                                        <Button variant="link" size="sm" className="p-0 text-nowrap"
+                                                            onClick={() => setHistoryOpen(historyOpen === key ? null : key)}>
+                                                            {historyOpen === key ? 'skrýt historii' : 'historie cen'}
+                                                        </Button>
+                                                    )}
+                                                </small>
+                                                {historyOpen === key && <PriceHistory store={s.name} provider={p.provider} />}
+                                                </div>
+                                            );
+                                        })}
                                    </div>
                                    <div className="d-flex gap-3">
                                        <FontAwesomeIcon