import React, { useMemo, useState } from "react";
import {
  Alert,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  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 { useSession } from "../state/session-context";
import { useTheme, type AppTheme } from "../theme";

export default function AgencyCreateScreen() {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  const manager = useSession();
  const { t } = useI18n();
  const theme = useTheme();
  const styles = useMemo(() => createStyles(theme), [theme]);
  const placeholderColor = theme.colors.placeholder;
  const insets = useSafeAreaInsets();
  const [advisorName, setAdvisorName] = useState("");

  async function handleCreate() {
    const normalized = advisorName.trim();
    if (!normalized) {
      Alert.alert(t("entry.alert.enterAdvisorName"));
      return;
    }
    const data = await manager.createSession(normalized);
    if (data) {
      navigation.replace("Lobby");
    }
  }

  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.createStepTitle")}</Text>
        <Text style={styles.heroBody}>{t("entry.createStepSubtitle")}</Text>
      </View>

      <View style={styles.card}>
        <Text style={styles.cardTitle}>{t("entry.createTitle")}</Text>
        <Text style={styles.cardSubtitle}>{t("entry.createDescription")}</Text>
        <TextInput
          style={styles.input}
          placeholder={t("entry.advisorName")}
          placeholderTextColor={placeholderColor}
          value={advisorName}
          onChangeText={setAdvisorName}
        />
        <TouchableOpacity style={styles.button} onPress={handleCreate}>
          <Text style={styles.buttonText}>{t("entry.openAgency")}</Text>
        </TouchableOpacity>
      </View>

      <TouchableOpacity
        style={styles.linkButton}
        onPress={() => navigation.replace("AgencyJoin")}
      >
        <Text style={styles.linkText}>{t("entry.linkAccessExisting")}</Text>
      </TouchableOpacity>
    </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: 12,
      backgroundColor: theme.colors.brandSurface,
      borderWidth: 1,
      borderColor: theme.colors.brandSurfaceAlt,
    },
    heroTitle: {
      color: theme.colors.brandText,
      fontSize: 28,
      fontWeight: "800",
      letterSpacing: -0.8,
    },
    heroBody: {
      color: theme.colors.brandTextMuted,
      fontSize: 15,
      lineHeight: 22,
    },
    card: {
      backgroundColor: theme.colors.surface,
      borderRadius: 24,
      padding: 20,
      gap: 14,
      borderWidth: 1,
      borderColor: theme.colors.border,
    },
    cardTitle: {
      color: theme.colors.text,
      fontSize: 22,
      fontWeight: "700",
      letterSpacing: -0.4,
    },
    cardSubtitle: {
      color: theme.colors.textMuted,
      fontSize: 14,
      lineHeight: 21,
    },
    input: {
      borderWidth: 1,
      borderColor: theme.colors.border,
      backgroundColor: theme.colors.inputBackground,
      color: theme.colors.inputText,
      borderRadius: 16,
      paddingHorizontal: 14,
      paddingVertical: 13,
    },
    button: {
      backgroundColor: theme.colors.primary,
      borderRadius: 999,
      paddingVertical: 14,
      alignItems: "center",
    },
    buttonText: {
      color: theme.colors.primaryText,
      fontWeight: "700",
    },
    linkButton: {
      paddingVertical: 12,
      alignItems: "center",
    },
    linkText: {
      color: theme.colors.textMuted,
      fontWeight: "600",
    },
  });
