"use client";

import { useMemo } from 'react';
import dynamic from 'next/dynamic';
import EventCard from '@/components/EventCard';
import { Satellite, Rocket, Moon, Sparkles } from 'lucide-react';

// Now we can safely call dynamic with ssr:false here
const Starfield = dynamic(() => import('@/components/Starfield'), { 
  ssr: false 
});

export default function MissionControl() {
  // Use the BASE_TIME from your terminal (Jan 2026 value)
  const BASE_TIME = 1769610273000; 

  const events = useMemo(() => [
    {
      title: "ISS Overhead: Home",
      date: new Date(BASE_TIME + 1000 * 60 * 60 * 2), 
      icon: <Satellite size={20} />,
    },
    {
      title: "Next Lunar Phase: Full",
      date: new Date(BASE_TIME + 1000 * 60 * 60 * 24 * 3),
      icon: <Moon size={20} />,
    },
    {
      title: "Starlink Train",
      date: new Date(BASE_TIME + 1000 * 60 * 45),
      icon: <Rocket size={20} />,
    },
    {
      title: "Meteor Shower",
      date: new Date(BASE_TIME + 1000 * 60 * 60 * 24 * 10),
      icon: <Sparkles size={20} />,
    }
  ], []);

  return (
    <div className="relative min-h-screen flex flex-col items-center p-8 overflow-hidden">
      <Starfield />
      
      <header className="z-10 text-center mb-16 mt-10">
        <h1 className="text-4xl md:text-6xl font-mono font-bold text-white tracking-tighter mb-4 uppercase">
          Mission<span className="text-blue-500 font-black">Control</span>
        </h1>
        <p className="text-slate-400 font-mono text-xs tracking-[0.3em] uppercase opacity-70">
          Ground Station // [55.6761° N, 12.5683° E]
        </p>
      </header>

      <div className="z-10 grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-5xl">
        {events.map((event, index) => (
          <EventCard 
            key={index}
            title={event.title}
            targetDate={event.date}
            icon={event.icon}
          />
        ))}
      </div>
    </div>
  );
}