import React, { useEffect, useMemo, useState } from "react";
import {
  FlatList,
  Platform,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useNavigation } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
import type { RootStackParamList } from "../navigation/types";
import { useSession } from "../state/session-context";
import { useI18n } from "../i18n";
import { useTheme } from "../theme";
import type { AppTheme } from "../theme";
import ExitGameButton from "../components/ExitGameButton";

export default function LobbyScreen() {
  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 [dummyName, setDummyName] = useState("");
  const [dummyBalance, setDummyBalance] = useState("1500");
  const insets = useSafeAreaInsets();
  const topInset = insets.top || (Platform.OS === "ios" ? 44 : 0);
  const containerStyle = useMemo(
    () => [
      styles.container,
      {
        paddingTop: topInset + 20,
        paddingBottom: insets.bottom + 20,
        paddingLeft: insets.left + 20,
        paddingRight: insets.right + 20,
      },
    ],
    [
      styles.container,
      topInset,
      insets.bottom,
      insets.left,
      insets.right,
    ],
  );

  useEffect(() => {
    if (!manager.session || !manager.me) return;
    if (manager.session.status === "active") {
      navigation.replace(manager.isBanker ? "BankerTabs" : "PlayerTabs");
    }
  }, [manager.session, manager.me, manager.isBanker, navigation]);

  if (!manager.session || !manager.me) {
    return (
      <View style={containerStyle}>
        <Text style={styles.title}>{t("common.loadingLobby")}</Text>
        {manager.error ? <Text style={styles.helper}>{manager.error}</Text> : null}
        <ExitGameButton mode="full" />
      </View>
    );
  }

  const canStart = manager.isBanker && manager.session.status === "lobby";
  const pendingTakeover = manager.session.takeoverRequests.find(
    (request) =>
      request.requesterId === manager.playerId && request.status === "pending",
  );
  const pendingRequests = manager.isBanker
    ? manager.session.takeoverRequests.filter((request) => request.status === "pending")
    : [];

  return (
    <View style={containerStyle}>
      <Text style={styles.title}>{t("lobby.title")}</Text>
      <Text style={styles.subtitle}>{t("lobby.code", { code: manager.session.code })}</Text>
      {pendingTakeover ? (
        <Text style={styles.helper}>{t("entry.takeoverPending")}</Text>
      ) : null}

      <FlatList
        data={manager.session.players}
        keyExtractor={(item) => item.id}
        contentContainerStyle={styles.list}
        renderItem={({ item }) => (
          <View style={styles.listItem}>
            <View>
              <Text style={styles.playerName}>{item.name}</Text>
              <Text style={styles.playerMeta}>
                {item.role === "banker" ? t("common.banker") : t("common.player")}{" "}
                {item.isDummy ? `- ${t("common.dummy")}` : ""}
              </Text>
            </View>
            <Text style={styles.playerMeta}>
              {item.connected ? t("common.online") : t("common.offline")}
            </Text>
          </View>
        )}
      />

      {manager.isBanker && pendingRequests.length > 0 ? (
        <View style={styles.card}>
          <Text style={styles.cardTitle}>{t("banker.takeoverApprovals")}</Text>
          <View style={styles.takeoverList}>
            {pendingRequests.map((request) => {
              const requester =
                manager.session.players.find((player) => player.id === request.requesterId) ??
                null;
              const dummy =
                manager.session.players.find((player) => player.id === request.dummyId) ?? null;
              const requesterName =
                requester?.name ?? request.requesterName ?? t("common.player");
              return (
                <View key={request.id} style={styles.takeoverRow}>
                  <View style={styles.takeoverMeta}>
                    <Text style={styles.takeoverName}>{requesterName}</Text>
                    <Text style={styles.takeoverSub}>
                      {t("banker.wants", { name: dummy?.name ?? t("common.dummy") })}
                    </Text>
                  </View>
                  <TouchableOpacity
                    style={styles.buttonSmall}
                    onPress={() =>
                      manager.sendMessage({
                        type: "banker_takeover_approve",
                        sessionId: manager.sessionId,
                        bankerId: manager.me?.id,
                        dummyId: request.dummyId,
                        requesterId: request.requesterId,
                      })
                    }
                  >
                    <Text style={styles.buttonSmallText}>{t("banker.approve")}</Text>
                  </TouchableOpacity>
                </View>
              );
            })}
          </View>
        </View>
      ) : null}

      {manager.isBanker && manager.session.status === "lobby" && (
        <View style={styles.card}>
          <Text style={styles.cardTitle}>{t("lobby.addDummyTitle")}</Text>
          <Text style={styles.helper}>{t("lobby.addDummySubtitle")}</Text>
          <TextInput
            style={styles.input}
            placeholder={t("lobby.enterDummyName")}
            placeholderTextColor={placeholderColor}
            value={dummyName}
            onChangeText={setDummyName}
          />
          <TextInput
            style={styles.input}
            placeholder={t("banker.tools.startingBalance")}
            placeholderTextColor={placeholderColor}
            value={dummyBalance}
            onChangeText={setDummyBalance}
            keyboardType="number-pad"
          />
          <TouchableOpacity
            style={styles.buttonSecondary}
            onPress={() => {
              manager.sendMessage({
                type: "banker_create_dummy",
                sessionId: manager.sessionId,
                bankerId: manager.me?.id,
                name: dummyName,
                balance: Number(dummyBalance) || undefined,
              });
              setDummyName("");
              setDummyBalance("1500");
            }}
          >
            <Text style={styles.buttonSecondaryText}>{t("lobby.addDummyButton")}</Text>
          </TouchableOpacity>
        </View>
      )}

      {canStart && (
        <TouchableOpacity
          style={styles.button}
          onPress={() =>
            manager.sendMessage({
              type: "banker_start",
              sessionId: manager.sessionId,
              bankerId: manager.me?.id,
            })
          }
        >
          <Text style={styles.buttonText}>{t("lobby.startGame")}</Text>
        </TouchableOpacity>
      )}

      <ExitGameButton mode="full" />
    </View>
  );
}

const createStyles = (theme: AppTheme) =>
  StyleSheet.create({
    container: {
      flex: 1,
      paddingHorizontal: 0,
      paddingBottom: 0,
      gap: 12,
      backgroundColor: theme.colors.background,
    },
    title: {
      fontSize: 24,
      fontWeight: "700",
      color: theme.colors.text,
    },
    subtitle: {
      color: theme.colors.textMuted,
    },
    list: {
      gap: 10,
      paddingBottom: 20,
    },
    listItem: {
      backgroundColor: theme.colors.surface,
      borderRadius: 12,
      padding: 12,
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
    },
    playerName: {
      fontWeight: "600",
      color: theme.colors.text,
    },
    playerMeta: {
      fontSize: 12,
      color: theme.colors.textMuted,
    },
    card: {
      backgroundColor: theme.colors.surface,
      borderRadius: 16,
      padding: 16,
      gap: 10,
      borderWidth: 1,
      borderColor: theme.colors.borderMuted,
    },
    cardTitle: {
      fontWeight: "600",
      color: theme.colors.text,
    },
    helper: {
      color: theme.colors.textMuted,
      fontSize: 12,
    },
    input: {
      borderWidth: 1,
      borderColor: theme.colors.border,
      backgroundColor: theme.colors.inputBackground,
      color: theme.colors.inputText,
      borderRadius: 12,
      paddingHorizontal: 12,
      paddingVertical: 10,
    },
    button: {
      backgroundColor: theme.colors.primary,
      paddingVertical: 14,
      borderRadius: 999,
      alignItems: "center",
    },
    buttonText: {
      color: theme.colors.primaryText,
      fontWeight: "600",
    },
    buttonSecondary: {
      backgroundColor: theme.colors.secondary,
      paddingVertical: 12,
      borderRadius: 999,
      alignItems: "center",
    },
    buttonSecondaryText: {
      color: theme.colors.secondaryText,
      fontWeight: "600",
    },
    takeoverList: {
      gap: 10,
    },
    takeoverRow: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      paddingVertical: 6,
      borderBottomWidth: 1,
      borderBottomColor: theme.colors.borderMuted,
    },
    takeoverMeta: {
      flex: 1,
      paddingRight: 12,
    },
    takeoverName: {
      fontWeight: "600",
      color: theme.colors.text,
    },
    takeoverSub: {
      fontSize: 12,
      color: theme.colors.textMuted,
      marginTop: 2,
    },
    buttonSmall: {
      backgroundColor: theme.colors.secondary,
      paddingHorizontal: 12,
      paddingVertical: 6,
      borderRadius: 999,
    },
    buttonSmallText: {
      color: theme.colors.secondaryText,
      fontWeight: "600",
      fontSize: 12,
    },
  });
