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

// Custom Nine Dots Grid component
const NineDotsGrid = () => (
  <div className="grid grid-cols-3 gap-1.5">
    {[...Array(9)].map((_, i) => (
      <div 
        key={i} 
        className="w-1.5 h-1.5 bg-white rounded-full"
      />
    ))}
  </div>
);

const GradientBackground = () => {
  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', {
      hour: 'numeric',
      minute: '2-digit',
      hour12: true,
      month: 'long',
      day: 'numeric',
      year: 'numeric'
    });
  };

  return (
    <div className="fixed top-0 left-0 right-0 bottom-0 flex flex-col overflow-hidden">
      {/* Top bar with navigation icons */}
      <div className="h-16 w-full flex items-center justify-between px-6" 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-xl font-semibold">
          Ready to Arm
        </div>

        <div className="flex items-center gap-4">
          <Mail size={24} className="text-white" />
          <AlertTriangle size={24} className="text-white" />
        </div>
      </div>
      
      {/* Main content area with gradients */}
      <div className="flex-1 flex">
        <div className="w-1/2" 
          style={{ 
            background: 'radial-gradient(circle at center, #0084CF, #0057A7)',
            borderRight: '1px solid rgba(255, 255, 255, 0.1)'
          }}
        />
        
        <div className="w-1/2" 
          style={{ 
            background: 'linear-gradient(45deg, #0084CF, #00B7B7)'
          }}
        />
      </div>

      {/* Bottom bar with gradient */}
      <div className="h-16 w-full relative" style={{ 
        background: 'linear-gradient(to bottom, rgba(0, 87, 167, 0.8), #003366)'
      }}>
        {/* DateTime and menu overlay */}
        <div className="absolute inset-0 flex items-center justify-between px-6">
          <div className="flex-1" /> {/* Left spacer */}
          <div className="text-white text-lg font-medium">
            {formatDateTime(dateTime)}
          </div>
          <div className="flex-1 flex justify-end">
            <NineDotsGrid />
          </div>
        </div>
      </div>
    </div>
  );
};

export default GradientBackground;