'use client';

import { useState } from 'react';
import { Box, Container, Typography, TextField, Button, Stack, Alert, Snackbar } from '@mui/material';
import AutoAwesome from '@mui/icons-material/AutoAwesome';
import CheckCircle from '@mui/icons-material/CheckCircle';
import Image from 'next/image';

export default function ComingSoonPage() {
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!email) return;

    setLoading(true);
    setError('');

    try {
      const response = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });

      if (response.ok) {
        setSuccess(true);
        setEmail('');
      } else {
        const data = await response.json();
        setError(data.error || 'Something went wrong');
      }
    } catch (err) {
      setError('Failed to join waitlist');
    } finally {
      setLoading(false);
    }
  };

  return (
    <Box
      sx={{
        minHeight: '100vh',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      {/* Animated background shapes */}
      <Box
        sx={{
          position: 'absolute',
          width: '400px',
          height: '400px',
          borderRadius: '50%',
          background: 'rgba(255, 255, 255, 0.1)',
          top: '-100px',
          right: '-100px',
          animation: 'float 20s infinite ease-in-out',
          '@keyframes float': {
            '0%, 100%': { transform: 'translateY(0)' },
            '50%': { transform: 'translateY(-50px)' },
          },
        }}
      />
      <Box
        sx={{
          position: 'absolute',
          width: '300px',
          height: '300px',
          borderRadius: '50%',
          background: 'rgba(255, 255, 255, 0.05)',
          bottom: '-150px',
          left: '-150px',
          animation: 'float 25s infinite ease-in-out reverse',
        }}
      />

      <Container maxWidth="md" sx={{ position: 'relative', zIndex: 1 }}>
        <Stack
          spacing={4}
          sx={{
            minHeight: '100vh',
            justifyContent: 'center',
            alignItems: 'center',
            textAlign: 'center',
            py: 4,
          }}
        >
          {/* Logo */}
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <AutoAwesome sx={{ fontSize: 48, color: 'white' }} />
            <Typography
              variant="h1"
              sx={{
                color: 'white',
                fontWeight: 700,
                fontSize: { xs: '2.5rem', md: '3.5rem' },
              }}
            >
              This Fit Tho
            </Typography>
          </Box>

          {/* Tagline */}
          <Typography
            variant="h5"
            sx={{
              color: 'rgba(255, 255, 255, 0.9)',
              maxWidth: '600px',
              fontWeight: 300,
              mb: 2,
            }}
          >
            Try outfits on your real body with AI.
            Get friend feedback. Remix until it hits.
          </Typography>

          {/* Coming Soon Badge */}
          <Box
            sx={{
              background: 'rgba(255, 255, 255, 0.2)',
              backdropFilter: 'blur(10px)',
              borderRadius: '100px',
              px: 3,
              py: 1,
              border: '1px solid rgba(255, 255, 255, 0.3)',
            }}
          >
            <Typography
              variant="h6"
              sx={{
                color: 'white',
                textTransform: 'uppercase',
                letterSpacing: 2,
                fontSize: '0.875rem',
                fontWeight: 600,
              }}
            >
              Coming Soon
            </Typography>
          </Box>

          {/* Features Preview */}
          <Stack
            direction={{ xs: 'column', md: 'row' }}
            spacing={3}
            sx={{ mt: 4, mb: 4 }}
          >
            {[
              { emoji: '📸', text: 'Upload your photo' },
              { emoji: '👗', text: 'Add clothes from anywhere' },
              { emoji: '✨', text: 'AI renders your fit' },
              { emoji: '🔥', text: 'Get reactions' },
            ].map((feature, index) => (
              <Box
                key={index}
                sx={{
                  background: 'rgba(255, 255, 255, 0.1)',
                  backdropFilter: 'blur(10px)',
                  borderRadius: 2,
                  p: 2,
                  border: '1px solid rgba(255, 255, 255, 0.2)',
                  minWidth: '140px',
                }}
              >
                <Typography sx={{ fontSize: '2rem', mb: 1 }}>{feature.emoji}</Typography>
                <Typography sx={{ color: 'white', fontSize: '0.9rem' }}>
                  {feature.text}
                </Typography>
              </Box>
            ))}
          </Stack>

          {/* Email Signup */}
          <Box
            sx={{
              background: 'rgba(255, 255, 255, 0.95)',
              borderRadius: 3,
              p: 4,
              maxWidth: '500px',
              width: '100%',
            }}
          >
            <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
              Be the first to know when we launch
            </Typography>
            <form onSubmit={handleSubmit}>
              <Stack spacing={2}>
                <TextField
                  fullWidth
                  type="email"
                  placeholder="Enter your email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  disabled={loading || success}
                  sx={{
                    '& .MuiOutlinedInput-root': {
                      borderRadius: 2,
                    },
                  }}
                />
                <Button
                  type="submit"
                  variant="contained"
                  size="large"
                  disabled={loading || success || !email}
                  startIcon={success ? <CheckCircle /> : null}
                  sx={{
                    background: success
                      ? '#10B981'
                      : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                    borderRadius: 2,
                    py: 1.5,
                    '&:hover': {
                      background: success
                        ? '#10B981'
                        : 'linear-gradient(135deg, #5a67d8 0%, #6b4299 100%)',
                    },
                  }}
                >
                  {success ? 'You\'re on the list!' : loading ? 'Joining...' : 'Join Waitlist'}
                </Button>
                {error && (
                  <Alert severity="error" sx={{ borderRadius: 2 }}>
                    {error}
                  </Alert>
                )}
              </Stack>
            </form>
            <Typography
              variant="caption"
              sx={{ display: 'block', mt: 2, color: 'text.secondary' }}
            >
              No spam. We'll only email when we launch.
            </Typography>
          </Box>

          {/* Social Proof */}
          <Stack direction="row" spacing={4} sx={{ mt: 4 }}>
            <Box sx={{ textAlign: 'center' }}>
              <Typography variant="h4" sx={{ color: 'white', fontWeight: 700 }}>
                500+
              </Typography>
              <Typography sx={{ color: 'rgba(255, 255, 255, 0.8)', fontSize: '0.9rem' }}>
                Early signups
              </Typography>
            </Box>
            <Box sx={{ textAlign: 'center' }}>
              <Typography variant="h4" sx={{ color: 'white', fontWeight: 700 }}>
                2025
              </Typography>
              <Typography sx={{ color: 'rgba(255, 255, 255, 0.8)', fontSize: '0.9rem' }}>
                Launch year
              </Typography>
            </Box>
            <Box sx={{ textAlign: 'center' }}>
              <Typography variant="h4" sx={{ color: 'white', fontWeight: 700 }}>
                Free
              </Typography>
              <Typography sx={{ color: 'rgba(255, 255, 255, 0.8)', fontSize: '0.9rem' }}>
                To start
              </Typography>
            </Box>
          </Stack>

          {/* Footer */}
          <Box sx={{ mt: 8, pb: 4 }}>
            <Typography sx={{ color: 'rgba(255, 255, 255, 0.6)', fontSize: '0.875rem' }}>
              © 2025 This Fit Tho. All rights reserved.
            </Typography>
          </Box>
        </Stack>
      </Container>

      {/* Success Snackbar */}
      <Snackbar
        open={success}
        autoHideDuration={6000}
        onClose={() => setSuccess(false)}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      >
        <Alert severity="success" sx={{ borderRadius: 2 }}>
          Welcome to the waitlist! We'll notify you when we launch.
        </Alert>
      </Snackbar>
    </Box>
  );
}