'use client';

import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { gsap } from 'gsap';
import {
  getMenuPosterCandidates,
  getMenuPosterSrc,
  getMenuVideoSources,
  applyNextImageFallback,
} from '@/lib/assets';
import { menuCategories, allMenuItems, type MenuItem, type MenuCategory } from '@/lib/menu-data';
import { useLanguage } from '@/lib/language-context';
import { getTranslation } from '@/lib/translations';

interface ScreenDisplayProps {
  screen: 1 | 2;
}

const SCREEN1_CATEGORY_IDS = ['street-food', 'vegetarian', 'meat', 'chicken', 'burger-sandwich'];
const SCREEN2_CATEGORY_IDS = ['pizza', 'naan-roll', 'sweets', 'drinks'];

function SpiceParticles() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d', { alpha: true });
    if (!ctx) return;

    let width = window.innerWidth;
    let height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;

    const particles = Array.from({ length: 42 }, () => ({
      x: Math.random() * width,
      y: Math.random() * height * 0.9,
      vx: (Math.random() - 0.5) * 0.22,
      vy: -0.12 - Math.random() * 0.22,
      size: 1.1 + Math.random() * 1.9,
      alpha: 0.12 + Math.random() * 0.22,
      phase: Math.random() * Math.PI * 2,
      speed: 0.018 + Math.random() * 0.012,
    }));

    const onResize = () => {
      width = window.innerWidth;
      height = window.innerHeight;
      canvas.width = width;
      canvas.height = height;
    };
    window.addEventListener('resize', onResize);

    let rafId: number;

    const draw = () => {
      ctx.clearRect(0, 0, width, height);

      for (let i = 0; i < particles.length; i++) {
        const p = particles[i];
        p.x += p.vx + Math.sin(p.phase) * 0.07;
        p.y += p.vy;
        p.phase += p.speed;

        if (p.y < -10) {
          p.y = height * 0.92 + Math.random() * 40;
          p.x = Math.random() * width;
        }
        if (p.x < 0) p.x = width;
        if (p.x > width) p.x = 0;

        ctx.fillStyle = `hsla(38, 68%, 52%, ${p.alpha})`;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
        ctx.fill();

        // occasional tiny sparkle
        if (Math.random() < 0.014) {
          ctx.fillStyle = `hsla(42, 90%, 78%, ${p.alpha * 0.9})`;
          ctx.fillRect(p.x - 0.6, p.y - 0.6, 1.2, 1.2);
        }
      }
      rafId = requestAnimationFrame(draw);
    };

    draw();

    return () => {
      cancelAnimationFrame(rafId);
      window.removeEventListener('resize', onResize);
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      className="fixed inset-0 pointer-events-none z-[2] opacity-70 mix-blend-multiply"
    />
  );
}

function MenuCard({ item, isHighlighted, t }: { item: MenuItem; isHighlighted?: boolean; t: any }) {
  const poster = getMenuPosterSrc(item, 'optimized');
  const desc = (t as any).menuDescriptions?.[item.id] || item.description || '';

  return (
    <motion.div
      className={`group relative flex flex-col overflow-hidden rounded-2xl border bg-white transition-all duration-300 ${
        isHighlighted
          ? 'border-[#B38B4D] ring-2 ring-[#B38B4D]/70 shadow-xl scale-[1.015] z-10'
          : 'border-[#EDE6D9] hover:border-[#B38B4D]/40'
      }`}
      animate={isHighlighted ? { scale: 1.015 } : { scale: 1 }}
      transition={{ type: 'spring', stiffness: 220, damping: 26 }}
    >
      <div className="relative h-36 bg-[#F2EDE4] overflow-hidden">
        <motion.img
          src={poster}
          alt={item.name}
          className="absolute inset-0 w-full h-full object-cover"
          animate={{ scale: [1, 1.018, 1] }}
          transition={{ duration: 8.5, repeat: Infinity, ease: 'easeInOut' }}
          onError={(e) => {
            applyNextImageFallback(
              e.currentTarget,
              getMenuPosterCandidates(item),
              e.currentTarget.src
            );
          }}
        />
        <div className="absolute inset-0 bg-gradient-to-b from-black/5 via-transparent to-black/35" />

        {/* Gold price pill */}
        <div className="absolute top-3 right-3 px-3 py-1 rounded-full bg-white/95 text-[#B38B4D] text-lg font-semibold tracking-tight shadow-sm border border-[#EDE6D9]">
          {item.price} <span className="text-[10px] font-normal tracking-widest align-super">KR</span>
        </div>

        {item.isVegetarian && (
          <div className="absolute top-3 left-3 text-[10px] px-2.5 py-0.5 rounded-full bg-[#3F5C4A]/90 text-white tracking-[1px]">
            VEG
          </div>
        )}
      </div>

      <div className="p-3.5 flex-1 flex flex-col">
        <div className="font-medium tracking-[-0.3px] text-[15px] leading-tight text-[#2C2A26] mb-1 line-clamp-1 group-hover:text-[#B38B4D] transition-colors">
          {item.name}
        </div>
        <p className="text-[#6B665F] text-[12px] leading-snug line-clamp-2 flex-1">
          {desc}
        </p>
      </div>
    </motion.div>
  );
}

export default function ScreenDisplay({ screen }: ScreenDisplayProps) {
  const { language } = useLanguage();
  const t = getTranslation(language);

  const screenLabel = screen === 1 ? t.screen.display1 : t.screen.display2;
  const isScreen1 = screen === 1;

  // Filtered data for this screen
  const screenCategories = useMemo(() => {
    const ids = isScreen1 ? SCREEN1_CATEGORY_IDS : SCREEN2_CATEGORY_IDS;
    return menuCategories.filter((c) => ids.includes(c.id));
  }, [isScreen1]);

  // Cycle through ALL items for this screen, one by one in the large hero (not just signatures)
  const cyclingItems = useMemo(() => {
    return screenCategories.flatMap((category) => category.items);
  }, [screenCategories]);

  // Cycling through all menu items (large top animation)
  const [currentIndex, setCurrentIndex] = useState(0);
  const current = cyclingItems[currentIndex] || cyclingItems[0];

  const heroTiltRef = useRef<HTMLDivElement>(null);

  // Auto cycle through every item (large top hero shows all, one by one)
  const CYCLE_INTERVAL_MS = 8200;
  useEffect(() => {
    const id = setInterval(() => {
      setCurrentIndex((i) => (i + 1) % cyclingItems.length);
    }, CYCLE_INTERVAL_MS);
    return () => clearInterval(id);
  }, [cyclingItems.length]);

  // Beautiful 3D tilt on hero (like signature cards on homepage)
  useEffect(() => {
    const el = heroTiltRef.current;
    if (!el) return;

    const onMouseMove = (e: MouseEvent) => {
      const rect = el.getBoundingClientRect();
      const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
      const y = ((e.clientY - rect.top) / rect.height - 0.5) * 2;

      gsap.to(el, {
        rotationY: x * 7,
        rotationX: -y * 5.5,
        transformPerspective: 1400,
        duration: 0.36,
        ease: 'power2.out',
        overwrite: true,
      });
    };

    const onMouseLeave = () => {
      gsap.to(el, {
        rotationY: 0,
        rotationX: 0,
        duration: 1.35,
        ease: 'elastic.out(1, 0.48)',
      });
    };

    el.addEventListener('mousemove', onMouseMove);
    el.addEventListener('mouseleave', onMouseLeave);

    return () => {
      el.removeEventListener('mousemove', onMouseMove);
      el.removeEventListener('mouseleave', onMouseLeave);
    };
  }, []);

  // Professional kiosk mode for screen1/screen2:
  // Force clean fullscreen-like window (no side scrollbars) even in F11 or kiosk browser.
  // Applies to html/body so the window itself has no scrollbar.
  // User zooms the browser in/out to change reel density (# visible items) instead of scrolling.
  // Cleanup restores previous state (good if ever navigating away in dev).
  useEffect(() => {
    const htmlEl = document.documentElement;
    const bodyEl = document.body;

    const prevHtmlClass = htmlEl.className;
    const prevBodyClass = bodyEl.className;
    const prevHtmlOverflow = htmlEl.style.overflow;
    const prevBodyOverflow = bodyEl.style.overflow;

    htmlEl.classList.add('screen-kiosk');
    bodyEl.classList.add('screen-kiosk');
    htmlEl.style.overflow = 'hidden';
    bodyEl.style.overflow = 'hidden';

    return () => {
      // restore
      htmlEl.style.overflow = prevHtmlOverflow;
      bodyEl.style.overflow = prevBodyOverflow;
      // remove only if we added (simple: toggle off)
      htmlEl.classList.remove('screen-kiosk');
      bodyEl.classList.remove('screen-kiosk');
    };
  }, []);

  const translatedDesc = current ? ((t as any).menuDescriptions?.[current.id] || current.description) : '';

  // =====================================================
  // CONTINUOUS MENU REEL (one line, loop like a film reel) - items move LEFT
  // Enter from RIGHT, exit LEFT. Number of visible items is dynamic (more when zoom out, fewer when zoom in).
  // The reel viewport is always full width (edge to edge, no max-w), no side whitespace.
  // Posters only (no videos) for seamless movement. Numbers for easy ordering (screen1:1-26, screen2:27+).
  // CSS marquee for stable seamless poster reel.
  // Card sizes fixed px for consistent distance viewing; # visible auto-adjusts to current container width on zoom.
  // Sized large for 43" TV distance viewing in restaurant.
  // =====================================================
  const allMenuItemsForReel = screenCategories.flatMap((c) => c.items);
  const numItems = allMenuItemsForReel.length;
  const startNumber = isScreen1 ? 1 : 27;
  // Duplicate for seamless infinite loop (scroll 50% to repeat perfectly)
  const reelItems = [...allMenuItemsForReel, ...allMenuItemsForReel];

  // Card width tuned for 43" screen (~1920px), 3 visible + gaps ~1872px at default zoom.
  // Poster 320px + bottom ~70px (py-5 + one-line name+right price) so cards fill the ~390px reel band vertically.
  const REEL_CARD_WIDTH = 620; // px
  const REEL_CARD_GAP = 16; // px (Tailwind gap-4)

  // ReelCard: large poster + number+name on left, price on right (opposite side, same line) so price is always clearly visible as cards move left in the reel. Sized big for 43" TV distance viewing.
  function ReelCard({ item, number }: { item: MenuItem; number: number }) {
    const numStr = String(number).padStart(2, '0');

    return (
      <div 
        className="flex-shrink-0 bg-white rounded-3xl overflow-hidden border border-[#EDE6D9] shadow-xl flex flex-col"
        style={{ width: `${REEL_CARD_WIDTH}px`, transform: 'translateZ(0)', backfaceVisibility: 'hidden' }}
      >
        <div className="relative bg-[#F2EDE4]" style={{ height: '320px' }}>
          <motion.img
            src={getMenuPosterSrc(item, 'optimized')}
            alt={item.name}
            className="w-full h-full object-cover"
            animate={{ scale: [1, 1.015, 1] }}
            transition={{ duration: 6, repeat: Infinity, ease: 'easeInOut' }}
          />
          <div className="absolute inset-0 bg-gradient-to-b from-black/5 to-black/25" />
          {/* Prominent number badge for easy ordering by number e.g. "give me number 13" */}
          <div className="absolute top-2 left-2 z-10 px-3.5 py-1 rounded-full bg-black/75 text-[#E8D4A3] text-3xl font-mono font-bold tracking-[3px] shadow-lg border border-[#E8D4A3]/40">
            {numStr}
          </div>
        </div>
        <div className="px-4 py-5 flex items-baseline justify-between gap-4">
          <div className="font-serif text-3xl tracking-[-0.5px] leading-none text-[#2C2A26]">
            {numStr}. {item.name}
          </div>
          <div className="text-[#B38B4D] text-2xl font-semibold tracking-tight whitespace-nowrap">
            {item.price} kr
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="h-screen bg-[#F8F5F0] text-[#2C2A26] overflow-hidden select-none flex flex-col screen-root">
      <SpiceParticles />

      {/* Elegant top bar */}
      <div className="relative z-20 h-14 border-b border-[#EDE6D9]/70 bg-[#F8F5F0]/95 backdrop-blur-md flex items-center px-9 text-sm flex-none">
        <div className="flex items-center gap-3">
          <div className="font-serif text-2xl tracking-[-1.5px] text-[#2C2A26]">SHAHI KITCHEN</div>
          <div className="text-[10px] px-2.5 py-px rounded-full border border-[#B38B4D]/50 text-[#B38B4D] tracking-[2.5px] font-medium">
            {screenLabel}
          </div>
        </div>

        <div className="flex-1" />

        <div className="flex items-center gap-6 text-[#6B665F] tracking-[1px] text-xs">
          <div>ASKIM • BACKAPLAN</div>
          <div className="h-2.5 w-px bg-[#EDE6D9]" />
          <div>{t.screen.prepared.toUpperCase()}</div>
        </div>
      </div>

      {/* HERO — Large cycling animation showing ALL items one by one (not just signatures).
          flex-1 so it absorbs extra viewport height on tall displays / when zoomed out.
          On short effective viewports (zoomed in) it shrinks gracefully; text sized for fit. */}
      <div className="flex-1 min-h-[260px] relative z-10 bg-[#101724] flex items-center justify-center overflow-hidden">
        <div
          ref={heroTiltRef}
          className="absolute inset-0 will-change-transform"
          style={{ transformStyle: 'preserve-3d' }}
        >
          {/* Media switches with crossfade + fresh start each cycle. Video when available, else large animated poster (Ken Burns). */}
          <AnimatePresence mode="wait">
            {current && (
              current.video ? (
                <motion.div
                  key={`${current.id}-video`}
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.45 }}
                  className="absolute inset-0"
                >
                  <video
                    className="absolute inset-0 w-full h-full object-cover"
                    autoPlay
                    muted
                    loop
                    playsInline
                    preload="auto"
                  >
                    {(() => {
                      const srcs = getMenuVideoSources(current.video);
                      return (
                        <>
                          {srcs.webm && <source src={srcs.webm} type="video/webm" />}
                          {srcs.mp4 && <source src={srcs.mp4} type="video/mp4" />}
                          {srcs.fallback && <source src={srcs.fallback} type="video/mp4" />}
                        </>
                      );
                    })()}
                  </video>
                </motion.div>
              ) : (
                <motion.img
                  key={`${current.id}-poster`}
                  src={getMenuPosterSrc(current, 'optimized')}
                  alt={current.name}
                  className="absolute inset-0 w-full h-full object-cover"
                  initial={{ opacity: 0, scale: 1 }}
                  animate={{ opacity: 1, scale: [1, 1.06, 1] }}
                  exit={{ opacity: 0 }}
                  transition={{ opacity: { duration: 0.45 }, scale: { duration: 8, repeat: Infinity, ease: 'easeInOut' } }}
                  onError={(e) => {
                    applyNextImageFallback(
                      e.currentTarget,
                      getMenuPosterCandidates(current),
                      e.currentTarget.src
                    );
                  }}
                />
              )
            )}
          </AnimatePresence>

          {/* Rich overlays for text legibility + luxury feel (stay on top of changing media) */}
          <div className="absolute inset-0 bg-gradient-to-b from-black/25 via-black/15 to-black/55" />
          <div className="absolute inset-0 bg-[radial-gradient(#B38B4D_0.6px,transparent_1px)] bg-[length:5px_5px] opacity-[0.035]" />
        </div>

        {/* Animated dish info */}
        <div className="relative z-10 max-w-4xl px-10 text-white">
          <AnimatePresence mode="wait">
            {current && (
              <motion.div
                key={current.id}
                initial={{ opacity: 0, y: 18 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -14 }}
                transition={{ duration: 0.55, ease: [0.21, 0.92, 0.26, 1] }}
              >
                <div className="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-1 text-xs tracking-[3.5px] mb-4 border border-white/20">
                  {t.screen.menuTitle}
                </div>

                <h1 className="font-serif text-[56px] md:text-[64px] leading-[0.88] tracking-[-3.2px] mb-2 text-[#B38B4D] drop-shadow-[0_0_10px_rgba(179,139,77,0.85)]">
                  {current.name}
                </h1>

                <div className="flex items-baseline gap-2 mb-4">
                  <div className="text-5xl font-medium tracking-[-1.5px] text-[#E8D4A3]">
                    {current.price}
                  </div>
                  <div className="text-2xl text-white/70 tracking-[1px]">KR</div>
                </div>

                <p className="max-w-[620px] text-[17px] leading-tight text-white/90 tracking-[-0.1px] drop-shadow">
                  {translatedDesc}
                </p>

                <div className="mt-5 text-[11px] tracking-[3px] text-white/60">
                  {t.screen.prepared}
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>

        {/* Cycle progress + counter (clean for many items) */}
        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 flex items-center gap-3 text-white/70 text-xs tracking-[2px]">
          <div>{currentIndex + 1} / {cyclingItems.length}</div>
          <div className="w-32 h-px bg-white/20 rounded overflow-hidden">
            <motion.div
              key={currentIndex}
              className="h-px bg-[#E8D4A3]"
              initial={{ width: '0%' }}
              animate={{ width: '100%' }}
              transition={{ duration: CYCLE_INTERVAL_MS / 1000, ease: 'linear' }}
            />
          </div>
        </div>
      </div>

      {/* MENU REEL - continuous LEFT-moving reel (items move left: enter from right, exit left), entire menu in one line.
          Dynamic # of items visible based on zoom (more when zoomed out). Always full width edge-to-edge (no side whitespace).
          ~8s per item, seamless loop with posters only. Fixed band height so layout sums <=100vh with flex-1 hero. */}
      <div className="relative z-10 bg-[#F8F5F0] border-t border-[#EDE6D9]/60 overflow-hidden w-full flex-none">
        <div className="max-w-[1680px] mx-auto px-4 py-1.5">
          <div className="text-[#B38B4D] text-xs tracking-[4px] font-medium mb-1">THE MENU • REEL</div>
        </div>

        {/* Full-width viewport for the reel; cards will fill based on container width. Height tuned to match card (poster + bottom text area) so items fill the band vertically with no large empty space under as they rotate left. */}
        <div style={{ height: '390px' }} className="overflow-hidden w-full">
          <div
            className="menu-reel-track flex gap-4"
            style={{
              width: `${reelItems.length * (REEL_CARD_WIDTH + REEL_CARD_GAP)}px`,
              animationDuration: `${numItems * 8}s`
            }}
          >
            {reelItems.map((item, index) => {
              const displayNumber = ((index % numItems) + startNumber);
              return (
                <ReelCard key={`${item.id}-${index}`} item={item} number={displayNumber} />
              );
            })}
          </div>
        </div>
      </div>

      {/* COMBO MEALS & DISCOUNT OFFERS - compact vertical footprint so total page height always <= 100vh in fullscreen (no scrollbar) */}
      <div className="relative z-10 bg-[#F8F5F0] py-3 border-t border-[#EDE6D9]/60 flex-none">
        <div className="max-w-[1680px] mx-auto px-8">
          <div className="flex items-center gap-4 mb-3">
            <div className="text-[#B38B4D] text-xs tracking-[3.5px] font-medium">COMBO MEALS & OFFERS</div>
            <div className="flex-1 h-px bg-[#B38B4D]/25" />
            <div className="text-xs text-[#6B665F]">Ask at counter by offer number</div>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {/* Offer 1 */}
            <div className="bg-white rounded-3xl border border-[#EDE6D9] shadow-xl p-4 flex flex-col">
              <div className="flex items-center justify-between mb-1.5">
                <div className="text-[#B38B4D] text-xs tracking-[2px] font-semibold">OFFER 1</div>
                <div className="text-[10px] px-2 py-0.5 rounded-full bg-[#B38B4D] text-white tracking-wider">BEST VALUE</div>
              </div>
              <div className="font-serif text-xl tracking-tight text-[#101724] leading-tight">SHAHI FAMILY COMBO</div>
              <div className="text-xs text-[#6B665F] mt-0.5 flex-1">2 Chicken Curries + 2 Veg Curries + 4 Naan + 2 Rice + 4 Drinks</div>
              <div className="mt-2 flex items-baseline gap-2">
                <span className="text-3xl font-semibold text-[#B38B4D]">799 kr</span>
                <span className="text-base line-through text-[#8A8478]">999 kr</span>
              </div>
              <div className="text-[10px] text-[#B38B4D] font-medium">SAVE 200 KR • Serves 4</div>
            </div>

            {/* Offer 2 */}
            <div className="bg-white rounded-3xl border border-[#EDE6D9] shadow-xl p-4 flex flex-col">
              <div className="flex items-center justify-between mb-1.5">
                <div className="text-[#B38B4D] text-xs tracking-[2px] font-semibold">OFFER 2</div>
              </div>
              <div className="font-serif text-xl tracking-tight text-[#101724] leading-tight">LUNCH THALI SPECIAL</div>
              <div className="text-xs text-[#6B665F] mt-0.5 flex-1">Any Curry + Rice + 2 Naan + Salad + Drink (11am–3pm)</div>
              <div className="mt-2 flex items-baseline gap-2">
                <span className="text-3xl font-semibold text-[#B38B4D]">149 kr</span>
                <span className="text-base line-through text-[#8A8478]">189 kr</span>
              </div>
              <div className="text-[10px] text-[#B38B4D] font-medium">SAVE 40 KR • Mon–Fri only</div>
            </div>

            {/* Offer 3 */}
            <div className="bg-white rounded-3xl border border-[#EDE6D9] shadow-xl p-4 flex flex-col">
              <div className="flex items-center justify-between mb-1.5">
                <div className="text-[#B38B4D] text-xs tracking-[2px] font-semibold">OFFER 3</div>
              </div>
              <div className="font-serif text-xl tracking-tight text-[#101724] leading-tight">PIZZA & ROLL DEAL</div>
              <div className="text-xs text-[#6B665F] mt-0.5 flex-1">Any 2 Pizzas + Any 2 Rolls + 2 Drinks</div>
              <div className="mt-2 flex items-baseline gap-2">
                <span className="text-3xl font-semibold text-[#B38B4D]">229 kr</span>
                <span className="text-base line-through text-[#8A8478]">299 kr</span>
              </div>
              <div className="text-[10px] text-[#B38B4D] font-medium">SAVE 70 KR • Great for sharing</div>
            </div>

            {/* Offer 4 */}
            <div className="bg-white rounded-3xl border border-[#EDE6D9] shadow-xl p-4 flex flex-col">
              <div className="flex items-center justify-between mb-1.5">
                <div className="text-[#B38B4D] text-xs tracking-[2px] font-semibold">OFFER 4</div>
                <div className="text-[10px] px-2 py-0.5 rounded-full bg-[#3F5C4A] text-white tracking-wider">VEG</div>
              </div>
              <div className="font-serif text-xl tracking-tight text-[#101724] leading-tight">VEG FEAST FOR 4</div>
              <div className="text-xs text-[#6B665F] mt-0.5 flex-1">4 Veg Curries + 4 Naan + 2 Rice + 4 Drinks</div>
              <div className="mt-2 flex items-baseline gap-2">
                <span className="text-3xl font-semibold text-[#B38B4D]">599 kr</span>
                <span className="text-base line-through text-[#8A8478]">749 kr</span>
              </div>
              <div className="text-[10px] text-[#B38B4D] font-medium">SAVE 150 KR • Pure veg delight</div>
            </div>
          </div>
        </div>
      </div>

      {/* Very subtle footer branding */}
      <div className="relative z-10 py-2 text-center text-[10px] tracking-[2.5px] text-[#8A8478] border-t border-[#EDE6D9]/60 bg-[#F8F5F0] flex-none">
        SHAHI KITCHEN • GOTHENBURG • FRESH EVERY DAY
      </div>
    </div>
  );
}