import { Stack } from "expo-router";
import React from "react";
import { useTranslation } from "react-i18next";
import { ScrollView, StyleSheet, View } from "react-native";

import { ThemedText } from "@/components/themed-text";
import { useTheme } from "@/context/ThemeContext";

export default function PrivacyScreen() {
  const { theme } = useTheme();
  const { t } = useTranslation();
  const isDark = theme === "dark";

  return (
    <>
      <Stack.Screen
        options={{
          title: t("privacy.title"),
          headerShown: true,
          headerStyle: {
            backgroundColor: isDark ? "#000" : "#f2f2f7",
          },
          headerTintColor: isDark ? "#FFFFFF" : "#000000",
          headerShadowVisible: false,
          presentation: "card",
          animation: "slide_from_right",
          contentStyle: { backgroundColor: isDark ? "#000" : "#f2f2f7" },
        }}
      />
      <ScrollView
        style={[
          styles.container,
          { backgroundColor: isDark ? "#000" : "#f2f2f7" },
        ]}
      >
        <View
          style={[
            styles.content,
            { backgroundColor: isDark ? "#1c1c1e" : "#fff" },
          ]}
        >
          <ThemedText style={styles.title}>{t("privacy.page_title")}</ThemedText>
          
          <ThemedText style={styles.sectionTitle}>{t("privacy.section1_title")}</ThemedText>
          <ThemedText style={styles.text}>
            {t("privacy.section1_text")}
          </ThemedText>

          <ThemedText style={styles.sectionTitle}>{t("privacy.section2_title")}</ThemedText>
          <ThemedText style={styles.text}>
            {t("privacy.section2_text")}
          </ThemedText>

          <ThemedText style={styles.sectionTitle}>{t("privacy.section3_title")}</ThemedText>
          <ThemedText style={styles.text}>
            {t("privacy.section3_text")}
          </ThemedText>

          <ThemedText style={styles.sectionTitle}>{t("privacy.section4_title")}</ThemedText>
          <ThemedText style={styles.text}>
            {t("privacy.section4_text")}
          </ThemedText>

          <ThemedText style={styles.sectionTitle}>{t("privacy.section5_title")}</ThemedText>
          <ThemedText style={styles.text}>
            {t("privacy.section5_text")}
          </ThemedText>

          <ThemedText style={styles.sectionTitle}>{t("privacy.section6_title")}</ThemedText>
          <ThemedText style={styles.text}>
            {t("privacy.section6_text")}
          </ThemedText>

          <ThemedText style={styles.updateText}>
            {t("privacy.last_updated")}
          </ThemedText>
        </View>
      </ScrollView>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    margin: 16,
    padding: 20,
    borderRadius: 12, // 稍微增加圆角，更现代
    marginBottom: 40, // 底部留白
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 8,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "700",
    marginTop: 24,
    marginBottom: 10,
  },
  text: {
    fontSize: 15,
    lineHeight: 22,
    opacity: 0.9,
  },
  updateText: {
    fontSize: 13,
    opacity: 0.5,
    marginTop: 32,
    textAlign: "center",
  },
});