import React, { useState, useEffect } from 'react';
import { Wifi, Circle, Mail, AlertTriangle } from 'lucide-react';

const Layout = ({ children }) => {
  const [dateTime, setDateTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setDateTime(new Date());
    }, 1000);
    return () => clearInterval(timer);
  }, []);

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

  return (
    <div className="fixed inset-0 flex flex-col overflow-hidden">
      {/* Header */}
      <div 
        className="w-full flex items-center justify-between px-4 sm:px-6" 
        style={{ 
          backgroundColor: '#004C99',
          height: 'clamp(48px, 8vh, 80px)'
        }}
      >
        <div className="flex items-center gap-4">
          <Wifi style={{ width: 'clamp(16px, 2.5vw, 24px)', height: 'clamp(16px, 2.5vw, 24px)' }} className="text-white" />
          <Circle style={{ width: 'clamp(16px, 2.5vw, 24px)', height: 'clamp(16px, 2.5vw, 24px)' }} className="text-white" />
        </div>

        <div className="text-white font-semibold" style={{ fontSize: 'clamp(14px, 2.5vh, 24px)' }}>
          Ready to Arm
        </div>

        <div className="flex items-center gap-4">
          <Mail style={{ width: 'clamp(16px, 2.5vw, 24px)', height: 'clamp(16px, 2.5vw, 24px)' }} className="text-white" />
          <AlertTriangle style={{ width: 'clamp(16px, 2.5vw, 24px)', height: 'clamp(16px, 2.5vw, 24px)' }} className="text-white" />
        </div>
      </div>
      
      {/* Main Content */}
      <div className="flex-1 flex relative min-h-0">
        {/* Left Section */}
        <div 
          className="w-[56.5%] flex-shrink-0" 
          style={{ 
            background: 'radial-gradient(circle at center, #0084CF, #0057A7)',
            borderRight: '1px solid rgba(255, 255, 255, 0.1)'
          }}
        />
        
        {/* Right Section */}
        <div 
          className="w-[43.5%] flex-shrink-0" 
          style={{ 
            background: 'linear-gradient(45deg, #0084CF, #00B7B7)'
          }}
        />

        {/* Content Overlay */}
        <div className="absolute inset-0">
          {children}
        </div>
      </div>

      {/* Footer */}
      <div 
        className="w-full relative"
        style={{ 
          background: 'linear-gradient(to bottom, rgba(0, 87, 167, 0.8), #003366)',
          height: 'clamp(48px, 8vh, 80px)'
        }}
      >
        <div className="absolute inset-0 flex items-center justify-between px-4 sm:px-6">
          <div className="flex-1" />
          <div className="text-white font-medium" style={{ fontSize: 'clamp(12px, 2vh, 20px)' }}>
            {formatDateTime(dateTime)}
          </div>
          <div className="flex-1 flex justify-end">
            <div className="grid grid-cols-3 gap-[max(2px,0.375vh)]">
              {[...Array(9)].map((_, i) => (
                <div 
                  key={i} 
                  className="bg-white rounded-full"
                  style={{
                    width: 'clamp(3px, 0.8vh, 6px)',
                    height: 'clamp(3px, 0.8vh, 6px)'
                  }}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Layout;