import React, { useCallback, useState } from "react";
import { Pressable, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { router } from "expo-router";
import { useChat } from "../contexts/ChatContext";
import { useConnection } from "../contexts/ConnectionContext";
import { MessageList } from "../components/chat/MessageList";
import { InputBar } from "../components/chat/InputBar";
import { CommandBar, TextModeCommandBar } from "../components/chat/CommandBar";
import { StatusDot } from "../components/ui/StatusDot";
import { SessionPicker } from "../components/SessionPicker";
import { playAudio } from "../services/audio";

export default function ChatScreen() {
  const { messages, sendTextMessage, clearMessages, requestScreenshot } =
    useChat();
  const { status } = useConnection();
  const [isTextMode, setIsTextMode] = useState(false);
  const [showSessions, setShowSessions] = useState(false);

  const handleSessions = useCallback(() => {
    setShowSessions(true);
  }, []);

  const handleScreenshot = useCallback(() => {
    requestScreenshot();
    router.push("/navigate");
  }, [requestScreenshot]);

  const handleHelp = useCallback(() => {
    sendTextMessage("/h");
  }, [sendTextMessage]);

  const handleNavigate = useCallback(() => {
    router.push("/navigate");
  }, []);

  const handleClear = useCallback(() => {
    clearMessages();
  }, [clearMessages]);

  const handleReplay = useCallback(() => {
    for (let i = messages.length - 1; i >= 0; i--) {
      const msg = messages[i];
      if (msg.role === "assistant") {
        if (msg.audioUri) {
          playAudio(msg.audioUri).catch(() => {});
        }
        return;
      }
    }
  }, [messages]);

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "#0A0A0F" }} edges={["top", "bottom"]}>
      {/* Header */}
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
          paddingHorizontal: 16,
          paddingVertical: 12,
          borderBottomWidth: 1,
          borderBottomColor: "#2E2E45",
        }}
      >
        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
          <Text
            style={{
              color: "#E8E8F0",
              fontSize: 22,
              fontWeight: "800",
              letterSpacing: -0.5,
            }}
          >
            PAILot
          </Text>
          <StatusDot status={status} size={8} />
        </View>

        <Pressable
          onPress={() => router.push("/settings")}
          hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}
          style={{
            width: 36,
            height: 36,
            alignItems: "center",
            justifyContent: "center",
            borderRadius: 18,
            backgroundColor: "#1E1E2E",
          }}
        >
          <Text style={{ fontSize: 15 }}>⚙️</Text>
        </Pressable>
      </View>

      {/* Message list */}
      <View style={{ flex: 1 }}>
        {messages.length === 0 ? (
          <View style={{ flex: 1, alignItems: "center", justifyContent: "center", gap: 16 }}>
            <View
              style={{
                width: 80,
                height: 80,
                borderRadius: 40,
                backgroundColor: "#1E1E2E",
                alignItems: "center",
                justifyContent: "center",
                borderWidth: 1,
                borderColor: "#2E2E45",
              }}
            >
              <Text style={{ fontSize: 36 }}>🛩</Text>
            </View>
            <View style={{ alignItems: "center", gap: 6 }}>
              <Text style={{ color: "#E8E8F0", fontSize: 20, fontWeight: "700" }}>
                PAILot
              </Text>
              <Text
                style={{
                  color: "#5A5A78",
                  fontSize: 14,
                  textAlign: "center",
                  paddingHorizontal: 40,
                  lineHeight: 20,
                }}
              >
                Voice-first AI communicator.{"\n"}Tap the mic to start talking.
              </Text>
            </View>
          </View>
        ) : (
          <MessageList messages={messages} />
        )}
      </View>

      {/* Command bar */}
      {isTextMode ? (
        <TextModeCommandBar
          onSessions={handleSessions}
          onScreenshot={handleScreenshot}
          onNavigate={handleNavigate}
          onClear={handleClear}
        />
      ) : (
        <CommandBar
          onSessions={handleSessions}
          onScreenshot={handleScreenshot}
          onHelp={handleHelp}
        />
      )}

      {/* Input bar */}
      <InputBar
        onSendText={sendTextMessage}
        onReplay={handleReplay}
        isTextMode={isTextMode}
        onToggleMode={() => setIsTextMode((v) => !v)}
      />

      {/* Session picker modal */}
      <SessionPicker
        visible={showSessions}
        onClose={() => setShowSessions(false)}
      />
    </SafeAreaView>
  );
}