"use client";

import { useEffect, useState } from "react";
import { useChatbotSocket } from "./hooks/useChatbotSocket";
import { useChatbotStore } from "./store/ChatbotStore";
import ChatWindow from "./components/ChatWindow";
import MessageInput from "./components/MessageInput";
import SessionList from "./components/SessionList";
import ConnectionStatus from "./components/ConnectionStatus";
import { Menu } from "iconsax-react";
import { Button } from "@/components/ui/button";

export default function ChatbotPage() {
  const { connect, disconnect, createSession, joinSession, sendMessage, connectionStatus } =
    useChatbotSocket();
  const { currentSession } = useChatbotStore();
  const [showSidebar, setShowSidebar] = useState(true);

  useEffect(() => {
    // اتصال خودکار هنگام mount
    connect();

    // Cleanup هنگام unmount
    return () => {
      disconnect();
    };
  }, [connect, disconnect]);

  const handleCreateSession = () => {
    createSession();
  };

  const handleSessionSelect = (sessionId: string) => {
    joinSession(sessionId);
    // در موبایل، بعد از انتخاب سشن، sidebar را ببند
    if (window.innerWidth < 768) {
      setShowSidebar(false);
    }
  };

  const handleSendMessage = (content: string) => {
    sendMessage(content, true);
  };

  return (
    <div className="flex h-screen bg-gray-50 dark:bg-gray-950">
      {/* Sidebar - Desktop always visible, Mobile toggleable */}
      {showSidebar && (
        <div className="hidden md:block">
          <SessionList
            onSessionSelect={handleSessionSelect}
            onCreateSession={handleCreateSession}
          />
        </div>
      )}

      {/* Mobile Sidebar Overlay */}
      {showSidebar && (
        <div className="md:hidden fixed inset-0 z-50">
          <div
            className="absolute inset-0 bg-black/50"
            onClick={() => setShowSidebar(false)}
          />
          <div className="absolute right-0 top-0 bottom-0 w-80">
            <SessionList
              onSessionSelect={handleSessionSelect}
              onCreateSession={handleCreateSession}
            />
          </div>
        </div>
      )}

      {/* Main Chat Area */}
      <div className="flex-1 flex flex-col bg-white dark:bg-gray-900">
        {/* Header */}
        <div className="border-b border-gray-200 dark:border-gray-800 p-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Button
              variant="ghost"
              size="icon"
              className="md:hidden"
              onClick={() => setShowSidebar(!showSidebar)}
            >
              <Menu className="size-5" color="currentColor" variant="Bold" />
            </Button>
            <div>
              <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                چت‌بات راهنما
              </h1>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                سوالات خود را در مورد محصولات تابلو برق بپرسید
              </p>
            </div>
          </div>
          <ConnectionStatus status={connectionStatus} />
        </div>

        {/* Chat Window */}
        <ChatWindow />

        {/* Message Input */}
        <MessageInput
          onSend={handleSendMessage}
          disabled={!currentSession || connectionStatus !== "connected"}
          placeholder={
            !currentSession
              ? "ابتدا یک سشن ایجاد کنید..."
              : connectionStatus !== "connected"
                ? "در حال اتصال..."
                : "پیام خود را بنویسید..."
          }
        />
      </div>
    </div>
  );
}
