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

const KeypadScreen = () => {
  const [code, setCode] = useState('');
  const [showArmedStay, setShowArmedStay] = useState(false);
  const DEFAULT_PIN = '1234';

  const handleNumberClick = (number) => {
    playKeypadSound();
    
    if (code.length < 4) {
      const newCode = code + number;
      setCode(newCode);
      
      if (newCode.length === 4) {
        if (newCode === DEFAULT_PIN) {
          setShowArmedStay(true);
        } else {
          setTimeout(() => setCode(''), 500);
        }
      }
    }
  };

  const handleClear = () => {
    setCode('');
  };

  if (showArmedStay) {
    return <ArmedStayScreen />;
  }

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

        <div className="text-white text-[min(2.5vh,1.25rem)] font-light">
          Ready To Arm
        </div>

        <div>
          <AlertTriangle className="w-[min(3vh,24px)] h-[min(3vh,24px)] text-white" />
        </div>
      </div>

      {/* Main Content */}
      <div className="flex flex-1 min-h-0 relative">
        {/* Left Section */}
        <div className="w-[42%] flex flex-col items-center justify-center p-[min(4vh,32px)]">
          <h2 className="text-white text-[min(4vh,2rem)] font-light text-center mb-[min(4vh,32px)]">
            Arm the system in Stay mode
          </h2>
          <div className="text-white mb-[min(4vh,32px)] text-center">
            <div className="text-[min(6vh,3rem)] font-light mb-[min(3vh,24px)]">Enter Code:</div>
            <div className="flex gap-[min(2vw,16px)] justify-center">
              {[...Array(4)].map((_, i) => (
                <div 
                  key={i} 
                  className="w-[min(8vh,64px)] h-[min(8vh,64px)] rounded-full border-2 border-white flex items-center justify-center text-[min(3vh,1.5rem)]"
                >
                  {code[i] ? '•' : ''}
                </div>
              ))}
            </div>
          </div>

          <div className="flex flex-col gap-[min(2vh,16px)] items-center w-full max-w-[min(90%,600px)]">
            <button className="bg-transparent border-2 border-white text-white py-[min(2vh,16px)] rounded-xl text-[min(2vh,1rem)] w-full">
              NIGHT STAY
            </button>
            <div className="flex gap-[min(2vw,16px)] w-full">
              <button className="flex-1 bg-transparent border-2 border-white text-white py-[min(2vh,16px)] rounded-xl text-[min(2vh,1rem)]">
                QUICK ARM
              </button>
              <button className="flex-1 bg-[#9BA617] text-white py-[min(2vh,16px)] rounded-xl text-[min(2vh,1rem)]">
                ENTRY DELAY
              </button>
            </div>
          </div>
        </div>

        {/* Right Section - Keypad */}
        <div className="w-[58%] relative flex flex-col items-center justify-center">
          <div className="grid grid-cols-3 gap-[min(3vh,24px)]">
            {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((number) => (
              <button
                key={number}
                onClick={() => handleNumberClick(number)}
                className="w-[min(12vh,96px)] h-[min(12vh,96px)] rounded-full bg-white flex items-center justify-center text-[min(4vh,2rem)]"
              >
                {number}
              </button>
            ))}
            <button
              onClick={handleClear}
              className="w-[min(12vh,96px)] h-[min(12vh,96px)] rounded-full bg-white flex items-center justify-center text-[min(2.5vh,1.25rem)] font-medium"
            >
              Clear
            </button>
            <button
              onClick={() => handleNumberClick(0)}
              className="w-[min(12vh,96px)] h-[min(12vh,96px)] rounded-full bg-white flex items-center justify-center text-[min(4vh,2rem)]"
            >
              0
            </button>
            <button
              className="w-[min(12vh,96px)] h-[min(12vh,96px)] rounded-full bg-white flex items-center justify-center text-[min(4vh,2rem)] font-light"
            >
              ×
            </button>
          </div>
          
          {/* Vertical Line and Back Button Container */}
          <div className="absolute h-full right-[25%] flex items-center">
            <div className="h-[85%] w-px bg-white/30" />
            <div className="absolute -right-[min(10vh,80px)] top-[15%]">
              <img 
                src="/icons/ArrowBack.png" 
                alt="Back" 
                className="w-[min(10vh,80px)] h-[min(10vh,80px)] cursor-pointer"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default KeypadScreen;