/**
 * S11. About / Licences (pushed screen) — MAPMAP-NAV-UI-SPEC.md.
 *
 * App/SDK version, the "Built on MapMap" client-demo hook (links to
 * mapmap.ai — this is the whole point of shipping this screen to a
 * prospect), the third-party licence list, and the on-device privacy
 * paragraph. Pushed via react-navigation, which supplies the header/title.
 */
import React from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
import { Card, ListRow } from "../../components";
import { spacing, theme, typeScale } from "../../theme";

export type AboutScreenProps = {
  appVersion: string;
  buildNumber: string;
  sdkVersion: string;
  onOpenMapmapAi: () => void;
  onOpenPrivacyPolicy: () => void;
};

type Licence = {
  name: string;
  notice: string;
};

/** From THIRD-PARTY-NOTICES per the UI spec — static, not sourced from props. */
const LICENCES: Licence[] = [
  {
    name: "OpenStreetMap",
    notice: "© OpenStreetMap contributors, Open Database Licence (ODbL)",
  },
  { name: "OpenMapTiles", notice: "Map tile schema — BSD 3-Clause" },
  { name: "MapLibre", notice: "Map rendering engine — BSD 3-Clause" },
  { name: "Ferrostar", notice: "Turn-by-turn navigation core — BSD 3-Clause" },
  { name: "valhalla-mobile", notice: "On-device routing engine — MIT" },
];

export function AboutScreen({
  appVersion,
  buildNumber,
  sdkVersion,
  onOpenMapmapAi,
  onOpenPrivacyPolicy,
}: AboutScreenProps): React.JSX.Element {
  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={styles.content}
      testID="about-screen"
    >
      <Section title="App">
        <ListRow
          title="Version"
          trailing={<Text style={styles.trailingValue}>{appVersion}</Text>}
          testID="about-app-version"
        />
        <ListRow
          title="Build"
          trailing={<Text style={styles.trailingValue}>{buildNumber}</Text>}
          testID="about-build-number"
        />
        <ListRow
          title="MapMap SDK"
          trailing={<Text style={styles.trailingValue}>{sdkVersion}</Text>}
          testID="about-sdk-version"
        />
      </Section>

      <Card testID="about-built-on-mapmap">
        <Text style={styles.cardHeading}>Built on MapMap</Text>
        <Text style={styles.cardBody}>
          MapMap Nav is a client demo built on the MapMap SDK — fully offline
          turn-by-turn navigation, on-device search and routing, with no
          tracking. Everything in this app is available to your product,
          today.
        </Text>
        <LinkRow label="mapmap.ai" onPress={onOpenMapmapAi} testID="about-mapmap-link" />
      </Card>

      <Section title="Licences">
        {LICENCES.map((licence) => (
          <ListRow
            key={licence.name}
            title={licence.name}
            subtitle={licence.notice}
            testID={`about-licence-${licence.name}`}
          />
        ))}
      </Section>

      <Card testID="about-privacy">
        <Text style={styles.cardHeading}>Privacy</Text>
        <Text style={styles.cardBody}>
          All navigation happens on your device. Search, routing and
          turn-by-turn guidance run entirely offline against the maps you've
          installed — your position and destinations are never sent
          anywhere.
        </Text>
        <LinkRow
          label="Privacy policy"
          onPress={onOpenPrivacyPolicy}
          testID="about-privacy-link"
        />
      </Card>
    </ScrollView>
  );
}

/* ================= internal building blocks ================= */

function Section({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}): React.JSX.Element {
  const items = React.Children.toArray(children);
  return (
    <View>
      <Text style={styles.sectionTitle}>{title}</Text>
      <Card padded={false} style={styles.sectionCard}>
        {items.map((child, index) => (
          <React.Fragment key={index}>
            {child}
            {index < items.length - 1 ? <View style={styles.divider} /> : null}
          </React.Fragment>
        ))}
      </Card>
    </View>
  );
}

function LinkRow({
  label,
  onPress,
  testID,
}: {
  label: string;
  onPress: () => void;
  testID?: string;
}): React.JSX.Element {
  return (
    <ListRow
      title={label}
      onPress={onPress}
      trailing={<Text style={styles.linkArrow}>↗</Text>}
      testID={testID}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.background,
  },
  content: {
    padding: spacing[4],
    gap: spacing[6],
    paddingBottom: spacing[10],
  },
  sectionTitle: {
    fontSize: typeScale.caption.fontSize,
    fontWeight: typeScale.label.fontWeight,
    color: theme.textSecondary,
    textTransform: "uppercase",
    letterSpacing: 0.5,
    marginBottom: spacing[2],
    marginLeft: spacing[1],
  },
  sectionCard: {
    overflow: "hidden",
  },
  divider: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: theme.border,
    marginLeft: spacing[4],
  },
  trailingValue: {
    fontSize: typeScale.body.fontSize,
    color: theme.textSecondary,
  },
  cardHeading: {
    fontSize: typeScale.headline.fontSize,
    fontWeight: typeScale.headline.fontWeight,
    color: theme.textPrimary,
    marginBottom: spacing[2],
  },
  cardBody: {
    fontSize: typeScale.body.fontSize,
    color: theme.textSecondary,
    lineHeight: typeScale.body.lineHeight,
    marginBottom: spacing[3],
  },
  linkArrow: {
    fontSize: typeScale.body.fontSize,
    color: theme.signal,
    fontWeight: "600",
  },
});
