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";

export interface LegalSection {
  title: string;
  content: string;
}

export interface TermsOfServiceScreenProps {
  /**
   * Per-app section list. When omitted, the screen falls back to
   * `AppConfig.termsText` (rendered as a single section) or a generic
   * placeholder.
   */
  sections?: LegalSection[];
  /**
   * Optional version/build label rendered in the header (vault uses
   * `v1.2.3 (4567)` here). Apps that don't ship build metadata can
   * omit this.
   */
  buildLabel?: string;
  /** Effective-date label override. Defaults to today's date. */
  effectiveDate?: string;
  /** Support email surfaced in the contact section. */
  supportEmail?: string;
  /** Footer organisation name. Defaults to `appName`. */
  organisationName?: string;
  /** Footer license blurb. Defaults to "Open Source • MIT License". */
  licenseLabel?: string;
}

export function TermsOfServiceScreen({
  sections,
  buildLabel,
  effectiveDate,
  supportEmail = "support@entropysoftworks.com",
  organisationName,
  licenseLabel = "Open Source • MIT License",
}: TermsOfServiceScreenProps) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";
  const router = useNavigation();
  const { appName, termsText } = useAppConfig();

  const resolvedSections: LegalSection[] =
    sections ??
    (termsText
      ? [{ title: "Terms", content: termsText }]
      : [{ title: "Terms of Service", content: `Terms of service 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.terms_of_service.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" }}
          >
            Terms of Service
          </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 }}
            >
              These Terms of Service (&quot;Terms&quot;) govern your use of {appName} and related
              services. By using {appName}, you agree to be bound by these Terms.
            </Text>
          </View>

          <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 questions about these Terms of Service, please contact us by email at{" "}
                <Text
                  className="font-mono text-sm underline"
                  style={{ color: isDark ? "#6BA3E5" : "#4A90E2" }}
                  onPress={withClickTracking("auth.terms_of_service.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="information-circle"
                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" }}
                >
                  Important Notice
                </Text>
                <Text
                  className="font-mono text-xs"
                  style={{ color: isDark ? "#999999" : "#666666", lineHeight: 20 }}
                >
                  By creating an account or using {appName}, you acknowledge that you have read,
                  understood, and agree to be bound by these Terms of Service. If you do not agree,
                  please discontinue use of the application.
                </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>
            {licenseLabel ? (
              <Text
                className="font-mono text-xs text-center mt-2"
                style={{ color: isDark ? "#666666" : "#999999" }}
              >
                {licenseLabel}
              </Text>
            ) : null}
            <View style={{ marginTop: 20 }}>
              <EntropyByline size={16} />
            </View>
          </View>
        </ScrollView>
      </View>
    </SafeAreaView>
  );
}

export default TermsOfServiceScreen;