import React, { useState, useEffect } from 'react';
import { Wifi, Circle, Mail, AlertTriangle } from 'lucide-react';
import { playCountdownSound, playArmingSound } from '../utils/audioUtils';

const ArmedStayScreen = () => {
  const [seconds, setSeconds] = useState(60);
  const [isArmed, setIsArmed] = useState(false);
  const [dateTime, setDateTime] = useState(new Date());

  useEffect(() => {
    playArmingSound();
    playCountdownSound();

    const timer = setInterval(() => {
      setSeconds(prev => {
        if (prev <= 1) {
          setIsArmed(true);
          playArmingSound();
          clearInterval(timer);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);

    const dateTimer = setInterval(() => {
      setDateTime(new Date());
    }, 1000);

    return () => {
      clearInterval(timer);
      clearInterval(dateTimer);
    };
  }, []);

  const formatDateTime = (date) => {
    return date.toLocaleString('en-US', {
      hour: 'numeric',
      minute: '2-digit',
      hour12: true,
      month: 'long',
      day: 'numeric',
      year: 'numeric'
    }).replace(' at', '');
  };

  return (
    <div className="fixed inset-0 flex flex-col overflow-hidden font-['Segoe_UI'] scale-[calc(var(--scale-factor,1))]">
      {/* Header */}
      <div className="h-[8vh] min-h-[64px] max-h-[80px] w-full flex items-center justify-between px-[min(4vw,24px)]" 
           style={{ backgroundColor: '#004C99' }}>
        <div className="flex items-center gap-4">
          <Wifi size={24} className="text-white" />
          <Circle size={24} className="text-white" />
        </div>

        <div className="text-white text-[min(2.5vh,1.25rem)] font-semibold">
          Armed Stay
        </div>

        <div className="flex items-center gap-4">
          <Mail size={24} className="text-white" />
          <AlertTriangle size={24} className="text-white" />
        </div>
      </div>

      {/* Main Content */}
      <div className="flex h-full font-['Segoe_UI']">
        {/* Left section */}
        <div className="w-[56.5%] flex flex-col items-center justify-center"
          style={{ 
            background: 'radial-gradient(circle at center, #0084CF, #0057A7)',
            borderRight: '1px solid rgba(255, 255, 255, 0.1)'
          }}
        >
          <div className="mb-[min(8vh,64px)] text-center">
            <img 
              src="/icons/ArmStay.png"
              alt="Armed Stay" 
              className="w-[min(16vh,128px)] h-[min(16vh,128px)] mx-auto mb-[min(3vh,24px)]"
            />
            <div className="text-white text-[min(3vh,1.5rem)] font-light">
              {seconds > 0 ? `Exit Now ${seconds} Seconds` : 'Armed Stay'}
            </div>
          </div>
          
          <div className="flex justify-center items-center gap-[min(8vh,64px)]">
            <div className="flex flex-col items-center">
              <div className="w-[min(10vh,80px)] h-[min(10vh,80px)] mb-3">
                <img 
                  src="/icons/Disarm.png"
                  alt="Disarm" 
                  className="w-full h-full object-contain"
                />
              </div>
              <span className="text-white text-[min(2.2vh,1.125rem)]">Disarm</span>
            </div>

            {isArmed && (
              <div className="flex flex-col items-center">
                <div className="w-[min(10vh,80px)] h-[min(10vh,80px)] mb-3">
                  <img 
                    src="/icons/QuickExit.png"
                    alt="Quick Exit" 
                    className="w-full h-full object-contain"
                  />
                </div>
                <span className="text-white text-[min(2.2vh,1.125rem)]">Quick Exit</span>
              </div>
            )}
          </div>
        </div>

        {/* Right section */}
        <div className="w-[43.5%] grid grid-cols-2 gap-x-[min(12vh,96px)] gap-y-[min(8vh,64px)] p-[min(4vh,32px)] place-content-center"
          style={{ 
            background: 'linear-gradient(45deg, #0084CF, #00B7B7)'
          }}
        >
          {['Zones', 'Scenes', 'System', 'Automation'].map((item) => (
            <div key={item} className="flex flex-col items-center opacity-80 hover:opacity-100 transition-opacity">
              <div className="w-[min(12vh,96px)] h-[min(12vh,96px)] mb-3">
                <img 
                   src={`/icons/${item}${item === 'Automation' ? '' : 'Icon'}.png`} 
                  alt={item} 
                  className="w-full h-full object-contain"
                />
              </div>
              <span className="text-white text-[min(2.2vh,1.125rem)]">{item}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom bar */}
      <div className="h-[8vh] min-h-[64px] max-h-[80px] w-full relative" 
           style={{ background: 'linear-gradient(to bottom, rgba(0, 87, 167, 0.8), #003366)' }}>
        <div className="absolute inset-0 flex items-center justify-between px-[min(4vw,24px)]">
          <div className="flex-1" />
          <div className="text-white text-[min(2.2vh,1.125rem)] font-medium">
            {formatDateTime(dateTime)}
          </div>
          <div className="flex-1 flex justify-end">
            <div className="grid grid-cols-3 gap-[0.375vh]">
              {[...Array(9)].map((_, i) => (
                <div key={i} className="w-[min(1vh,6px)] h-[min(1vh,6px)] bg-white rounded-full" />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ArmedStayScreen;