'use client';

import { Box, Container, Typography, Paper, Grid, Card, CardContent, CardActionArea } from '@mui/material';
import Link from 'next/link';
import { Gavel, Security, Description, Cookie } from '@mui/icons-material';
import { useRouter } from 'next/navigation';
import { AppShell } from '@/components/layouts/AppShell/AppShell';
import { ProtectedRoute } from '@/components/common/ProtectedRoute';

export default function LegalPage() {
  const router = useRouter();

  const legalDocuments = [
    {
      title: 'Privacy Policy',
      description: 'Learn how we collect, use, and protect your personal information and your child\'s data.',
      icon: <Security sx={{ fontSize: 48, color: 'primary.main' }} />,
      path: '/legal/privacy',
      highlights: ['COPPA Compliance', 'GDPR Rights', 'Data Security', 'Children\'s Privacy'],
    },
    {
      title: 'Terms of Service',
      description: 'Understand the terms and conditions governing your use of ParentFlow.',
      icon: <Description sx={{ fontSize: 48, color: 'primary.main' }} />,
      path: '/legal/terms',
      highlights: ['Acceptable Use', 'Medical Disclaimer', 'User Accounts', 'Subscriptions'],
    },
    {
      title: 'End User License Agreement (EULA)',
      description: 'Review the license agreement for using the ParentFlow software.',
      icon: <Gavel sx={{ fontSize: 48, color: 'primary.main' }} />,
      path: '/legal/eula',
      highlights: ['License Grant', 'AI Features', 'Intellectual Property', 'Warranties'],
    },
    {
      title: 'Cookie Policy',
      description: 'Find out how we use cookies and similar tracking technologies.',
      icon: <Cookie sx={{ fontSize: 48, color: 'primary.main' }} />,
      path: '/legal/cookies',
      highlights: ['Cookie Types', 'Third-Party Services', 'Your Choices', 'Analytics'],
    },
  ];

  return (
    <ProtectedRoute>
      <AppShell>
        <Container maxWidth="lg" sx={{ py: 4 }}>
      <Paper elevation={0} sx={{ p: 4, mb: 4, border: 1, borderColor: 'divider' }}>
        <Typography variant="h3" component="h1" gutterBottom>
          Legal & Privacy
        </Typography>
        <Typography variant="body1" color="text.secondary" paragraph>
          Welcome to our Legal Center. Here you'll find all the legal documents and policies governing your use of ParentFlow.
          We're committed to transparency and protecting your privacy.
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Last Updated: October 4, 2025
        </Typography>
      </Paper>

      <Grid container spacing={3}>
        {legalDocuments.map((doc) => (
          <Grid item xs={12} md={6} key={doc.path}>
            <Card
              elevation={0}
              sx={{
                height: '100%',
                border: 1,
                borderColor: 'divider',
                transition: 'all 0.2s',
                '&:hover': {
                  borderColor: 'primary.main',
                  boxShadow: 2,
                },
              }}
            >
              <CardActionArea
                onClick={() => router.push(doc.path)}
                sx={{ height: '100%', p: 3 }}
              >
                <CardContent sx={{ p: 0 }}>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
                    {doc.icon}
                    <Typography variant="h5" component="h2">
                      {doc.title}
                    </Typography>
                  </Box>
                  <Typography variant="body2" color="text.secondary" paragraph>
                    {doc.description}
                  </Typography>
                  <Box sx={{ mt: 2 }}>
                    <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 'bold' }}>
                      Key Topics:
                    </Typography>
                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 1 }}>
                      {doc.highlights.map((highlight) => (
                        <Typography
                          key={highlight}
                          variant="caption"
                          sx={{
                            px: 1.5,
                            py: 0.5,
                            bgcolor: 'primary.light',
                            color: 'primary.contrastText',
                            borderRadius: 1,
                          }}
                        >
                          {highlight}
                        </Typography>
                      ))}
                    </Box>
                  </Box>
                </CardContent>
              </CardActionArea>
            </Card>
          </Grid>
        ))}
      </Grid>

      <Paper elevation={0} sx={{ p: 4, mt: 4, border: 1, borderColor: 'divider', bgcolor: 'primary.light' }}>
        <Typography variant="h6" gutterBottom>
          Questions or Concerns?
        </Typography>
        <Typography variant="body2" paragraph>
          If you have any questions about our legal policies or how we handle your data, please don't hesitate to contact us:
        </Typography>
        <Typography variant="body2" component="div">
          <strong>Email:</strong> hello@parentflow.com<br />
          <strong>Privacy:</strong> hello@parentflow.com<br />
          <strong>Data Protection Officer:</strong> hello@parentflow.com
        </Typography>
      </Paper>
    </Container>
      </AppShell>
    </ProtectedRoute>
  );
}