/**
 * SessionDrawer — Gmail-style left drawer for session navigation.
 *
 * Slides in from the left with a dark overlay. Shows sessions with
 * unread badges. Swipe left to remove, long press to rename.
 */
import React, { useCallback, useEffect, useRef, useState } from "react";
import {
  Animated,
  Dimensions,
  Keyboard,
  KeyboardAvoidingView,
  LayoutAnimation,
  Platform,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from "react-native";
import {
  GestureHandlerRootView,
  Swipeable,
} from "react-native-gesture-handler";
import DraggableFlatList, {
  RenderItemParams,
  ScaleDecorator,
} from "react-native-draggable-flatlist";
import * as Haptics from "expo-haptics";
import { WsSession, PaiProject } from "../types";
import { useChat } from "../contexts/ChatContext";
import { useTheme, type ThemeColors } from "../contexts/ThemeContext";

const SCREEN_WIDTH = Dimensions.get("window").width;
const DRAWER_WIDTH = SCREEN_WIDTH * 0.82;
const ROW_WIDTH = DRAWER_WIDTH;

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

/* ── Swipeable row ── */

function SessionRow({
  session,
  unreadCount,
  onSwitch,
  onLongPress,
  onDelete,
  onDrag,
  isDragging,
  colors,
}: {
  session: WsSession;
  unreadCount: number;
  onSwitch: () => void;
  onLongPress: () => void;
  onDelete: () => void;
  onDrag: () => void;
  isDragging: boolean;
  colors: ThemeColors;
}) {
  const swipeRef = useRef<Swipeable>(null);

  const renderRightActions = (
    _progress: Animated.AnimatedInterpolation<number>,
    dragX: Animated.AnimatedInterpolation<number>,
  ) => {
    const scale = dragX.interpolate({
      inputRange: [-80, -40, 0],
      outputRange: [1, 0.8, 0],
      extrapolate: "clamp",
    });
    return (
      <Pressable
        onPress={() => {
          swipeRef.current?.close();
          onDelete();
        }}
        style={{
          backgroundColor: colors.danger,
          justifyContent: "center",
          alignItems: "center",
          width: 72,
          borderRadius: 12,
          marginLeft: 8,
        }}
      >
        <Animated.Text
          style={{
            color: "#FFF",
            fontSize: 13,
            fontWeight: "600",
            transform: [{ scale }],
          }}
        >
          Remove
        </Animated.Text>
      </Pressable>
    );
  };

  return (
    <View style={{ width: ROW_WIDTH }}>
      <Swipeable
        ref={swipeRef}
        renderRightActions={renderRightActions}
        rightThreshold={50}
        friction={2}
        overshootRight={false}
      >
        <Pressable onPress={onSwitch} onLongPress={onLongPress} delayLongPress={400}>
          <View
            style={{
              width: ROW_WIDTH,
              flexDirection: "row",
              alignItems: "center",
              paddingVertical: 14,
              paddingLeft: 16,
              paddingRight: 12,
              backgroundColor: session.isActive ? colors.accentBg : "transparent",
              borderRadius: 12,
              opacity: isDragging ? 0.8 : 1,
            }}
          >
            {/* Icon — left */}
            <View
              style={{
                width: 40,
                height: 40,
                borderRadius: 20,
                backgroundColor: session.isActive ? colors.accent : colors.border,
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              {session.isActive ? (
                <View
                  style={{
                    width: 10,
                    height: 10,
                    borderRadius: 5,
                    backgroundColor: "#FFF",
                  }}
                />
              ) : (
                <Text style={{ color: colors.textSecondary, fontSize: 15, fontWeight: "700" }}>
                  {session.kind === "api" ? "A" : "T"}
                </Text>
              )}
            </View>

            {/* Name + subtitle — middle */}
            <View style={{ flex: 1, marginLeft: 14 }}>
              <Text
                style={{
                  color: session.isActive ? colors.accent : colors.text,
                  fontSize: 17,
                  fontWeight: session.isActive ? "700" : "600",
                }}
                numberOfLines={1}
              >
                {session.name}
              </Text>
              <Text
                style={{
                  color: colors.textMuted,
                  fontSize: 12,
                  marginTop: 2,
                }}
                numberOfLines={1}
              >
                {session.kind === "api" ? "Headless" : "Terminal"}
                {session.isActive ? " — active" : ""}
              </Text>
            </View>

            {/* Unread badge */}
            {unreadCount > 0 && (
              <View
                style={{
                  minWidth: 24,
                  height: 24,
                  borderRadius: 12,
                  backgroundColor: colors.accent,
                  alignItems: "center",
                  justifyContent: "center",
                  paddingHorizontal: 7,
                }}
              >
                <Text style={{ color: "#FFF", fontSize: 12, fontWeight: "700" }}>
                  {unreadCount > 99 ? "99+" : unreadCount}
                </Text>
              </View>
            )}

            {/* Drag handle */}
            <Pressable
              onPressIn={onDrag}
              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
              style={{
                marginLeft: 8,
                paddingHorizontal: 4,
                paddingVertical: 8,
              }}
            >
              <Text style={{ color: colors.textMuted, fontSize: 16, letterSpacing: 1 }}>⋮⋮</Text>
            </Pressable>
          </View>
        </Pressable>
      </Swipeable>
    </View>
  );
}

/* ── Inline rename ── */

function RenameEditor({
  name,
  onConfirm,
  onCancel,
  colors,
}: {
  name: string;
  onConfirm: (newName: string) => void;
  onCancel: () => void;
  colors: ThemeColors;
}) {
  const [editName, setEditName] = useState(name);
  return (
    <View style={{ paddingHorizontal: 16, paddingVertical: 8, width: ROW_WIDTH }}>
      <TextInput
        value={editName}
        onChangeText={setEditName}
        autoFocus
        onSubmitEditing={() => onConfirm(editName.trim())}
        onBlur={onCancel}
        returnKeyType="done"
        style={{
          color: colors.text,
          fontSize: 17,
          fontWeight: "600",
          borderBottomWidth: 2,
          borderBottomColor: colors.accent,
          paddingVertical: 10,
          paddingHorizontal: 4,
        }}
        placeholderTextColor={colors.textMuted}
        placeholder="Session name..."
      />
    </View>
  );
}

/* ── Main Drawer ── */

export function SessionDrawer({ visible, onClose }: SessionDrawerProps) {
  const {
    sessions,
    activeSessionId,
    requestSessions,
    switchSession,
    renameSession,
    removeSession,
    createSession,
    fetchProjects,
    projects,
    unreadCounts,
  } = useChat();
  const { colors } = useTheme();
  const [editingId, setEditingId] = useState<string | null>(null);
  const [showProjectPicker, setShowProjectPicker] = useState(false);
  const [customPath, setCustomPath] = useState("");
  const slideAnim = useRef(new Animated.Value(-DRAWER_WIDTH)).current;
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const [rendered, setRendered] = useState(false);

  // Local ordering: merge server sessions while preserving user's drag order
  const [orderedSessions, setOrderedSessions] = useState<WsSession[]>([]);
  useEffect(() => {
    setOrderedSessions((prev) => {
      if (prev.length === 0) return sessions;
      const serverIds = new Set(sessions.map((s) => s.id));
      // Keep existing order, update session data, remove deleted
      const kept = prev
        .filter((p) => serverIds.has(p.id))
        .map((p) => sessions.find((s) => s.id === p.id)!);
      // Append any new sessions at the end
      const keptIds = new Set(kept.map((s) => s.id));
      const added = sessions.filter((s) => !keptIds.has(s.id));
      return [...kept, ...added];
    });
  }, [sessions]);

  useEffect(() => {
    if (visible) {
      Keyboard.dismiss();
      setRendered(true);
      requestSessions();
      Animated.parallel([
        Animated.spring(slideAnim, {
          toValue: 0,
          useNativeDriver: true,
          damping: 22,
          stiffness: 200,
        }),
        Animated.timing(fadeAnim, {
          toValue: 1,
          duration: 200,
          useNativeDriver: true,
        }),
      ]).start();
    } else {
      Animated.parallel([
        Animated.timing(slideAnim, {
          toValue: -DRAWER_WIDTH,
          duration: 200,
          useNativeDriver: true,
        }),
        Animated.timing(fadeAnim, {
          toValue: 0,
          duration: 200,
          useNativeDriver: true,
        }),
      ]).start(() => {
        setRendered(false);
        setEditingId(null);
      });
    }
  }, [visible]);

  const handleClose = useCallback(() => {
    setEditingId(null);
    setShowProjectPicker(false);
    setCustomPath("");
    Keyboard.dismiss();
    onClose();
  }, [onClose]);

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

  const handleStartRename = useCallback((session: WsSession) => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    setEditingId(session.id);
  }, []);

  const handleConfirmRename = useCallback(
    (sessionId: string, newName: string) => {
      if (newName) renameSession(sessionId, newName);
      setEditingId(null);
    },
    [renameSession],
  );

  const handleRemove = useCallback(
    (session: WsSession) => {
      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
      removeSession(session.id);
    },
    [removeSession],
  );

  const handleNewSession = useCallback(() => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    setShowProjectPicker((prev) => {
      if (!prev) fetchProjects();
      return !prev;
    });
  }, [fetchProjects]);

  const launchSession = useCallback((opts?: { project?: string; path?: string }) => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
    createSession(opts);
    setShowProjectPicker(false);
    setCustomPath("");
    handleClose();
    setTimeout(() => requestSessions(), 2500);
  }, [createSession, requestSessions, handleClose]);

  const renderItem = useCallback(
    ({ item, drag, isActive }: RenderItemParams<WsSession>) => {
      if (editingId === item.id) {
        return (
          <RenameEditor
            name={item.name}
            onConfirm={(name) => handleConfirmRename(item.id, name)}
            onCancel={() => setEditingId(null)}
            colors={colors}
          />
        );
      }
      return (
        <ScaleDecorator>
          <SessionRow
            session={item}
            unreadCount={unreadCounts[item.id] ?? 0}
            onSwitch={() => handleSwitch(item)}
            onLongPress={() => handleStartRename(item)}
            onDelete={() => handleRemove(item)}
            onDrag={drag}
            isDragging={isActive}
            colors={colors}
          />
        </ScaleDecorator>
      );
    },
    [editingId, unreadCounts, colors, handleSwitch, handleStartRename, handleRemove, handleConfirmRename],
  );

  const keyExtractor = useCallback((item: WsSession) => item.id, []);

  const handleDragEnd = useCallback(
    ({ data }: { data: WsSession[] }) => {
      setOrderedSessions(data);
    },
    [],
  );

  const renderSeparator = useCallback(
    () => (
      <View
        style={{
          height: 1,
          backgroundColor: colors.border,
          marginHorizontal: 16,
          marginVertical: 1,
        }}
      />
    ),
    [colors.border],
  );

  if (!rendered) return null;

  return (
    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
      <View style={{ ...StyleSheet.absoluteFillObject, zIndex: 100 }}>
        {/* Backdrop */}
        <Animated.View
          style={{
            ...StyleSheet.absoluteFillObject,
            backgroundColor: "rgba(0,0,0,0.5)",
            opacity: fadeAnim,
          }}
        >
          <Pressable style={{ flex: 1 }} onPress={handleClose} />
        </Animated.View>

        {/* Drawer panel */}
        <Animated.View
          style={{
            position: "absolute",
            top: 0,
            bottom: 0,
            left: 0,
            width: DRAWER_WIDTH,
            backgroundColor: colors.bgSecondary,
            transform: [{ translateX: slideAnim }],
            shadowColor: "#000",
            shadowOffset: { width: 4, height: 0 },
            shadowOpacity: 0.4,
            shadowRadius: 12,
            elevation: 20,
          }}
        >
          <KeyboardAvoidingView
            style={{ flex: 1 }}
            behavior={Platform.OS === "ios" ? "padding" : undefined}
          >
          <GestureHandlerRootView style={{ flex: 1 }}>
            {/* Header */}
            <View
              style={{
                paddingTop: 60,
                paddingHorizontal: 20,
                paddingBottom: 16,
                borderBottomWidth: 1,
                borderBottomColor: colors.border,
              }}
            >
              <View
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "space-between",
                }}
              >
                <Text
                  style={{
                    color: colors.text,
                    fontSize: 22,
                    fontWeight: "800",
                    letterSpacing: -0.5,
                  }}
                >
                  Sessions
                </Text>
                <Pressable
                    onPress={() => requestSessions()}
                    hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
                    style={({ pressed }) => ({
                      paddingHorizontal: 10,
                      paddingVertical: 5,
                      borderRadius: 10,
                      backgroundColor: pressed ? colors.bgTertiary : colors.bgTertiary + "80",
                    })}
                  >
                    <Text style={{ color: colors.textSecondary, fontSize: 13 }}>
                      Refresh
                    </Text>
                  </Pressable>
              </View>
            </View>

            {/* Session list */}
            {orderedSessions.length === 0 ? (
              <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text style={{ color: colors.textMuted, fontSize: 14 }}>
                  No sessions found
                </Text>
              </View>
            ) : (
              <DraggableFlatList
                data={orderedSessions}
                keyExtractor={keyExtractor}
                renderItem={renderItem}
                onDragEnd={handleDragEnd}
                ItemSeparatorComponent={renderSeparator}
                contentContainerStyle={{ paddingVertical: 4 }}
                showsVerticalScrollIndicator={false}
                keyboardShouldPersistTaps="handled"
              />
            )}

            {/* New session button + project picker */}
            <View style={{ paddingVertical: 8 }}>
              <View style={{ alignItems: "center", paddingBottom: showProjectPicker ? 8 : 0 }}>
                <Pressable
                  onPress={handleNewSession}
                  style={{
                    flexDirection: "row",
                    alignItems: "center",
                    gap: 6,
                    paddingHorizontal: 20,
                    paddingVertical: 10,
                    borderRadius: 24,
                    backgroundColor: colors.accent,
                  }}
                >
                  <Text style={{ color: "#FFF", fontSize: 18, fontWeight: "700" }}>+</Text>
                  <Text style={{ color: "#FFF", fontSize: 15, fontWeight: "600" }}>New Session</Text>
                </Pressable>
              </View>

              {showProjectPicker && (
                <ScrollView
                  style={{
                    marginHorizontal: 12,
                    borderRadius: 12,
                    backgroundColor: colors.bgTertiary,
                    maxHeight: 300,
                  }}
                  keyboardShouldPersistTaps="handled"
                >
                  {/* Home directory — always first */}
                  <Pressable
                    onPress={() => launchSession({ path: "~" })}
                    style={{
                      flexDirection: "row",
                      alignItems: "center",
                      paddingHorizontal: 16,
                      paddingVertical: 14,
                    }}
                  >
                    <Text style={{ fontSize: 20, width: 32 }}>🏠</Text>
                    <View style={{ flex: 1 }}>
                      <Text style={{ color: colors.text, fontSize: 16, fontWeight: "600" }}>Home</Text>
                      <Text style={{ color: colors.textMuted, fontSize: 12 }}>~/</Text>
                    </View>
                  </Pressable>

                  {/* PAI projects */}
                  {projects.map((p) => (
                    <Pressable
                      key={p.slug}
                      onPress={() => launchSession({ project: p.name })}
                      style={{
                        flexDirection: "row",
                        alignItems: "center",
                        paddingHorizontal: 16,
                        paddingVertical: 14,
                        borderTopWidth: 1,
                        borderTopColor: colors.border,
                      }}
                    >
                      <Text style={{ fontSize: 20, width: 32 }}>📂</Text>
                      <View style={{ flex: 1 }}>
                        <Text style={{ color: colors.text, fontSize: 16, fontWeight: "500" }}>{p.name}</Text>
                        <Text style={{ color: colors.textMuted, fontSize: 12 }} numberOfLines={1}>
                          {p.path.replace(/^\/Users\/[^/]+/, "~")}
                        </Text>
                      </View>
                    </Pressable>
                  ))}

                  {/* Custom path input */}
                  <View style={{
                    flexDirection: "row",
                    alignItems: "center",
                    borderTopWidth: 1,
                    borderTopColor: colors.border,
                    paddingHorizontal: 16,
                    paddingVertical: 10,
                  }}>
                    <TextInput
                      value={customPath}
                      onChangeText={setCustomPath}
                      placeholder="Custom path…"
                      placeholderTextColor={colors.textMuted}
                      autoCapitalize="none"
                      autoCorrect={false}
                      returnKeyType="go"
                      onSubmitEditing={() => {
                        if (customPath.trim()) launchSession({ path: customPath.trim() });
                      }}
                      style={{
                        flex: 1,
                        color: colors.text,
                        fontSize: 15,
                        paddingVertical: 6,
                      }}
                    />
                    {customPath.trim().length > 0 && (
                      <Pressable
                        onPress={() => launchSession({ path: customPath.trim() })}
                        style={{
                          paddingHorizontal: 14,
                          paddingVertical: 8,
                          borderRadius: 8,
                          backgroundColor: colors.accent,
                          marginLeft: 8,
                        }}
                      >
                        <Text style={{ color: "#FFF", fontSize: 14, fontWeight: "600" }}>Go</Text>
                      </Pressable>
                    )}
                  </View>
                </ScrollView>
              )}
            </View>

            {/* Footer */}
            <View
              style={{
                paddingVertical: 8,
                paddingHorizontal: 20,
                borderTopWidth: 1,
                borderTopColor: colors.border,
              }}
            >
              <Text
                style={{
                  color: colors.textMuted,
                  fontSize: 11,
                  textAlign: "center",
                }}
              >
                Tap to switch — Long press to rename — Swipe to remove
              </Text>
            </View>
          </GestureHandlerRootView>
          </KeyboardAvoidingView>
        </Animated.View>
      </View>
    </View>
  );
}