src/pages/Download.jsx

import { useState, useEffect } from 'react';
import {
  Box,
  Container,
  Typography,
  Button,
  Grid,
  Card,
  CardContent,
  Chip,
  Stack,
  CircularProgress,
} from '@mui/material';
import DownloadIcon from '@mui/icons-material/Download';
import AppleIcon from '@mui/icons-material/Apple';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';

import Layout from '../components/Layout';

// Platform configuration
const PLATFORMS = {
  'darwin-aarch64': {
    name: 'macOS',
    subtitle: 'Apple Silicon',
    arch: 'M1, M2, M3, M4',
    format: '.dmg',
    icon: AppleIcon,
    color: '#a3a3a3',
  },
  'darwin-x86_64': {
    name: 'macOS',
    subtitle: 'Intel',
    arch: 'x86_64',
    format: '.dmg',
    icon: AppleIcon,
    color: '#a3a3a3',
  },
  'windows-x86_64': {
    name: 'Windows',
    subtitle: '64-bit',
    arch: 'x86_64',
    format: '.msi',
    icon: null,
    color: '#0078d4',
  },
  'linux-x86_64': {
    name: 'Linux',
    subtitle: 'Debian/Ubuntu',
    arch: 'x86_64',
    format: '.deb',
    icon: null,
    color: '#e95420',
  },
};

// URL to fetch latest release info (using GitHub API for CORS support)
const GITHUB_RELEASES_API = 'https://api.github.com/repos/pollen-robotics/reachy-mini-desktop-app/releases/latest';


// Detect user's platform
function detectPlatform() {
  const ua = navigator.userAgent;
  const platform = navigator.platform || '';

  if (/Mac/.test(platform) || /Mac/.test(ua)) {
    return 'darwin-aarch64';
  }
  if (/Win/.test(platform) || /Windows/.test(ua)) {
    return 'windows-x86_64';
  }
  if (/Linux/.test(platform) || /Linux/.test(ua)) {
    return 'linux-x86_64';
  }
  return 'darwin-aarch64';
}

// Format date
function formatDate(dateString) {
  const date = new Date(dateString);
  return date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  });
}

// Windows Icon
function WindowsIcon({ sx = {} }) {
  return (
    <Box component="svg" viewBox="0 0 24 24" sx={{ width: 32, height: 32, ...sx }}>
      <path fill="currentColor" d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801" />
    </Box>
  );
}

// Linux Icon
function LinuxIcon({ sx = {} }) {
  return (
    <Box component="svg" viewBox="0 0 24 24" sx={{ width: 32, height: 32, ...sx }}>
      <path fill="currentColor" d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489.117.779.456 1.511 1.044 2.127.473.497.986.902 1.504 1.238.518.336 1.03.62 1.523.836.483.23.93.42 1.297.606.368.187.656.37.83.544.36.364.575.747.658 1.162.084.416.036.864-.132 1.307-.168.443-.45.879-.808 1.257-.358.378-.79.698-1.232.919-.443.22-.893.337-1.284.337-.392 0-.722-.116-.963-.337-.241-.22-.393-.544-.429-.954-.037-.41.04-.894.198-1.402.159-.509.397-1.041.678-1.54.282-.5.606-.968.937-1.352.33-.383.666-.68.966-.844.3-.163.562-.193.742-.05.18.142.278.429.25.802-.028.373-.182.83-.457 1.284-.275.455-.67.908-1.137 1.27-.467.362-1.006.632-1.557.746-.55.113-1.112.069-1.612-.155-.5-.223-.938-.627-1.24-1.155-.3-.53-.463-1.183-.423-1.89.04-.706.284-1.467.716-2.183.43-.715 1.047-1.386 1.786-1.923.74-.538 1.603-.944 2.503-1.173.9-.23 1.837-.284 2.718-.173.88.11 1.705.385 2.4.786.694.4 1.26.927 1.63 1.52.37.593.545 1.252.482 1.9-.062.648-.362 1.286-.855 1.824-.492.537-1.178.974-1.96 1.24-.783.267-1.664.36-2.527.276-.863-.085-1.707-.347-2.41-.785-.703-.438-1.266-1.052-1.58-1.764-.315-.713-.38-1.524-.174-2.303.206-.78.682-1.528 1.356-2.105.674-.578 1.546-.985 2.486-1.173.94-.188 1.948-.156 2.866.127.917.284 1.744.769 2.343 1.445.6.675.972 1.54 1.022 2.478.05.938-.222 1.949-.793 2.85-.572.902-1.443 1.694-2.516 2.218-1.073.523-2.35.78-3.633.69-1.284-.09-2.575-.528-3.653-1.305-1.078-.778-1.944-1.895-2.436-3.22-.493-1.326-.612-2.86-.27-4.386.34-1.525 1.14-3.04 2.34-4.287 1.2-1.246 2.798-2.224 4.584-2.683 1.786-.46 3.76-.402 5.554.248 1.794.65 3.408 1.89 4.516 3.548 1.11 1.658 1.713 3.733 1.62 5.83-.093 2.098-.882 4.218-2.25 5.99-1.37 1.77-3.318 3.19-5.54 4.002-2.223.81-4.72 1.013-7.08.528-2.36-.485-4.583-1.656-6.263-3.35-1.68-1.693-2.816-3.91-3.153-6.292-.337-2.382.127-4.929 1.344-7.14 1.218-2.212 3.19-4.09 5.528-5.3 2.338-1.21 5.043-1.754 7.707-1.483 2.663.27 5.286 1.353 7.382 3.063 2.097 1.71 3.667 4.048 4.377 6.632.71 2.583.56 5.413-.577 7.948-1.137 2.534-3.14 4.774-5.648 6.265-2.508 1.492-5.52 2.235-8.503 2.05-2.983-.186-5.938-1.3-8.283-3.166C2.997 19.41 1.26 16.792.433 13.906c-.828-2.886-.745-6.04.336-8.896C1.85 2.152 4.023-.06 6.698.8" />
    </Box>
  );
}

// Platform Card component
function PlatformCard({ platformKey, url, isActive, onClick }) {
  const platform = PLATFORMS[platformKey];
  const Icon = platform?.icon;

  return (
    <Card
      onClick={onClick}
      sx={{
        cursor: 'pointer',
        background: isActive 
          ? 'linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%)'
          : 'rgba(255, 255, 255, 0.03)',
        border: '1px solid',
        borderColor: isActive ? 'rgba(59, 130, 246, 0.4)' : 'rgba(255, 255, 255, 0.08)',
        backdropFilter: 'blur(10px)',
        transition: 'all 0.25s ease',
        '&:hover': {
          borderColor: isActive ? 'rgba(59, 130, 246, 0.6)' : 'rgba(255, 255, 255, 0.2)',
          transform: 'translateY(-4px)',
          boxShadow: isActive 
            ? '0 12px 40px rgba(59, 130, 246, 0.2)'
            : '0 12px 40px rgba(0, 0, 0, 0.3)',
        },
      }}
    >
      <CardContent
        component="a"
        href={url}
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: 1.5,
          textDecoration: 'none',
          color: 'inherit',
          p: 3,
          '&:last-child': { pb: 3 },
        }}
      >
        <Box sx={{ 
          width: 56, 
          height: 56, 
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'center',
          borderRadius: 3,
          backgroundColor: 'rgba(255, 255, 255, 0.05)',
        }}>
          {Icon ? (
            <Icon sx={{ fontSize: 32, color: platform?.color || 'white' }} />
          ) : platformKey.includes('windows') ? (
            <WindowsIcon sx={{ color: platform?.color }} />
          ) : (
            <LinuxIcon sx={{ color: platform?.color }} />
          )}
        </Box>
        
        <Box sx={{ textAlign: 'center' }}>
          <Typography 
            variant="subtitle1" 
            sx={{ fontWeight: 600, color: 'white', lineHeight: 1.2 }}
          >
            {platform?.name}
          </Typography>
          <Typography 
            variant="caption" 
            sx={{ color: 'rgba(255,255,255,0.5)' }}
          >
            {platform?.subtitle}
          </Typography>
        </Box>

        <Chip
          label={platform?.format}
          size="small"
          sx={{ 
            backgroundColor: 'rgba(255, 255, 255, 0.08)',
            color: 'rgba(255,255,255,0.7)',
            fontSize: 11,
            fontWeight: 600,
            height: 24,
          }}
        />
      </CardContent>
    </Card>
  );
}

export default function Download() {
  const [releaseData, setReleaseData] = useState(null);
  const [detectedPlatform, setDetectedPlatform] = useState(null);
  const [loading, setLoading] = useState(true);

  const [error, setError] = useState(null);

  useEffect(() => {
    setDetectedPlatform(detectPlatform());
    
    // Fetch latest release info from GitHub API
    async function fetchLatestRelease() {
      try {
        const response = await fetch(GITHUB_RELEASES_API);
        if (response.ok) {
          const data = await response.json();
          
          // Transform GitHub API response to our format
          const version = data.tag_name?.replace('v', '') || '';
          const platforms = {};
          
          // Map assets to platforms (prioritize user-friendly formats)
          data.assets?.forEach(asset => {
            const name = asset.name.toLowerCase();
            const url = asset.browser_download_url;
            
            // macOS Apple Silicon - prefer .dmg
            if (name.includes('arm64.dmg')) {
              platforms['darwin-aarch64'] = { url };
            } else if (name.includes('darwin-aarch64') && !platforms['darwin-aarch64']) {
              platforms['darwin-aarch64'] = { url };
            }
            
            // macOS Intel - prefer .dmg
            if (name.includes('x64.dmg') && !name.includes('arm64')) {
              platforms['darwin-x86_64'] = { url };
            } else if (name.includes('darwin-x86_64') && !platforms['darwin-x86_64']) {
              platforms['darwin-x86_64'] = { url };
            }
            
            // Windows - .msi
            if (name.includes('.msi')) {
              platforms['windows-x86_64'] = { url };
            }
            
            // Linux - .deb
            if (name.includes('amd64.deb')) {
              platforms['linux-x86_64'] = { url };
            }
          });
          
          setReleaseData({
            version,
            pub_date: data.published_at,
            platforms,
          });
        } else {
          setError('Failed to fetch release info');
        }
      } catch (err) {
        console.error('Error fetching release:', err);
        setError('Failed to fetch release info');
      } finally {
        setLoading(false);
      }
    }
    
    fetchLatestRelease();
  }, []);

  if (loading) {
    return (
      <Layout transparentHeader>
        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', bgcolor: '#000' }}>
          <CircularProgress sx={{ color: 'white' }} />
        </Box>
      </Layout>
    );
  }

  if (error || !releaseData) {
    return (
      <Layout transparentHeader>
        <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', bgcolor: '#000', color: 'white', gap: 3 }}>
          <Typography variant="h5">Unable to load release info</Typography>
          <Button 
            variant="outlined" 
            href="https://github.com/pollen-robotics/reachy-mini-desktop-app/releases"
            target="_blank"
            sx={{ color: 'white', borderColor: 'rgba(255,255,255,0.3)' }}
          >
            View releases on GitHub
          </Button>
        </Box>
      </Layout>
    );
  }

  const currentPlatform = PLATFORMS[detectedPlatform];
  const currentUrl = releaseData?.platforms[detectedPlatform]?.url;

  return (
    <Layout transparentHeader>
      <Box
        sx={{
          minHeight: '100vh',
          background: 'linear-gradient(180deg, #000 0%, #0a0a12 50%, #0f0f1a 100%)',
          color: 'white',
          pt: 14,
          pb: 12,
          position: 'relative',
          overflow: 'hidden',
        }}
      >
        {/* Subtle gradient orbs - spread across the page */}
        <Box
          sx={{
            position: 'absolute',
            top: 100,
            left: '-10%',
            width: 600,
            height: 600,
            background: 'radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%)',
            pointerEvents: 'none',
          }}
        />
        <Box
          sx={{
            position: 'absolute',
            top: '40%',
            right: '-15%',
            width: 700,
            height: 700,
            background: 'radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%)',
            pointerEvents: 'none',
          }}
        />
        <Box
          sx={{
            position: 'absolute',
            bottom: 100,
            left: '20%',
            width: 500,
            height: 500,
            background: 'radial-gradient(circle, rgba(255, 149, 0, 0.05) 0%, transparent 70%)',
            pointerEvents: 'none',
          }}
        />

        <Container maxWidth="md" sx={{ position: 'relative', zIndex: 1 }}>
          {/* Hero Section */}
          <Box sx={{ textAlign: 'center', mb: 8 }}>
            {/* App icon */}
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                mb: 4,
              }}
            >
              <Box
                sx={{
                  width: 100,
                  height: 100,
                  borderRadius: '24px',
                  background: 'linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%)',
                  border: '1px solid rgba(255,255,255,0.1)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
                }}
              >
                <Box
                  component="img"
                  src="/assets/reachy-icon.svg"
                  alt="Reachy Mini Control"
                  sx={{ width: 64, height: 64 }}
                />
              </Box>
            </Box>

            <Typography 
              variant="h2" 
              sx={{ 
                mb: 2,
                background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
                backgroundClip: 'text',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
              }}
            >
              Reachy Mini Control
            </Typography>

            <Typography 
              variant="h6" 
              sx={{ 
                color: 'rgba(255,255,255,0.6)', 
                fontWeight: 400,
                mb: 3,
                maxWidth: 450,
                mx: 'auto',
              }}
            >
              The official desktop app to control, program, and play with your Reachy Mini.
            </Typography>

            {/* Version info */}
            <Stack 
              direction="row" 
              spacing={2} 
              justifyContent="center" 
              alignItems="center"
              sx={{ mb: 5 }}
            >
              <Chip
                icon={<Box sx={{ width: 8, height: 8, bgcolor: '#10b981', borderRadius: '50%', ml: 1 }} />}
                label={`v${releaseData?.version}`}
                sx={{
                  backgroundColor: 'rgba(16, 185, 129, 0.1)',
                  color: '#10b981',
                  fontWeight: 600,
                  border: '1px solid rgba(16, 185, 129, 0.2)',
                }}
              />
              <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.4)' }}>
                Released {formatDate(releaseData?.pub_date)}
              </Typography>
            </Stack>

            {/* Primary download button */}
            <Button
              variant="contained"
              size="large"
              href={currentUrl}
              startIcon={<DownloadIcon />}
              sx={{
                px: 6,
                py: 2,
                fontSize: 17,
                fontWeight: 600,
                borderRadius: 3,
                background: 'linear-gradient(135deg, #FF9500 0%, #764ba2 100%)',
                boxShadow: '0 8px 32px rgba(255, 149, 0, 0.35)',
                transition: 'all 0.3s ease',
                '&:hover': {
                  boxShadow: '0 12px 48px rgba(59, 130, 246, 0.5)',
                  transform: 'translateY(-2px)',
                },
              }}
            >
              Download for {currentPlatform?.name}
            </Button>

            <Typography 
              variant="body2" 
              sx={{ 
                color: 'rgba(255,255,255,0.4)', 
                mt: 2,
                fontSize: 13,
              }}
            >
              {currentPlatform?.subtitle} • {currentPlatform?.format?.replace('.', '').toUpperCase()} package
            </Typography>

            {/* App screenshot */}
            <Box
              component="img"
              src="/assets/desktop-app-screenshot--white.png"
              alt="Reachy Mini Control Dashboard"
              sx={{
                mt: 6,
                width: '100%',
                maxWidth: 700,
                mx: 'auto',
                display: 'block',
                borderRadius: '12px',
              }}
            />
          </Box>

          {/* All platforms */}
          <Box sx={{ mb: 8 }}>
            <Typography
              variant="overline"
              sx={{ 
                color: 'rgba(255,255,255,0.4)', 
                display: 'block', 
                textAlign: 'center',
                mb: 3,
                letterSpacing: 2,
              }}
            >
              Available for all platforms
            </Typography>

            <Grid container spacing={2}>
              {['darwin-aarch64', 'darwin-x86_64', 'windows-x86_64', 'linux-x86_64'].map((key) => (
                <Grid size={{ xs: 6, sm: 3 }} key={key}>
                  <PlatformCard
                    platformKey={key}
                    url={releaseData?.platforms[key]?.url}
                    isActive={key === detectedPlatform}
                    onClick={() => setDetectedPlatform(key)}
                  />
                </Grid>
              ))}
            </Grid>
          </Box>

          {/* Features / What's included */}
          <Box
            sx={{
              background: 'rgba(255, 255, 255, 0.02)',
              border: '1px solid rgba(255, 255, 255, 0.06)',
              borderRadius: 4,
              p: 4,
              mb: 6,
            }}
          >
            <Typography 
              variant="h6" 
              sx={{ mb: 3, color: 'white', fontWeight: 600 }}
            >
              What's included
            </Typography>
            
            <Grid container spacing={2}>
              {[
                '3D visualization of your robot',
                'Real-time motor control',
                'App Store with 30+ apps',
                'Camera & microphone access',
                'Record & playback movements',
                'Full SDK integration',
              ].map((feature, i) => (
                <Grid size={{ xs: 12, sm: 6 }} key={i}>
                  <Stack direction="row" spacing={1.5} alignItems="center">
                    <CheckCircleIcon sx={{ color: '#10b981', fontSize: 20 }} />
                    <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.7)' }}>
                      {feature}
                    </Typography>
                  </Stack>
                </Grid>
              ))}
            </Grid>
          </Box>

          {/* Requirements */}
          <Box sx={{ textAlign: 'center' }}>
            <Typography 
              variant="body2" 
              sx={{ color: 'rgba(255,255,255,0.4)', mb: 2 }}
            >
              Requires macOS 11+, Windows 10+, or Debian/Ubuntu Linux
            </Typography>
            
            <Button
              variant="text"
              size="small"
              href="https://github.com/pollen-robotics/reachy-mini-desktop-app/releases"
              target="_blank"
              endIcon={<OpenInNewIcon sx={{ fontSize: 16 }} />}
              sx={{ 
                color: 'rgba(255,255,255,0.5)',
                '&:hover': { color: 'white' },
              }}
            >
              View all releases on GitHub
            </Button>
          </Box>
        </Container>
      </Box>
    </Layout>
  );
}