import { memo, useCallback, useEffect, useRef } from "react";
import {
  Pressable,
  ScrollView,
  TextInput,
  View,
  type LayoutChangeEvent,
  type NativeSyntheticEvent,
  type ViewProps,
  useColorScheme,
} from "react-native";

import { AppText as Text } from "../../components/AppText";
import { MOBILE_TYPOGRAPHY } from "../../lib/typography";
import { resolveNativeTerminalSurfaceView } from "./nativeTerminalModule";
import {
  buildGhosttyThemeConfig,
  getPierreTerminalTheme,
  type TerminalTheme,
} from "./terminalTheme";
import { terminalDebugLog } from "./terminalDebugLog";

interface TerminalInputEvent {
  readonly data: string;
}

interface TerminalResizeEvent {
  readonly cols: number;
  readonly rows: number;
}

interface TerminalSurfaceProps extends ViewProps {
  readonly terminalKey: string;
  readonly buffer: string;
  readonly fontSize?: number;
  readonly isRunning: boolean;
  readonly keyboardFocusRequest?: number;
  readonly theme?: TerminalTheme;
  readonly onInput: (data: string) => void;
  readonly onResize: (size: { readonly cols: number; readonly rows: number }) => void;
}

function estimateGridSize(input: {
  readonly width: number;
  readonly height: number;
  readonly fontSize: number;
}): { readonly cols: number; readonly rows: number } {
  const cellWidth = input.fontSize * 0.62;
  const cellHeight = input.fontSize * 1.35;
  return {
    cols: Math.max(20, Math.min(400, Math.floor(input.width / cellWidth))),
    rows: Math.max(5, Math.min(200, Math.floor(input.height / cellHeight))),
  };
}

const FallbackTerminalSurface = memo(function FallbackTerminalSurface(props: TerminalSurfaceProps) {
  const fontSize = props.fontSize ?? MOBILE_TYPOGRAPHY.label.fontSize;
  const inputRef = useRef<TextInput>(null);
  const appearanceScheme = useColorScheme() === "light" ? "light" : "dark";
  const theme = props.theme ?? getPierreTerminalTheme(appearanceScheme);
  const statusLabel = props.isRunning
    ? "Native terminal unavailable. Using text fallback."
    : "Open terminal to start a shell.";

  const handleLayout = (event: LayoutChangeEvent) => {
    const { width, height } = event.nativeEvent.layout;
    props.onResize(estimateGridSize({ width, height, fontSize }));
  };

  useEffect(() => {
    if ((props.keyboardFocusRequest ?? 0) > 0) {
      inputRef.current?.blur();
      const focusFrame = requestAnimationFrame(() => inputRef.current?.focus());
      return () => cancelAnimationFrame(focusFrame);
    }

    return undefined;
  }, [props.keyboardFocusRequest]);

  return (
    <View
      style={[
        {
          flex: 1,
          backgroundColor: theme.background,
          borderRadius: 8,
          overflow: "hidden",
        },
        props.style,
      ]}
      onLayout={handleLayout}
    >
      <View style={{ flex: 1, paddingHorizontal: 10, paddingVertical: 8 }}>
        <Text
          style={{
            color: theme.mutedForeground,
            fontSize: MOBILE_TYPOGRAPHY.caption.fontSize,
            paddingBottom: 8,
          }}
        >
          {statusLabel}
        </Text>
        <ScrollView
          style={{ flex: 1 }}
          contentContainerStyle={{ paddingBottom: 12 }}
          showsVerticalScrollIndicator={false}
        >
          <Text
            selectable
            style={{
              color: theme.foreground,
              fontFamily: "Menlo",
              fontSize,
              lineHeight: Math.round(fontSize * 1.35),
            }}
          >
            {props.buffer || "$ "}
          </Text>
        </ScrollView>
      </View>
      <View
        style={{
          borderTopWidth: 1,
          borderTopColor: theme.border,
          flexDirection: "row",
          alignItems: "center",
          gap: 8,
          padding: 8,
        }}
      >
        <TextInput
          ref={inputRef}
          autoCapitalize="none"
          autoCorrect={false}
          blurOnSubmit={false}
          editable={props.isRunning}
          placeholder="type and press return"
          placeholderTextColor={theme.mutedForeground}
          returnKeyType="send"
          style={{
            color: theme.foreground,
            flex: 1,
            fontFamily: "Menlo",
            fontSize: MOBILE_TYPOGRAPHY.footnote.fontSize,
            padding: 0,
          }}
          onSubmitEditing={(event) => {
            const text = event.nativeEvent.text;
            if (text.length > 0) {
              props.onInput(`${text}\n`);
            }
          }}
        />
        <Pressable
          disabled={!props.isRunning}
          style={({ pressed }) => ({
            opacity: !props.isRunning ? 0.35 : pressed ? 0.65 : 1,
            paddingHorizontal: 10,
            paddingVertical: 6,
            borderRadius: 8,
            backgroundColor: theme.border,
          })}
          onPress={() => props.onInput("\u0003")}
        >
          <Text
            style={{
              color: theme.foreground,
              fontFamily: "DMSans_700Bold",
              fontSize: MOBILE_TYPOGRAPHY.caption.fontSize,
            }}
          >
            Ctrl-C
          </Text>
        </Pressable>
      </View>
    </View>
  );
});

export const TerminalSurface = memo(function TerminalSurface(props: TerminalSurfaceProps) {
  const fontSize = props.fontSize ?? MOBILE_TYPOGRAPHY.label.fontSize;
  const keyboardInputRef = useRef<TextInput>(null);
  const appearanceScheme = useColorScheme() === "light" ? "light" : "dark";
  const theme = props.theme ?? getPierreTerminalTheme(appearanceScheme);
  const { onInput, onResize } = props;
  const NativeTerminalSurfaceView = resolveNativeTerminalSurfaceView();
  const hasNativeSurface = Boolean(NativeTerminalSurfaceView);

  useEffect(() => {
    terminalDebugLog("native:surface", {
      terminalKey: props.terminalKey,
      native: hasNativeSurface,
      bufferLen: props.buffer.length,
      isRunning: props.isRunning,
    });
  }, [hasNativeSurface, props.buffer.length, props.isRunning, props.terminalKey]);
  const handleNativeInput = useCallback(
    (event: NativeSyntheticEvent<TerminalInputEvent>) => {
      onInput(event.nativeEvent.data);
    },
    [onInput],
  );
  const handleNativeResize = useCallback(
    (event: NativeSyntheticEvent<TerminalResizeEvent>) => {
      onResize({
        cols: event.nativeEvent.cols,
        rows: event.nativeEvent.rows,
      });
    },
    [onResize],
  );

  // Reopen focus through React and forward input normally; this avoids a native focus-command bridge.
  useEffect(() => {
    if (!NativeTerminalSurfaceView || (props.keyboardFocusRequest ?? 0) <= 0) {
      return undefined;
    }

    keyboardInputRef.current?.blur();
    const focusFrame = requestAnimationFrame(() => keyboardInputRef.current?.focus());
    return () => cancelAnimationFrame(focusFrame);
  }, [NativeTerminalSurfaceView, props.keyboardFocusRequest]);

  const handleKeyboardInput = useCallback(
    (data: string) => {
      if (data.length > 0) {
        onInput(data);
        keyboardInputRef.current?.clear();
      }
    },
    [onInput],
  );

  if (NativeTerminalSurfaceView) {
    return (
      <View style={props.style}>
        <NativeTerminalSurfaceView
          appearanceScheme={appearanceScheme}
          backgroundColor={theme.background}
          foregroundColor={theme.foreground}
          mutedForegroundColor={theme.mutedForeground}
          terminalKey={props.terminalKey}
          initialBuffer={props.buffer}
          fontSize={fontSize}
          style={{ flex: 1 }}
          themeConfig={buildGhosttyThemeConfig(theme)}
          onInput={handleNativeInput}
          onResize={handleNativeResize}
        />
        <TextInput
          ref={keyboardInputRef}
          autoCapitalize="none"
          autoCorrect={false}
          blurOnSubmit={false}
          caretHidden
          editable={props.isRunning}
          keyboardType="ascii-capable"
          style={{ bottom: 0, height: 1, left: 0, opacity: 0.01, position: "absolute", width: 1 }}
          onChangeText={handleKeyboardInput}
          onKeyPress={(event) => {
            if (event.nativeEvent.key === "Backspace") {
              onInput("\u007f");
            }
          }}
          onSubmitEditing={() => onInput("\n")}
        />
      </View>
    );
  }

  return <FallbackTerminalSurface {...props} fontSize={fontSize} theme={theme} />;
});