'use client';

import { Box } from '@/ui/Box';
import { Link } from '@/ui/Link';
import { Text } from '@/ui/Text';
import { useEffect, useState } from 'react';
import { AppShellBar } from './AppShellBar';

export function AppFooter() {
  const currentYear = new Date().getFullYear();
  
  // Clock
  const [time, setTime] = useState<string>('');
  useEffect(() => {
    const updateTime = () => {
      const now = new Date();
      setTime(now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }));
    };
    updateTime();
    const interval = setInterval(updateTime, 60000);
    return () => clearInterval(interval);
  }, []);

  return (
    <AppShellBar position="bottom">
      {/* Left: System Info */}
      <Box display="flex" alignItems="center" gap={6} flex={1}>
        <Box display="flex" alignItems="center" gap={2}>
          <Box className="w-2 h-2 bg-success-green rounded-full animate-pulse" />
          <Text size="xs" className="text-text-med font-mono text-[10px] uppercase tracking-wider">
            GRIDPILOT
          </Text>
        </Box>
      </Box>

      {/* Center: Time */}
      <Box display="flex" alignItems="center" justifyContent="center" flex={1}>
        <Text size="sm" font="mono" className="text-text-med tracking-widest tabular-nums">
          {time} UTC
        </Text>
      </Box>

      {/* Right: Legal & Tools */}
      <Box display="flex" alignItems="center" justifyContent="end" gap={2} flex={1}>
        <FooterLink href="/terms">Terms</FooterLink>
        <FooterLink href="/privacy">Privacy</FooterLink>
        <FooterLink href="/status">Status</FooterLink>
      </Box>
    </AppShellBar>
  );
}

function FooterLink({ href, children }: { href: string, children: React.ReactNode }) {
  return (
    <Link 
      href={href} 
      variant="ghost" 
      className="px-2 py-1 rounded hover:bg-white/5 text-text-low hover:text-text-high font-mono text-[10px] uppercase tracking-wider transition-colors"
    >
      {children}
    </Link>
  );
}