import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { useSentinelStore } from '../store/sentinelStore';
import styles from './SentinelAlertBanner.module.css';

/**
 * SentinelAlertBanner
 * Non-blocking notification ribbon that slides from the top edge
 * when a CCTV event fires (showroom visitor detected).
 *
 * Choreography from UX Master Plan §4.2:
 *  T+0ms   — WebSocket event fires
 *  T+200ms — Ribbon slides in: translateY(-100%) → translateY(0)
 *             spring(stiffness:300, damping:28)
 *  Never blocks the current view.
 *  "Open Sentinel" → navigate to /showroom
 *  Auto-dismiss after 30s if broker does not interact.
 */
export function SentinelAlertBanner() {
  const navigate = useNavigate();
  const {
    pendingAlert,
    clearPendingAlert,
  } = useSentinelStore();

  // Auto-dismiss after 30 seconds
  useEffect(() => {
    if (!pendingAlert) return;
    const timer = setTimeout(clearPendingAlert, 30_000);
    return () => clearTimeout(timer);
  }, [pendingAlert, clearPendingAlert]);

  const handleOpenShowroom = () => {
    clearPendingAlert();
    navigate('/showroom');
  };

  return (
    <AnimatePresence>
      {pendingAlert && (
        <motion.div
          className={`${styles.banner} glass-amber`}
          role="alert"
          aria-live="assertive"
          initial={{ y: '-100%', opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: '-100%', opacity: 0 }}
          transition={{
            type: 'spring',
            stiffness: 300,
            damping: 28,
          }}
        >
          <div className={styles.content}>
            {/* Live indicator */}
            <span className="live-dot" style={{ background: 'var(--color-amber)' }} />

            {/* Alert text */}
            <div className={styles.text}>
              <span className={styles.title}>
                {pendingAlert.matchedName
                  ? `${pendingAlert.matchedName} detected in showroom`
                  : 'Visitor detected in Showroom Zone A'
                }
              </span>
              <span className={styles.sub}>
                {pendingAlert.confidence
                  ? `${pendingAlert.matchedName
                      ? 'Match'
                      : 'Face'} · ${pendingAlert.confidence}% confidence`
                  : 'Unknown contact'
                }
              </span>
            </div>
          </div>

          {/* Actions */}
          <div className={styles.actions}>
            <button
              className="btn-primary"
              onClick={handleOpenShowroom}
              aria-label="Open Showroom Mode"
            >
              Open Sentinel
            </button>
            <button
              className="btn-ghost"
              onClick={clearPendingAlert}
              aria-label="Dismiss alert"
            >
              Dismiss
            </button>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}