'use client';

import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
import { AppShellBar } from './AppShellBar';
import { Activity, Database, Server, Wifi } from 'lucide-react';

export function AppFooter() {
  const currentYear = new Date().getFullYear();

  return (
    <AppShellBar position="bottom">
      {/* Left: System Info */}
      <Box display="flex" alignItems="center" gap={6}>
        <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 OS v2.0
          </Text>
        </Box>
        <Text size="xs" className="text-text-low font-mono text-[10px] uppercase tracking-wider hidden md:block">
          © {currentYear}
        </Text>
      </Box>

      {/* Center: Telemetry Status */}
      <Box display="flex" alignItems="center" gap={6} className="hidden md:flex">
        <StatusIndicator icon={Database} label="DB" status="good" />
        <StatusIndicator icon={Server} label="API" status="good" />
        <StatusIndicator icon={Wifi} label="WS" status="good" />
        <Box className="h-3 w-px bg-outline-steel" />
        <Box display="flex" alignItems="center" gap={2}>
          <Activity size={12} className="text-text-low" />
          <Text size="xs" className="text-text-med font-mono text-[10px]">12ms</Text>
        </Box>
      </Box>

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

function StatusIndicator({ icon: Icon, label, status }: { icon: any, label: string, status: 'good' | 'warn' | 'bad' }) {
  const color = status === 'good' ? 'text-success-green' : status === 'warn' ? 'text-warning-amber' : 'text-critical-red';
  
  return (
    <Box display="flex" alignItems="center" gap={2} title={`${label}: ${status.toUpperCase()}`}>
      <Icon size={10} className={color} />
      <Text size="xs" className="text-text-low font-mono text-[10px] uppercase tracking-wider">
        {label}
      </Text>
    </Box>
  );
}

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>
  );
}