'use client'
import {
  Container,
  Grid,
  Card,
  CardContent,
  Typography,
  Box,
  Button,
  Paper,
  useTheme,
} from '@mui/material'
import {
  MenuBook,
  Chat,
  Favorite as Prayer,
  Search,
  AutoStories,
  Favorite,
} from '@mui/icons-material'
import { useRouter } from 'next/navigation'
import { useTranslations, useLocale } from 'next-intl'

export default function Home() {
  const theme = useTheme()
  const router = useRouter()
  const t = useTranslations('home')
  const locale = useLocale()

  const features = [
    {
      title: t('features.bible.title'),
      description: t('features.bible.description'),
      icon: <MenuBook sx={{ fontSize: 40, color: 'primary.main' }} />,
      path: '/bible',
      color: theme.palette.primary.main,
    },
    {
      title: t('features.chat.title'),
      description: t('features.chat.description'),
      icon: <Chat sx={{ fontSize: 40, color: 'secondary.main' }} />,
      path: '/chat',
      color: theme.palette.secondary.main,
    },
    {
      title: t('features.prayers.title'),
      description: t('features.prayers.description'),
      icon: <Prayer sx={{ fontSize: 40, color: 'success.main' }} />,
      path: '/prayers',
      color: theme.palette.success.main,
    },
    {
      title: t('features.search.title'),
      description: t('features.search.description'),
      icon: <Search sx={{ fontSize: 40, color: 'info.main' }} />,
      path: '/search',
      color: theme.palette.info.main,
    },
  ]

  return (
    <Box>
      {/* Hero Section */}
      <Box
        sx={{
          background: 'linear-gradient(135deg, #009688 0%, #00796B 100%)',
          color: 'white',
          py: 8,
          mb: 6,
        }}
      >
        <Container maxWidth="lg">
          <Grid container spacing={4} alignItems="center">
            <Grid item xs={12} md={8}>
              <Typography variant="h2" component="h1" gutterBottom>
                {t('hero.title')}
              </Typography>
              <Typography variant="h5" component="h2" sx={{ mb: 3, opacity: 0.9 }}>
                {t('hero.subtitle')}
              </Typography>
              <Typography variant="body1" sx={{ mb: 4, opacity: 0.8, maxWidth: 600 }}>
                {t('hero.description')}
              </Typography>
              <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
                <Button
                  variant="contained"
                  size="large"
                  sx={{
                    bgcolor: 'secondary.main',
                    '&:hover': { bgcolor: 'secondary.dark' },
                  }}
                  startIcon={<AutoStories />}
                  onClick={() => router.push(`/${locale}/bible`)}
                >
                  {t('hero.cta.readBible')}
                </Button>
                <Button
                  variant="outlined"
                  size="large"
                  sx={{
                    borderColor: 'white',
                    color: 'white',
                    '&:hover': {
                      borderColor: 'white',
                      bgcolor: 'rgba(255,255,255,0.1)',
                    },
                  }}
                  startIcon={<Chat />}
                  onClick={() => router.push(`/${locale}/chat`)}
                >
                  {t('hero.cta.askAI')}
                </Button>
              </Box>
            </Grid>
            <Grid item xs={12} md={4}>
              <Box sx={{ textAlign: 'center' }}>
                <MenuBook sx={{ fontSize: 120, opacity: 0.8 }} />
              </Box>
            </Grid>
          </Grid>
        </Container>
      </Box>

      {/* Features Section */}
      <Container maxWidth="lg" sx={{ mb: 8 }}>
        <Typography variant="h3" component="h2" textAlign="center" sx={{ mb: 2 }}>
          {t('features.title')}
        </Typography>
        <Typography
          variant="body1"
          textAlign="center"
          color="text.secondary"
          sx={{ mb: 6, maxWidth: 600, mx: 'auto' }}
        >
          {t('features.subtitle')}
        </Typography>

        <Grid container spacing={4} justifyContent="center">
          {features.map((feature, index) => (
            <Grid item xs={12} md={6} key={index} sx={{ display: 'flex', justifyContent: 'center' }}>
              <Card
                sx={{
                  height: '100%',
                  width: '100%',
                  maxWidth: 400,
                  display: 'flex',
                  flexDirection: 'column',
                  transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
                  cursor: 'pointer',
                  '&:hover': {
                    transform: 'translateY(-4px)',
                    boxShadow: 4,
                  },
                }}
                onClick={() => router.push(`/${locale}${feature.path}`)}
              >
                <CardContent sx={{
                  flexGrow: 1,
                  textAlign: 'center',
                  p: 4,
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                  height: 280,
                  width: '100%'
                }}>
                  <Box>
                    <Box sx={{ mb: 2 }}>
                      {feature.icon}
                    </Box>
                    <Typography variant="h5" component="h3" sx={{ fontWeight: 600, mb: 2 }}>
                      {feature.title}
                    </Typography>
                    <Typography
                      variant="body1"
                      color="text.secondary"
                      sx={{
                        lineHeight: 1.6,
                        overflow: 'hidden',
                        display: '-webkit-box',
                        WebkitLineClamp: 3,
                        WebkitBoxOrient: 'vertical',
                      }}
                    >
                      {feature.description}
                    </Typography>
                  </Box>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Container>

      {/* Stats Section */}
      <Paper sx={{ bgcolor: 'background.paper', py: 6, mb: 8 }}>
        <Container maxWidth="lg">
          <Grid container spacing={4} textAlign="center" justifyContent="center">
            <Grid item xs={12} sm={4}>
              <Typography variant="h3" color="primary.main" gutterBottom>
                66
              </Typography>
              <Typography variant="h6">{t('stats.books')}</Typography>
            </Grid>
            <Grid item xs={12} sm={4}>
              <Typography variant="h3" color="secondary.main" gutterBottom>
                31,000+
              </Typography>
              <Typography variant="h6">{t('stats.verses')}</Typography>
            </Grid>
            <Grid item xs={12} sm={4}>
              <Typography variant="h3" color="success.main" gutterBottom>
                24/7
              </Typography>
              <Typography variant="h6">{t('stats.aiAvailable')}</Typography>
            </Grid>
          </Grid>
        </Container>
      </Paper>

      {/* CTA Section */}
      <Container maxWidth="sm" sx={{ textAlign: 'center', mb: 8 }}>
        <Typography variant="h4" component="h2" gutterBottom>
          {t('cta.title')}
        </Typography>
        <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
          {t('cta.description')}
        </Typography>
        <Button
          variant="contained"
          size="large"
          startIcon={<Favorite />}
          sx={{ mr: 2 }}
          onClick={() => router.push(`/${locale}/bible`)}
        >
          {t('cta.startNow')}
        </Button>
      </Container>
    </Box>
  )
}