biblical-guide.com/app/[locale]/donate/page.tsx

'use client'
import { useState } from 'react'
import {
  Container,
  Typography,
  Box,
  Button,
  TextField,
  Paper,
  CircularProgress,
  Alert,
  FormControlLabel,
  Checkbox,
  ToggleButton,
  ToggleButtonGroup,
  Divider,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
} from '@mui/material'
import {
  Favorite,
  CheckCircle,
  Public,
  Language,
  CloudOff,
  Security,
} from '@mui/icons-material'
import { useRouter } from 'next/navigation'
import { useLocale } from 'next-intl'
import { DONATION_PRESETS } from '@/lib/stripe'

export default function DonatePage() {
  const router = useRouter()
  const locale = useLocale()
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)

  // Form state
  const [selectedAmount, setSelectedAmount] = useState<number | null>(25)
  const [customAmount, setCustomAmount] = useState('')
  const [email, setEmail] = useState('')
  const [name, setName] = useState('')
  const [message, setMessage] = useState('')
  const [isAnonymous, setIsAnonymous] = useState(false)
  const [isRecurring, setIsRecurring] = useState(false)
  const [recurringInterval, setRecurringInterval] = useState<'month' | 'year'>('month')

  const handleAmountSelect = (amount: number | null) => {
    setSelectedAmount(amount)
    setCustomAmount('')
  }

  const handleCustomAmountChange = (value: string) => {
    setCustomAmount(value)
    setSelectedAmount(null)
  }

  const getAmount = (): number | null => {
    if (customAmount) {
      const parsed = parseFloat(customAmount)
      return isNaN(parsed) ? null : parsed
    }
    return selectedAmount
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError(null)

    const amount = getAmount()

    // Validation
    if (!amount || amount < 1) {
      setError('Please enter a valid amount (minimum $1)')
      return
    }

    if (!email || !email.includes('@')) {
      setError('Please enter a valid email address')
      return
    }

    setLoading(true)

    try {
      // Create checkout session
      const response = await fetch('/api/stripe/checkout', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          amount,
          email,
          name: isAnonymous ? 'Anonymous' : name,
          message,
          isAnonymous,
          isRecurring,
          recurringInterval,
          locale,
        }),
      })

      const data = await response.json()

      if (!response.ok) {
        throw new Error(data.error || 'Failed to create checkout session')
      }

      // Redirect to Stripe Checkout
      if (data.url) {
        window.location.href = data.url
      }
    } catch (err) {
      console.error('Donation error:', err)
      setError(err instanceof Error ? err.message : 'An error occurred')
      setLoading(false)
    }
  }

  const features = [
    {
      icon: <Public />,
      text: '1,200+ Bible versions in multiple languages',
    },
    {
      icon: <Language />,
      text: 'Multilingual access for believers worldwide',
    },
    {
      icon: <CloudOff />,
      text: 'Offline access to Scripture anywhere',
    },
    {
      icon: <Security />,
      text: 'Complete privacy - no ads or tracking',
    },
  ]

  return (
    <Box sx={{ bgcolor: 'grey.50', minHeight: '100vh', py: 8 }}>
      <Container maxWidth="lg">
        {/* Hero Section */}
        <Box sx={{ textAlign: 'center', mb: 8 }}>
          <Favorite sx={{ fontSize: 64, color: 'primary.main', mb: 2 }} />
          <Typography
            variant="h2"
            sx={{
              fontSize: { xs: '2rem', md: '3rem' },
              fontWeight: 700,
              mb: 2,
              letterSpacing: '-0.02em',
            }}
          >
            Support Biblical Guide
          </Typography>
          <Typography
            variant="h5"
            sx={{
              fontSize: { xs: '1.1rem', md: '1.3rem' },
              color: 'text.secondary',
              maxWidth: 700,
              mx: 'auto',
            }}
          >
            Your donation keeps Scripture free and accessible to everyone, everywhere.
          </Typography>
        </Box>

        <Box sx={{ display: 'flex', gap: 4, flexDirection: { xs: 'column', md: 'row' } }}>
          {/* Donation Form */}
          <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 58%' } }}>
            <Paper elevation={2} sx={{ p: 4 }}>
              <Typography variant="h5" sx={{ fontWeight: 600, mb: 3 }}>
                Make a Donation
              </Typography>

              {error && (
                <Alert severity="error" sx={{ mb: 3 }}>
                  {error}
                </Alert>
              )}

              {success && (
                <Alert severity="success" sx={{ mb: 3 }}>
                  Thank you for your donation!
                </Alert>
              )}

              <form onSubmit={handleSubmit}>
                {/* Recurring Donation Toggle */}
                <Box sx={{ mb: 3 }}>
                  <FormControlLabel
                    control={
                      <Checkbox
                        checked={isRecurring}
                        onChange={(e) => setIsRecurring(e.target.checked)}
                      />
                    }
                    label="Make this a recurring donation"
                  />
                  {isRecurring && (
                    <ToggleButtonGroup
                      value={recurringInterval}
                      exclusive
                      onChange={(_, value) => value && setRecurringInterval(value)}
                      sx={{ mt: 2, width: '100%' }}
                    >
                      <ToggleButton value="month" sx={{ flex: 1 }}>
                        Monthly
                      </ToggleButton>
                      <ToggleButton value="year" sx={{ flex: 1 }}>
                        Yearly
                      </ToggleButton>
                    </ToggleButtonGroup>
                  )}
                </Box>

                {/* Amount Selection */}
                <Box sx={{ mb: 3 }}>
                  <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
                    Select Amount (USD)
                  </Typography>
                  <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2 }}>
                    {DONATION_PRESETS.map((preset) => (
                      <Button
                        key={preset.amount}
                        fullWidth
                        variant={selectedAmount === preset.amount ? 'contained' : 'outlined'}
                        onClick={() => handleAmountSelect(preset.amount)}
                        sx={{
                          py: 2,
                          fontSize: '1.1rem',
                          fontWeight: 600,
                        }}
                      >
                        {preset.label}
                      </Button>
                    ))}
                  </Box>

                  <TextField
                    fullWidth
                    label="Custom Amount"
                    type="number"
                    value={customAmount}
                    onChange={(e) => handleCustomAmountChange(e.target.value)}
                    sx={{ mt: 2 }}
                    InputProps={{
                      startAdornment: <Typography sx={{ mr: 1 }}>$</Typography>,
                    }}
                    inputProps={{ min: 1, step: 0.01 }}
                  />
                </Box>

                <Divider sx={{ my: 3 }} />

                {/* Contact Information */}
                <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
                  Your Information
                </Typography>

                <TextField
                  fullWidth
                  label="Email Address"
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  sx={{ mb: 2 }}
                />

                {!isAnonymous && (
                  <TextField
                    fullWidth
                    label="Name (optional)"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    sx={{ mb: 2 }}
                  />
                )}

                <FormControlLabel
                  control={
                    <Checkbox
                      checked={isAnonymous}
                      onChange={(e) => setIsAnonymous(e.target.checked)}
                    />
                  }
                  label="Make this donation anonymous"
                  sx={{ mb: 2 }}
                />

                <TextField
                  fullWidth
                  label="Message (optional)"
                  multiline
                  rows={3}
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  placeholder="Share why you're supporting Biblical Guide..."
                  sx={{ mb: 3 }}
                />

                {/* Submit Button */}
                <Button
                  type="submit"
                  variant="contained"
                  size="large"
                  fullWidth
                  disabled={loading}
                  sx={{
                    py: 2,
                    fontSize: '1.1rem',
                    fontWeight: 600,
                  }}
                >
                  {loading ? (
                    <CircularProgress size={24} color="inherit" />
                  ) : (
                    `Donate ${getAmount() ? `$${getAmount()}` : ''}`
                  )}
                </Button>

                <Typography
                  variant="body2"
                  color="text.secondary"
                  sx={{ mt: 2, textAlign: 'center' }}
                >
                  Secure payment powered by Stripe
                </Typography>
              </form>
            </Paper>
          </Box>

          {/* Impact Section */}
          <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 42%' } }}>
            <Paper elevation={2} sx={{ p: 4, mb: 3, bgcolor: 'primary.light', color: 'white' }}>
              <Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
                Your Impact
              </Typography>
              <Typography variant="body1" sx={{ mb: 3, lineHeight: 1.8 }}>
                Every donation directly supports the servers, translations, and technology that
                make Biblical Guide possible.
              </Typography>
              <List>
                {features.map((feature, index) => (
                  <ListItem key={index} sx={{ px: 0 }}>
                    <ListItemIcon sx={{ color: 'white', minWidth: 40 }}>
                      <CheckCircle />
                    </ListItemIcon>
                    <ListItemText primary={feature.text} />
                  </ListItem>
                ))}
              </List>
            </Paper>

            <Paper elevation={2} sx={{ p: 4 }}>
              <Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
                Why Donate?
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 2, lineHeight: 1.8 }}>
                Biblical Guide is committed to keeping God&apos;s Word free and accessible to all.
                We don&apos;t have ads, paywalls, or sell your data.
              </Typography>
              <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.8 }}>
                When you give, you&apos;re not paying for access — you&apos;re keeping access open
                for millions who cannot afford to pay.
              </Typography>
              <Box
                sx={{
                  mt: 3,
                  p: 2,
                  bgcolor: 'primary.light',
                  color: 'white',
                  borderRadius: 2,
                }}
              >
                <Typography variant="body1" sx={{ fontStyle: 'italic', textAlign: 'center' }}>
                  Freely you have received; freely give.
                </Typography>
                <Typography variant="body2" sx={{ textAlign: 'center', mt: 1, fontWeight: 600 }}>
                  — Matthew 10:8
                </Typography>
              </Box>
            </Paper>
          </Box>
        </Box>
      </Container>
    </Box>
  )
}