'use client';

import { Box, Container, Typography, Paper } from '@mui/material';
import Link from 'next/link';
import { AppShell } from '@/components/layouts/AppShell/AppShell';
import { ProtectedRoute } from '@/components/common/ProtectedRoute';

export default function CookiePolicyPage() {
  const lastUpdated = 'October 4, 2025';

  return (
    <ProtectedRoute>
      <AppShell>
        <Container maxWidth="md" sx={{ py: 4 }}>
      <Paper elevation={0} sx={{ p: 4, border: 1, borderColor: 'divider' }}>
        <Typography variant="h3" component="h1" gutterBottom>
          Cookie Policy
        </Typography>

        <Typography variant="body2" color="text.secondary" paragraph>
          Last Updated: {lastUpdated}
        </Typography>

        <Box sx={{ mt: 4 }}>
          <Typography variant="h5" gutterBottom sx={{ mt: 3 }}>
            1. What Are Cookies?
          </Typography>
          <Typography paragraph>
            Cookies are small text files stored on your device (computer, smartphone, tablet) when you visit websites or use applications.
            They help websites remember your preferences, login status, and browsing behavior.
          </Typography>
          <Typography paragraph>
            ParentFlow uses cookies and similar tracking technologies (collectively "cookies") to provide, improve, and secure our Service.
          </Typography>

          <Typography variant="h5" gutterBottom sx={{ mt: 3 }}>
            2. Why We Use Cookies
          </Typography>
          <Typography component="div" paragraph>
            We use cookies for the following purposes:
            <ul>
              <li><strong>Authentication:</strong> Keep you logged in across sessions</li>
              <li><strong>Security:</strong> Detect suspicious activity and prevent fraud</li>
              <li><strong>Preferences:</strong> Remember your language, timezone, and app settings</li>
              <li><strong>Performance:</strong> Monitor app performance and error rates</li>
              <li><strong>Analytics:</strong> Understand how users interact with our Service (anonymized)</li>
              <li><strong>Features:</strong> Enable real-time sync and notifications</li>
            </ul>
          </Typography>

          <Typography variant="h5" gutterBottom sx={{ mt: 3 }}>
            3. Types of Cookies We Use
          </Typography>

          <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
            3.1 Strictly Necessary Cookies
          </Typography>
          <Typography paragraph>
            These cookies are essential for the Service to function. Without them, you cannot log in, save data, or use core features.
          </Typography>
          <Typography component="div" paragraph>
            <strong>Examples:</strong>
            <ul>
              <li><strong>auth_token:</strong> JWT access token for authentication (expires in 1 hour)</li>
              <li><strong>refresh_token:</strong> Refresh token for session renewal (expires in 7 days)</li>
              <li><strong>device_id:</strong> Device fingerprint for multi-device management</li>
              <li><strong>csrf_token:</strong> Protection against cross-site request forgery</li>
            </ul>
          </Typography>
          <Typography paragraph>
            <strong>Storage Duration:</strong> Session cookies (deleted when you close the app) or up to 7 days for refresh tokens.
          </Typography>

          <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
            3.2 Functional Cookies
          </Typography>
          <Typography paragraph>
            These cookies remember your preferences and settings to enhance your experience.
          </Typography>
          <Typography component="div" paragraph>
            <strong>Examples:</strong>
            <ul>
              <li><strong>language:</strong> Your preferred language (e.g., English, Spanish)</li>
              <li><strong>timezone:</strong> Your timezone for accurate timestamps</li>
              <li><strong>theme:</strong> Light or dark mode preference</li>
              <li><strong>onboarding_completed:</strong> Whether you've completed the setup wizard</li>
            </ul>
          </Typography>
          <Typography paragraph>
            <strong>Storage Duration:</strong> Up to 1 year.
          </Typography>

          <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
            3.3 Performance and Analytics Cookies
          </Typography>
          <Typography paragraph>
            These cookies help us understand how users interact with the Service so we can improve it.
            All analytics data is anonymized and does not personally identify you.
          </Typography>
          <Typography component="div" paragraph>
            <strong>Examples:</strong>
            <ul>
              <li><strong>_ga (Google Analytics):</strong> Anonymized usage statistics (if enabled)</li>
              <li><strong>session_id:</strong> Track user sessions for performance monitoring</li>
              <li><strong>error_tracking:</strong> Error logs sent to Sentry (anonymized)</li>
            </ul>
          </Typography>
          <Typography paragraph>
            <strong>Storage Duration:</strong> Up to 2 years.
          </Typography>
          <Typography paragraph>
            <strong>Your Control:</strong> You can disable analytics cookies in Settings → Privacy → Analytics.
          </Typography>

          <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
            3.4 Advertising Cookies
          </Typography>
          <Typography paragraph sx={{ fontWeight: 'bold', color: 'success.main' }}>
            WE DO NOT USE ADVERTISING COOKIES OR SELL YOUR DATA TO ADVERTISERS.
          </Typography>
          <Typography paragraph>
            ParentFlow does not display third-party advertisements. We do not track you across other websites or apps.
          </Typography>

          <Typography variant="h5" gutterBottom sx={{ mt: 3 }}>
            4. Third-Party Cookies
          </Typography>
          <Typography paragraph>
            We use trusted third-party services that may set their own cookies:
          </Typography>
          <Typography component="div" paragraph>
            <ul>
              <li>
                <strong>Firebase (Google):</strong> Push notifications and authentication
                <br />
                <Link href="https://policies.google.com/privacy" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'underline' }}>
                  Privacy Policy
                </Link>
              </li>
              <li>
                <strong>Sentry:</strong> Error tracking and performance monitoring (anonymized)
                <br />
                <Link href="https://sentry.io/privacy/" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'underline' }}>
                  Privacy Policy
                </Link>
              </li>
              <li>
                <strong>AWS CloudFront:</strong> Content delivery and caching
                <br />
                <Link href="https://aws.amazon.com/privacy/" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'underline' }}>
                  Privacy Policy
                </Link>
              </li>
            </ul>
          </Typography>

          <Typography variant="h5" gutterBottom sx={{ mt: 3 }}>
            5. How to Manage Cookies
          </Typography>

          <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
            5.1 In-App Settings
          </Typography>
          <Typography paragraph>
            You can manage cookie preferences in the app:
          </Typography>
          <Typography component="div" paragraph>
            <ol>
              <li>Go to <strong>Settings → Privacy → Cookie Preferences</strong></li>
              <li>Toggle analytics and performance cookies on or off</li>
              <li>Note: Strictly necessary cookies cannot be disabled as they're required for the app to function</li>
            </ol>
          </Typography>

          <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
            5.2 Browser Settings
          </Typography>
          <Typography paragraph>
            If you're using the web version, you can manage cookies through your browser settings:
          </Typography>
          <Typography component="div" paragraph>
            <ul>
              <li><strong>Chrome:</strong> Settings → Privacy and Security → Cookies and other site data</li>
              <li><strong>Safari:</strong> Preferences → Privacy → Manage Website Data</li>
              <li><strong>Firefox:</strong> Settings → Privacy & Security → Cookies and Site Data</li>
              <li><strong>Edge:</strong> Settings → Cookies and site permissions</li>
            </ul>
          </Typography>

          <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
            5.3 Mobile Device Settings
          </Typography>
          <Typography paragraph>
            On mobile devices, you can reset your advertising ID or limit tracking:
          </Typography>
          <Typography component="div" paragraph>
            <ul>
              <li><strong>iOS:</strong> Settings → Privacy → Tracking → Allow Apps to Request to Track (toggle OFF)</li>
              <li><strong>Android:</strong> Settings → Google → Ads → Opt out of Ads Personalization</li>
            </ul>
          </Typography>

          <Typography variant="h5" gutterBottom sx={{ mt: 3 }}>
            6. Impact of Disabling Cookies
          </Typography>
          <Typography paragraph>
            If you disable cookies, some features may not work properly:
          </Typography>
          <Typography component="div" paragraph>
            <ul>
              <li>You may need to log in every time you open the app</li>
              <li>Your preferences (language, timezone) won't be saved</li>
              <li>Real-time family sync may be delayed</li>
              <li>We won't be able to troubleshoot errors as effectively</li>
            </ul>
          </Typography>

          <Typography variant="h5" gutterBottom sx={{ mt: 3 }}>
            7. Children's Privacy
          </Typography>
          <Typography paragraph>
            Our Service is designed for parents and caregivers, not children under 13.
            We comply with the Children's Online Privacy Protection Act (COPPA).
          </Typography>
          <Typography paragraph>
            We do not knowingly collect data from children under 13 without verifiable parental consent.
            Parents can review and delete their child's information at any time through the app settings.
          </Typography>

          <Typography variant="h5" gutterBottom sx={{ mt: 3 }}>
            8. Updates to This Policy
          </Typography>
          <Typography paragraph>
            We may update this Cookie Policy from time to time to reflect changes in technology or legal requirements.
            We will notify you of significant changes by email or through the app.
          </Typography>
          <Typography paragraph>
            Your continued use of the Service after changes constitutes acceptance of the updated Cookie Policy.
          </Typography>

          <Typography variant="h5" gutterBottom sx={{ mt: 3 }}>
            9. Contact Us
          </Typography>
          <Typography paragraph>
            If you have questions about our use of cookies, please contact us:
          </Typography>
          <Typography component="div" paragraph>
            <strong>Email:</strong> hello@parentflow.com<br />
            <strong>Address:</strong> Serbota 3, Bucharest, Romania
          </Typography>

          <Box sx={{ mt: 4, pt: 3, borderTop: 1, borderColor: 'divider' }}>
            <Typography variant="h6" gutterBottom>
              Cookie Preference Center
            </Typography>
            <Typography paragraph>
              To manage your cookie preferences, visit <strong>Settings → Privacy → Cookie Preferences</strong> in the app.
            </Typography>
          </Box>

          <Box sx={{ mt: 4, pt: 3, borderTop: 1, borderColor: 'divider' }}>
            <Typography variant="body2" color="text.secondary">
              Related Legal Documents:
            </Typography>
            <Box sx={{ display: 'flex', gap: 2, mt: 1, flexWrap: 'wrap' }}>
              <Link href="/legal/privacy" style={{ textDecoration: 'none' }}>
                <Typography color="primary" sx={{ '&:hover': { textDecoration: 'underline' } }}>
                  Privacy Policy
                </Typography>
              </Link>
              <Link href="/legal/terms" style={{ textDecoration: 'none' }}>
                <Typography color="primary" sx={{ '&:hover': { textDecoration: 'underline' } }}>
                  Terms of Service
                </Typography>
              </Link>
              <Link href="/legal/eula" style={{ textDecoration: 'none' }}>
                <Typography color="primary" sx={{ '&:hover': { textDecoration: 'underline' } }}>
                  EULA
                </Typography>
              </Link>
            </Box>
          </Box>
        </Box>
      </Paper>
    </Container>
      </AppShell>
    </ProtectedRoute>
  );
}