import React, { useCallback, useEffect, useState } from "react";
import {
  Modal,
  Pressable,
  ScrollView,
  Text,
  TextInput,
  View,
} from "react-native";
import * as Haptics from "expo-haptics";
import { WsSession } from "../types";
import { useChat } from "../contexts/ChatContext";

interface SessionPickerProps {
  visible: boolean;
  onClose: () => void;
}

export function SessionPicker({ visible, onClose }: SessionPickerProps) {
  const { sessions, requestSessions, switchSession, renameSession } = useChat();
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editName, setEditName] = useState("");

  useEffect(() => {
    if (visible) {
      requestSessions();
    }
  }, [visible, requestSessions]);

  const handleSwitch = useCallback(
    (session: WsSession) => {
      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
      switchSession(session.id);
      onClose();
    },
    [switchSession, onClose]
  );

  const handleStartRename = useCallback((session: WsSession) => {
    setEditingId(session.id);
    setEditName(session.name);
  }, []);

  const handleConfirmRename = useCallback(() => {
    if (editingId && editName.trim()) {
      renameSession(editingId, editName.trim());
    }
    setEditingId(null);
    setEditName("");
  }, [editingId, editName, renameSession]);

  return (
    <Modal
      visible={visible}
      animationType="slide"
      transparent
      onRequestClose={onClose}
    >
      <View
        style={{
          flex: 1,
          backgroundColor: "rgba(0,0,0,0.6)",
          justifyContent: "flex-end",
        }}
      >
        <Pressable
          style={{ flex: 1 }}
          onPress={onClose}
        />
        <View
          style={{
            backgroundColor: "#14141F",
            borderTopLeftRadius: 24,
            borderTopRightRadius: 24,
            maxHeight: "70%",
            paddingBottom: 40,
          }}
        >
          {/* Handle bar */}
          <View style={{ alignItems: "center", paddingTop: 12, paddingBottom: 8 }}>
            <View
              style={{
                width: 40,
                height: 4,
                borderRadius: 2,
                backgroundColor: "#2E2E45",
              }}
            />
          </View>

          {/* Header */}
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between",
              paddingHorizontal: 20,
              paddingBottom: 16,
            }}
          >
            <Text
              style={{
                color: "#E8E8F0",
                fontSize: 20,
                fontWeight: "700",
              }}
            >
              Sessions
            </Text>
            <Pressable
              onPress={() => requestSessions()}
              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
              style={{
                paddingHorizontal: 12,
                paddingVertical: 6,
                borderRadius: 12,
                backgroundColor: "#1E1E2E",
              }}
            >
              <Text style={{ color: "#9898B0", fontSize: 13 }}>Refresh</Text>
            </Pressable>
          </View>

          {/* Session list */}
          <ScrollView
            style={{ paddingHorizontal: 16 }}
            showsVerticalScrollIndicator={false}
          >
            {sessions.length === 0 ? (
              <View style={{ alignItems: "center", paddingVertical: 32 }}>
                <Text style={{ color: "#5A5A78", fontSize: 15 }}>
                  No sessions found
                </Text>
              </View>
            ) : (
              sessions.map((session) => (
                <View key={session.id} style={{ marginBottom: 8 }}>
                  {editingId === session.id ? (
                    /* Rename mode */
                    <View
                      style={{
                        backgroundColor: "#1E1E2E",
                        borderRadius: 16,
                        padding: 16,
                        borderWidth: 2,
                        borderColor: "#4A9EFF",
                      }}
                    >
                      <TextInput
                        value={editName}
                        onChangeText={setEditName}
                        autoFocus
                        onSubmitEditing={handleConfirmRename}
                        returnKeyType="done"
                        style={{
                          color: "#E8E8F0",
                          fontSize: 17,
                          fontWeight: "600",
                          padding: 0,
                          marginBottom: 12,
                        }}
                        placeholderTextColor="#5A5A78"
                        placeholder="Session name..."
                      />
                      <View style={{ flexDirection: "row", gap: 8 }}>
                        <Pressable
                          onPress={handleConfirmRename}
                          style={{
                            flex: 1,
                            backgroundColor: "#4A9EFF",
                            borderRadius: 10,
                            paddingVertical: 10,
                            alignItems: "center",
                          }}
                        >
                          <Text style={{ color: "#FFF", fontSize: 15, fontWeight: "600" }}>
                            Save
                          </Text>
                        </Pressable>
                        <Pressable
                          onPress={() => setEditingId(null)}
                          style={{
                            flex: 1,
                            backgroundColor: "#252538",
                            borderRadius: 10,
                            paddingVertical: 10,
                            alignItems: "center",
                          }}
                        >
                          <Text style={{ color: "#9898B0", fontSize: 15 }}>Cancel</Text>
                        </Pressable>
                      </View>
                    </View>
                  ) : (
                    /* Normal session row */
                    <Pressable
                      onPress={() => handleSwitch(session)}
                      onLongPress={() => handleStartRename(session)}
                      style={({ pressed }) => ({
                        backgroundColor: pressed ? "#252538" : "#1E1E2E",
                        borderRadius: 16,
                        padding: 16,
                        flexDirection: "row",
                        alignItems: "center",
                        borderWidth: session.isActive ? 2 : 1,
                        borderColor: session.isActive ? "#4A9EFF" : "#2E2E45",
                      })}
                    >
                      {/* Number badge */}
                      <View
                        style={{
                          width: 36,
                          height: 36,
                          borderRadius: 18,
                          backgroundColor: session.isActive ? "#4A9EFF" : "#252538",
                          alignItems: "center",
                          justifyContent: "center",
                          marginRight: 14,
                        }}
                      >
                        <Text
                          style={{
                            color: session.isActive ? "#FFF" : "#9898B0",
                            fontSize: 16,
                            fontWeight: "700",
                          }}
                        >
                          {session.index}
                        </Text>
                      </View>

                      {/* Session info */}
                      <View style={{ flex: 1 }}>
                        <Text
                          style={{
                            color: "#E8E8F0",
                            fontSize: 17,
                            fontWeight: "600",
                          }}
                          numberOfLines={1}
                        >
                          {session.name}
                        </Text>
                        <Text
                          style={{
                            color: "#5A5A78",
                            fontSize: 12,
                            marginTop: 2,
                          }}
                        >
                          {session.kind === "api" ? "Headless" : session.kind === "visual" ? "Visual" : session.type === "terminal" ? "Terminal" : "Claude"}
                          {session.isActive ? " — active" : ""}
                        </Text>
                      </View>

                      {/* Active indicator */}
                      {session.isActive && (
                        <View
                          style={{
                            width: 10,
                            height: 10,
                            borderRadius: 5,
                            backgroundColor: "#2ED573",
                          }}
                        />
                      )}
                    </Pressable>
                  )}
                </View>
              ))
            )}

            {/* Hint */}
            <Text
              style={{
                color: "#5A5A78",
                fontSize: 12,
                textAlign: "center",
                paddingVertical: 12,
              }}
            >
              Tap to switch — Long press to rename
            </Text>
          </ScrollView>
        </View>
      </View>
    </Modal>
  );
}