import { withClickTracking } from "../../services/telemetry";
import React from "react";
import { Linking, ScrollView, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useNavigation } from "../../context/NavigationContext";
import { StatusBar } from "expo-status-bar";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";
import { IconButton } from "../../components/button";
import { EntropyByline } from "../../components/entropy-mark";
import { useAppConfig } from "../../context/AppConfigContext";
import type { LegalSection } from "./TermsOfServiceScreen";

export interface PrivacyPolicyScreenProps {
  /**
   * Per-app section list. When omitted, falls back to
   * `AppConfig.privacyText` (rendered as a single section) or a generic
   * placeholder.
   */
  sections?: LegalSection[];
  /** Optional highlight bullet list (vault renders four privacy bullets). */
  highlights?: string[];
  buildLabel?: string;
  effectiveDate?: string;
  supportEmail?: string;
  organisationName?: string;
}

export function PrivacyPolicyScreen({
  sections,
  highlights,
  buildLabel,
  effectiveDate,
  supportEmail = "support@entropysoftworks.com",
  organisationName,
}: PrivacyPolicyScreenProps) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";
  const router = useNavigation();
  const { appName, privacyText } = useAppConfig();

  const resolvedSections: LegalSection[] =
    sections ??
    (privacyText
      ? [{ title: "Privacy", content: privacyText }]
      : [{ title: "Privacy Policy", content: `Privacy policy for ${appName}.` }]);

  const today =
    effectiveDate ??
    new Date().toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });

  const org = organisationName ?? appName;

  return (
    <SafeAreaView className="flex-1" style={{ backgroundColor: isDark ? "#000000" : "#FFFFFF" }}>
      <StatusBar style={isDark ? "light" : "dark"} />

      <View className="flex-1" style={{ backgroundColor: isDark ? "#000000" : "#FFFFFF" }}>
        <View className="px-6 pt-4 pb-6">
          <View className="flex-row items-center justify-between mb-6">
            <IconButton
              variant="ghost"
              size="sm"
              telemetryId="auth.privacy_policy.back"
              onPress={() => router.back()}
            >
              <Ionicons name="arrow-back" size={20} color={isDark ? "#FFFFFF" : "#000000"} />
            </IconButton>

            {buildLabel ? (
              <Text className="text-xs" style={{ color: isDark ? "#999999" : "#666666" }}>
                {buildLabel}
              </Text>
            ) : null}
          </View>

          <Text
            className="font-sans-bold mb-3"
            style={{ fontSize: 36, color: isDark ? "#FFFFFF" : "#000000" }}
          >
            Privacy Policy
          </Text>

          <Text className="font-mono text-sm" style={{ color: isDark ? "#999999" : "#666666" }}>
            Effective Date: {today}
          </Text>
        </View>

        <ScrollView
          className="flex-1 px-6"
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{ paddingBottom: 40 }}
        >
          <View
            className="rounded-lg mb-4 p-4"
            style={{
              backgroundColor: isDark ? "#1A1A1A" : "#F9F9F9",
              borderWidth: 1,
              borderColor: isDark ? "#333333" : "#E5E5E5",
            }}
          >
            <Text
              className="font-mono text-base"
              style={{ color: isDark ? "#E5E5E5" : "#333333", lineHeight: 24 }}
            >
              This Privacy Policy explains how we collect, use, disclose, and safeguard your
              information when you use {appName}.
            </Text>
          </View>

          {highlights && highlights.length > 0 ? (
            <View
              className="rounded-lg mb-4 p-4"
              style={{
                backgroundColor: isDark ? "#1A2E1A" : "#F0FFF4",
                borderWidth: 1,
                borderColor: isDark ? "#4A7C4A" : "#9AE6B4",
              }}
            >
              <Text
                className="font-sans-medium text-lg mb-3"
                style={{ color: isDark ? "#9AE6B4" : "#22543D" }}
              >
                Key Privacy Features
              </Text>
              <View className="gap-2">
                {highlights.map((item, idx) => (
                  <View key={idx} className="flex-row items-center">
                    <Ionicons
                      name="checkmark-circle"
                      size={16}
                      color={isDark ? "#4ADE80" : "#16A34A"}
                    />
                    <Text
                      className="font-mono ml-2 text-sm"
                      style={{ color: isDark ? "#9AE6B4" : "#22543D" }}
                    >
                      {item}
                    </Text>
                  </View>
                ))}
              </View>
            </View>
          ) : null}

          <View className="gap-4">
            {resolvedSections.map((section, index) => (
              <View
                key={index}
                className="rounded-lg p-4"
                style={{
                  backgroundColor: isDark ? "#0A0A0A" : "#FFFFFF",
                  borderWidth: 1,
                  borderColor: isDark ? "#333333" : "#E5E5E5",
                }}
              >
                <Text
                  className="font-sans-medium text-lg mb-2"
                  style={{ color: isDark ? "#FFFFFF" : "#000000" }}
                >
                  {section.title}
                </Text>
                <Text
                  className="font-mono text-sm"
                  style={{ color: isDark ? "#999999" : "#666666", lineHeight: 22 }}
                >
                  {section.content}
                </Text>
              </View>
            ))}

            <View
              className="rounded-lg p-4"
              style={{
                backgroundColor: isDark ? "#0A0A0A" : "#FFFFFF",
                borderWidth: 1,
                borderColor: isDark ? "#333333" : "#E5E5E5",
              }}
            >
              <Text
                className="font-sans-medium text-lg mb-2"
                style={{ color: isDark ? "#FFFFFF" : "#000000" }}
              >
                Contact
              </Text>
              <Text
                className="font-mono text-sm"
                style={{ color: isDark ? "#999999" : "#666666", lineHeight: 22 }}
              >
                For privacy-related questions or concerns email{" "}
                <Text
                  className="font-mono text-sm underline"
                  style={{ color: isDark ? "#6BA3E5" : "#4A90E2" }}
                  onPress={withClickTracking("auth.privacy_policy.open_u_r_l", () =>
                    Linking.openURL(`mailto:${supportEmail}`)
                  )}
                >
                  {supportEmail}
                </Text>
              </Text>
            </View>
          </View>

          <View
            className="rounded-lg mt-6 p-4"
            style={{
              backgroundColor: isDark ? "#1A2332" : "#F0F8FF",
              borderWidth: 1,
              borderColor: isDark ? "#2A3F5F" : "#D0E0FF",
            }}
          >
            <View className="flex-row items-start">
              <Ionicons
                name="shield-checkmark"
                size={20}
                color="#4A90E2"
                style={{ marginTop: 2, marginRight: 8 }}
              />
              <View className="flex-1">
                <Text
                  className="font-sans-medium text-sm mb-2"
                  style={{ color: isDark ? "#FFFFFF" : "#000000" }}
                >
                  Your Consent
                </Text>
                <Text
                  className="font-mono text-xs"
                  style={{ color: isDark ? "#999999" : "#666666", lineHeight: 20 }}
                >
                  By using {appName}, you consent to this Privacy Policy and agree to its terms.
                </Text>
              </View>
            </View>
          </View>

          <View className="mt-8 items-center">
            <Text
              className="font-mono text-xs text-center"
              style={{ color: isDark ? "#666666" : "#999999" }}
            >
              © {new Date().getFullYear()} {org}. All rights reserved.
            </Text>
            <View style={{ marginTop: 20 }}>
              <EntropyByline size={16} />
            </View>
          </View>
        </ScrollView>
      </View>
    </SafeAreaView>
  );
}

export default PrivacyPolicyScreen;