import { Box, Container, Typography, Link, Stack, Grid, IconButton, Divider, TextField, Button } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import GitHubIcon from '@mui/icons-material/GitHub';
import XIcon from '@mui/icons-material/X';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import YouTubeIcon from '@mui/icons-material/YouTube';

const productLinks = [
  { label: 'Get Started', href: '/getting-started', external: false },
  { label: 'Create with Python', href: 'https://github.com/pollen-robotics/reachy_mini', external: true },
  { label: 'Download App', href: '/download', external: false },
  { label: 'Browse Apps', href: '/apps', external: false },
  { label: 'Buy Reachy Mini', href: '/buy', external: false },
];

const resourceLinks = [
  { label: 'Assembly Guide', href: 'https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Assembly_Guide', external: true },
  { label: 'Python SDK', href: 'https://github.com/pollen-robotics/reachy_mini', external: true },
  { label: 'Documentation', href: 'https://github.com/pollen-robotics/reachy_mini#readme', external: true },
  { label: 'API Reference', href: 'https://github.com/pollen-robotics/reachy_mini', external: true },
];

const communityLinks = [
  { label: 'Discord Server', href: 'https://discord.gg/2bAhWfXme9', external: true },
  { label: 'Hugging Face Spaces', href: 'https://huggingface.co/spaces?q=reachy_mini', external: true },
  { label: 'GitHub Discussions', href: 'https://github.com/pollen-robotics/reachy_mini/discussions', external: true },
  { label: 'Share your Project', href: 'https://discord.gg/2bAhWfXme9', external: true },
];

const socialLinks = [
  { icon: GitHubIcon, href: 'https://github.com/pollen-robotics', label: 'GitHub' },
  { icon: XIcon, href: 'https://x.com/pollenrobotics', label: 'X (Twitter)' },
  { icon: LinkedInIcon, href: 'https://www.linkedin.com/company/pollen-robotics', label: 'LinkedIn' },
  { icon: YouTubeIcon, href: 'https://www.youtube.com/pollen-robotics', label: 'YouTube' },
];

function FooterLink({ link }) {
  const linkStyles = {
    color: 'rgba(255, 255, 255, 0.6)',
    textDecoration: 'none',
    fontSize: 14,
    display: 'block',
    py: 0.5,
    transition: 'color 0.2s ease',
    '&:hover': {
      color: 'white',
    },
  };

  if (link.external) {
    return (
      <Link href={link.href} target="_blank" rel="noopener noreferrer" sx={linkStyles}>
        {link.label}
      </Link>
    );
  }

  return (
    <Link component={RouterLink} to={link.href} sx={linkStyles}>
      {link.label}
    </Link>
  );
}

function FooterSection({ title, links }) {
  return (
    <Box>
      <Typography
        variant="overline"
        sx={{
          color: 'rgba(255, 255, 255, 0.4)',
          fontSize: 11,
          letterSpacing: '0.15em',
          mb: 2,
          display: 'block',
        }}
      >
        {title}
      </Typography>
      <Stack spacing={0.5}>
        {links.map((link) => (
          <FooterLink key={link.label} link={link} />
        ))}
      </Stack>
    </Box>
  );
}

export default function Footer() {
  return (
    <Box
      component="footer"
      sx={{
        backgroundColor: '#0a0a0b',
        color: 'white',
        pt: 10,
        pb: 4,
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      {/* Subtle gradient overlay */}
      <Box
        sx={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: '1px',
          background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent)',
        }}
      />

      {/* Decorative sleeping Reachy */}
      <Box
        component="img"
        src="/assets/sleeping-reachy.svg"
        alt=""
        sx={{
          position: 'absolute',
          bottom: 20,
          right: { xs: 10, md: 40 },
          width: { xs: 60, md: 80 },
          opacity: 0.15,
          pointerEvents: 'none',
          display: { xs: 'none', lg: 'block' },
        }}
      />

      <Container maxWidth="lg">
        {/* Main Footer Content */}
        <Grid container spacing={6}>
          {/* Brand Column */}
          <Grid size={{ xs: 12, md: 4 }}>
            <Box sx={{ mb: 3 }}>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 2 }}>
                <Box
                  component="img"
                  src="/assets/reachy-icon.svg"
                  alt=""
                  sx={{
                    width: 32,
                    height: 32,
                    opacity: 0.9,
                  }}
                />
                <Typography variant="h5" sx={{ fontWeight: 700 }}>
                  Reachy Mini
                </Typography>
              </Box>
              <Typography
                variant="body2"
                sx={{ color: 'rgba(255, 255, 255, 0.6)', lineHeight: 1.7, maxWidth: 300 }}
              >
                An expressive open-source companion robot designed for human interaction, 
                creative coding, and AI experimentation. Build, play, and innovate with robotics.
              </Typography>
            </Box>

            {/* Social Links */}
            <Stack direction="row" spacing={1} sx={{ mt: 3 }}>
              {socialLinks.map((social) => (
                <IconButton
                  key={social.label}
                  href={social.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={social.label}
                  sx={{
                    color: 'rgba(255, 255, 255, 0.5)',
                    border: '1px solid rgba(255, 255, 255, 0.1)',
                    borderRadius: 2,
                    transition: 'all 0.2s ease',
                    '&:hover': {
                      color: 'white',
                      borderColor: 'rgba(255, 255, 255, 0.3)',
                      backgroundColor: 'rgba(255, 255, 255, 0.05)',
                    },
                  }}
                >
                  <social.icon fontSize="small" />
                </IconButton>
              ))}
            </Stack>
          </Grid>

          {/* Links Columns */}
          <Grid size={{ xs: 6, sm: 4, md: 2 }}>
            <FooterSection title="Product" links={productLinks} />
          </Grid>

          <Grid size={{ xs: 6, sm: 4, md: 2 }}>
            <FooterSection title="Resources" links={resourceLinks} />
          </Grid>

          <Grid size={{ xs: 6, sm: 4, md: 2 }}>
            <FooterSection title="Community" links={communityLinks} />
          </Grid>

          {/* Newsletter / CTA Column */}
          <Grid size={{ xs: 12, sm: 8, md: 2 }}>
            <Box>
              <Typography
                variant="overline"
                sx={{
                  color: 'rgba(255, 255, 255, 0.4)',
                  fontSize: 11,
                  letterSpacing: '0.15em',
                  mb: 2,
                  display: 'block',
                }}
              >
                Stay Updated
              </Typography>
              <Typography
                variant="body2"
                sx={{ color: 'rgba(255, 255, 255, 0.6)', mb: 2, fontSize: 13 }}
              >
                Join our Discord to get the latest updates, tutorials, and community projects.
              </Typography>
              <Button
                variant="outlined"
                size="small"
                href="https://discord.gg/2bAhWfXme9"
                target="_blank"
                fullWidth
                sx={{
                  borderColor: 'rgba(255, 255, 255, 0.2)',
                  color: 'white',
                  fontSize: 13,
                  '&:hover': {
                    borderColor: 'rgba(255, 255, 255, 0.5)',
                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
                  },
                }}
              >
                Join Discord
              </Button>
            </Box>
          </Grid>
        </Grid>

        {/* Divider */}
        <Divider sx={{ borderColor: 'rgba(255, 255, 255, 0.08)', my: 6 }} />

        {/* Bottom Bar */}
        <Stack
          direction={{ xs: 'column', md: 'row' }}
          justifyContent="space-between"
          alignItems={{ xs: 'center', md: 'center' }}
          spacing={2}
        >
          {/* Copyright & Credits */}
          <Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.4)', fontSize: 13 }}>
            © {new Date().getFullYear()} Reachy Mini. Open source under Apache 2.0 license.
          </Typography>

          {/* Brought by */}
          <Stack direction="row" spacing={1} alignItems="center">
            <Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.4)', fontSize: 13 }}>
              Proudly brought by
            </Typography>
            <Link
              href="https://www.pollen-robotics.com/"
              target="_blank"
              rel="noopener noreferrer"
              sx={{
                color: 'rgba(255, 255, 255, 0.7)',
                textDecoration: 'none',
                fontSize: 13,
                fontWeight: 600,
                transition: 'color 0.2s',
                '&:hover': { color: 'white' },
              }}
            >
              Pollen Robotics
            </Link>
            <Typography sx={{ color: 'rgba(255, 255, 255, 0.3)', fontSize: 13 }}>×</Typography>
            <Link
              href="https://huggingface.co/"
              target="_blank"
              rel="noopener noreferrer"
              sx={{
                color: 'rgba(255, 255, 255, 0.7)',
                textDecoration: 'none',
                fontSize: 13,
                fontWeight: 600,
                transition: 'color 0.2s',
                '&:hover': { color: 'white' },
              }}
            >
              🤗 Hugging Face
            </Link>
          </Stack>

          {/* Legal Links */}
          <Stack direction="row" spacing={3}>
            <Link
              href="https://github.com/pollen-robotics/reachy_mini/blob/main/LICENSE"
              target="_blank"
              rel="noopener noreferrer"
              sx={{
                color: 'rgba(255, 255, 255, 0.4)',
                textDecoration: 'none',
                fontSize: 12,
                '&:hover': { color: 'rgba(255, 255, 255, 0.7)' },
              }}
            >
              License
            </Link>
            <Link
              href="https://www.pollen-robotics.com/privacy-policy/"
              target="_blank"
              rel="noopener noreferrer"
              sx={{
                color: 'rgba(255, 255, 255, 0.4)',
                textDecoration: 'none',
                fontSize: 12,
                '&:hover': { color: 'rgba(255, 255, 255, 0.7)' },
              }}
            >
              Privacy
            </Link>
            <Link
              href="https://www.pollen-robotics.com/terms-of-use/"
              target="_blank"
              rel="noopener noreferrer"
              sx={{
                color: 'rgba(255, 255, 255, 0.4)',
                textDecoration: 'none',
                fontSize: 12,
                '&:hover': { color: 'rgba(255, 255, 255, 0.7)' },
              }}
            >
              Terms
            </Link>
          </Stack>
        </Stack>
      </Container>
    </Box>
  );
}