import React, { useCallback, useState } from "react";
import {
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  Pressable,
  ScrollView,
  Text,
  TextInput,
  TouchableWithoutFeedback,
  View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { router } from "expo-router";
import { useConnection } from "../contexts/ConnectionContext";
import { StatusDot } from "../components/ui/StatusDot";
import { ServerConfig } from "../types";

export default function SettingsScreen() {
  const { serverConfig, status, connect, disconnect, saveServerConfig } =
    useConnection();

  const [host, setHost] = useState(serverConfig?.host ?? "");
  const [port, setPort] = useState(
    serverConfig?.port ? String(serverConfig.port) : ""
  );
  const [saved, setSaved] = useState(false);

  const handleSave = useCallback(async () => {
    const trimmedHost = host.trim();
    const portNum = parseInt(port.trim(), 10);

    if (!trimmedHost || isNaN(portNum) || portNum < 1 || portNum > 65535) {
      return;
    }

    const config: ServerConfig = { host: trimmedHost, port: portNum };
    await saveServerConfig(config);
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  }, [host, port, saveServerConfig]);

  const handleConnect = useCallback(() => {
    if (status === "connected" || status === "connecting") {
      disconnect();
    } else {
      connect();
    }
  }, [status, connect, disconnect]);

  const isFormValid = host.trim().length > 0 && parseInt(port, 10) > 0;

  return (
    <SafeAreaView className="flex-1 bg-pai-bg" edges={["top", "bottom"]}>
      <KeyboardAvoidingView
        className="flex-1"
        behavior={Platform.OS === "ios" ? "padding" : "height"}
      >
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <ScrollView
            className="flex-1"
            contentContainerStyle={{ paddingBottom: 32 }}
            keyboardShouldPersistTaps="handled"
          >
            {/* Header */}
            <View className="flex-row items-center px-4 py-3 border-b border-pai-border">
              <Pressable
                onPress={() => router.back()}
                className="w-9 h-9 items-center justify-center rounded-full bg-pai-bg-tertiary mr-3"
              >
                <Text className="text-pai-text text-base">←</Text>
              </Pressable>
              <Text className="text-pai-text text-xl font-bold">Settings</Text>
            </View>

            <View className="px-4 mt-6">
              {/* Connection status card */}
              <View className="bg-pai-surface rounded-2xl p-4 mb-6">
                <Text className="text-pai-text-secondary text-xs font-medium uppercase tracking-widest mb-3">
                  Connection Status
                </Text>
                <View className="flex-row items-center gap-3">
                  <StatusDot status={status} size={12} />
                  <Text className="text-pai-text text-base font-medium">
                    {status === "connected"
                      ? "Connected"
                      : status === "connecting"
                      ? "Connecting..."
                      : "Disconnected"}
                  </Text>
                </View>
                {serverConfig && (
                  <Text className="text-pai-text-muted text-sm mt-2">
                    ws://{serverConfig.host}:{serverConfig.port}
                  </Text>
                )}
              </View>

              {/* Server config */}
              <Text className="text-pai-text-secondary text-xs font-medium uppercase tracking-widest mb-3">
                Server Configuration
              </Text>

              <View className="bg-pai-surface rounded-2xl overflow-hidden mb-4">
                {/* Host */}
                <View className="px-4 py-3 border-b border-pai-border">
                  <Text className="text-pai-text-muted text-xs mb-1">
                    Host / IP Address
                  </Text>
                  <TextInput
                    value={host}
                    onChangeText={setHost}
                    placeholder="192.168.1.100"
                    placeholderTextColor="#5A5A78"
                    autoCapitalize="none"
                    autoCorrect={false}
                    keyboardType="url"
                    className="text-pai-text text-base"
                  />
                </View>

                {/* Port */}
                <View className="px-4 py-3">
                  <Text className="text-pai-text-muted text-xs mb-1">
                    Port
                  </Text>
                  <TextInput
                    value={port}
                    onChangeText={setPort}
                    placeholder="8765"
                    placeholderTextColor="#5A5A78"
                    keyboardType="number-pad"
                    className="text-pai-text text-base"
                  />
                </View>
              </View>

              {/* Save button */}
              <Pressable
                onPress={handleSave}
                disabled={!isFormValid}
                className={`rounded-2xl py-4 items-center mb-3 ${
                  isFormValid ? "bg-pai-accent" : "bg-pai-surface"
                }`}
              >
                <Text
                  className={`text-base font-semibold ${
                    isFormValid ? "text-white" : "text-pai-text-muted"
                  }`}
                >
                  {saved ? "Saved!" : "Save Configuration"}
                </Text>
              </Pressable>

              {/* Connect/Disconnect button */}
              <Pressable
                onPress={handleConnect}
                disabled={!serverConfig}
                className={`rounded-2xl py-4 items-center ${
                  status === "connected"
                    ? "bg-pai-error/20"
                    : "bg-pai-success/20"
                }`}
              >
                <Text
                  className={`text-base font-semibold ${
                    status === "connected"
                      ? "text-pai-error"
                      : "text-pai-success"
                  }`}
                >
                  {status === "connected"
                    ? "Disconnect"
                    : status === "connecting"
                    ? "Connecting..."
                    : "Connect"}
                </Text>
              </Pressable>
            </View>
          </ScrollView>
        </TouchableWithoutFeedback>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}