import React, { useMemo } from "react";
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import BrandLockup from "../components/BrandLockup";
import { useI18n } from "../i18n";
import type { RootStackParamList } from "../navigation/types";
import { useTheme, type AppTheme } from "../theme";

export default function EntryLandingScreen() {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  const { t } = useI18n();
  const theme = useTheme();
  const styles = useMemo(() => createStyles(theme), [theme]);
  const insets = useSafeAreaInsets();

  return (
    <ScrollView
      style={styles.scroll}
      contentContainerStyle={[
        styles.container,
        {
          paddingTop: insets.top + 16,
          paddingBottom: insets.bottom + 24,
          paddingLeft: insets.left + 20,
          paddingRight: insets.right + 20,
        },
      ]}
    >
      <View style={styles.hero}>
        <BrandLockup variant="hero" subtitle={t("entry.heroBadge")} onDark />
        <Text style={styles.heroTitle}>{t("entry.landingTitle")}</Text>
        <Text style={styles.heroBody}>{t("entry.landingBody")}</Text>
      </View>

      <View style={styles.actions}>
        <TouchableOpacity
          style={styles.primaryButton}
          onPress={() => navigation.navigate("AgencyJoin")}
        >
          <Text style={styles.primaryButtonText}>{t("entry.accessAgency")}</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.secondaryButton}
          onPress={() => navigation.navigate("AgencyCreate")}
        >
          <Text style={styles.secondaryButtonText}>{t("entry.openAgency")}</Text>
        </TouchableOpacity>
      </View>

      <Text style={styles.footerNote}>{t("entry.landingFooter")}</Text>
    </ScrollView>
  );
}

const createStyles = (theme: AppTheme) =>
  StyleSheet.create({
    scroll: {
      flex: 1,
      backgroundColor: theme.colors.background,
    },
    container: {
      gap: 18,
      backgroundColor: theme.colors.background,
    },
    hero: {
      borderRadius: 28,
      padding: 22,
      gap: 14,
      backgroundColor: theme.colors.brandSurface,
      borderWidth: 1,
      borderColor: theme.colors.brandSurfaceAlt,
    },
    heroTitle: {
      color: theme.colors.brandText,
      fontSize: 28,
      fontWeight: "800",
      letterSpacing: -1,
    },
    heroBody: {
      color: theme.colors.brandTextMuted,
      lineHeight: 21,
      fontSize: 14,
    },
    actions: {
      gap: 12,
    },
    primaryButton: {
      borderRadius: 999,
      paddingVertical: 16,
      alignItems: "center",
      backgroundColor: theme.colors.primary,
    },
    primaryButtonText: {
      color: theme.colors.primaryText,
      fontSize: 16,
      fontWeight: "700",
    },
    secondaryButton: {
      borderRadius: 999,
      paddingVertical: 16,
      alignItems: "center",
      backgroundColor: theme.colors.surface,
      borderWidth: 1,
      borderColor: theme.colors.border,
    },
    secondaryButtonText: {
      color: theme.colors.text,
      fontSize: 16,
      fontWeight: "700",
    },
    footerNote: {
      color: theme.colors.textMuted,
      fontSize: 13,
      lineHeight: 19,
      textAlign: "center",
    },
  });
