import React, { useEffect } from "react";
import { Image, Pressable, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { router } from "expo-router";
import * as Haptics from "expo-haptics";
import { useChat } from "../contexts/ChatContext";

interface NavButton {
  label: string;
  key: string;
  icon?: string;
  flex?: number;
}

const NAV_ROWS: NavButton[][] = [
  // Row 1: Vi motion
  [
    { label: "0", key: "0" },
    { label: "k", key: "k", icon: "↑" },
    { label: "G", key: "G" },
    { label: "dd", key: "dd" },
  ],
  // Row 2: Arrow keys
  [
    { label: "h", key: "h", icon: "←" },
    { label: "j", key: "j", icon: "↓" },
    { label: "l", key: "l", icon: "→" },
    { label: "Esc", key: "escape" },
  ],
  // Row 3: Action keys
  [
    { label: "Tab", key: "tab" },
    { label: "Enter", key: "enter", flex: 2 },
    { label: "^C", key: "ctrl-c" },
  ],
];

export default function NavigateScreen() {
  const { latestScreenshot, requestScreenshot, sendNavKey } = useChat();

  // Request a screenshot when entering navigation mode
  useEffect(() => {
    requestScreenshot();
  }, [requestScreenshot]);

  function handleNavPress(key: string) {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    sendNavKey(key);
  }

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "#0A0A0F" }} edges={["top", "bottom"]}>
      {/* Header */}
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
          paddingHorizontal: 16,
          paddingVertical: 10,
          borderBottomWidth: 1,
          borderBottomColor: "#2E2E45",
        }}
      >
        <Pressable
          onPress={() => router.back()}
          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
          style={{
            width: 36,
            height: 36,
            alignItems: "center",
            justifyContent: "center",
            borderRadius: 18,
            backgroundColor: "#1E1E2E",
          }}
        >
          <Text style={{ color: "#E8E8F0", fontSize: 16 }}>←</Text>
        </Pressable>
        <Text style={{ color: "#E8E8F0", fontSize: 18, fontWeight: "700" }}>
          Navigate
        </Text>
        <Pressable
          onPress={() => requestScreenshot()}
          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
          style={{
            paddingHorizontal: 12,
            paddingVertical: 8,
            borderRadius: 12,
            backgroundColor: "#1E1E2E",
          }}
        >
          <Text style={{ color: "#4A9EFF", fontSize: 14, fontWeight: "600" }}>
            Refresh
          </Text>
        </Pressable>
      </View>

      {/* Screenshot area */}
      <View style={{ flex: 1, padding: 8 }}>
        {latestScreenshot ? (
          <Image
            source={{ uri: `data:image/png;base64,${latestScreenshot}` }}
            style={{
              flex: 1,
              borderRadius: 12,
              backgroundColor: "#14141F",
            }}
            resizeMode="contain"
          />
        ) : (
          <View
            style={{
              flex: 1,
              alignItems: "center",
              justifyContent: "center",
              backgroundColor: "#14141F",
              borderRadius: 12,
            }}
          >
            <Text style={{ color: "#5A5A78", fontSize: 16 }}>
              Loading screenshot...
            </Text>
          </View>
        )}
      </View>

      {/* Navigation buttons */}
      <View
        style={{
          paddingHorizontal: 16,
          paddingBottom: 12,
          gap: 10,
        }}
      >
        {NAV_ROWS.map((row, rowIdx) => (
          <View
            key={rowIdx}
            style={{
              flexDirection: "row",
              gap: 10,
            }}
          >
            {row.map((btn) => (
              <Pressable
                key={btn.key}
                onPress={() => handleNavPress(btn.key)}
                style={({ pressed }) => ({
                  flex: btn.flex ?? 1,
                  height: 56,
                  borderRadius: 14,
                  alignItems: "center",
                  justifyContent: "center",
                  backgroundColor: pressed ? "#4A9EFF" : "#1E1E2E",
                  borderWidth: 1.5,
                  borderColor: pressed ? "#4A9EFF" : "#2E2E45",
                })}
              >
                {btn.icon ? (
                  <View style={{ alignItems: "center" }}>
                    <Text style={{ color: "#E8E8F0", fontSize: 20, fontWeight: "700" }}>
                      {btn.icon}
                    </Text>
                    <Text style={{ color: "#5A5A78", fontSize: 10, marginTop: 1 }}>
                      {btn.label}
                    </Text>
                  </View>
                ) : (
                  <Text style={{ color: "#E8E8F0", fontSize: 16, fontWeight: "700" }}>
                    {btn.label}
                  </Text>
                )}
              </Pressable>
            ))}
          </View>
        ))}
      </View>
    </SafeAreaView>
  );
}