pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Quickshell
import ZShell.Config
import ZShell.Llm
import qs.Components
import qs.Modules.Notifications.Sidebar.Chat.Content
import qs.Services

RowLayout {
	id: root

	property int breakpoint: 700
	property alias conversationModel: sidebar.model

	readonly property bool isWide: root.width >= root.breakpoint
	property bool narrowShowsSidebar: true

	function openConversation(conv: ChatSession, index: int): void {
	}

	ChatList {
		id: sidebar

		Layout.fillHeight: true
		Layout.margins: Tokens.padding.medium
		Layout.rightMargin: Tokens.spacing.medium
		Layout.maximumWidth: Config.sidebar.sizes.width
		Layout.preferredWidth: root.width / 4
		Layout.minimumWidth: Config.sidebar.sizes.width / 2
		highlight: true

		Behavior on implicitWidth {
			Anim {}
		}
		model: ScriptModel {
			values: Chat.chats.values
		}

		onLoadChatRequest: (chat, index) => {
			ChatState.currentIdx = index;
			ChatState.chatSession = chat;
		}

		onDeleteChatRequest: chat => {
			Chat.chats.remove(chat);
			ChatState.currentIdx = -1;
			ChatState.chatSession = null;
		}
		onNewChatRequest: {
			const data = Chat.chats.insert();
			ChatState.currentIdx = 0;
			ChatState.chatSession = data;
		}
	}

	Item {
		Layout.margins: Tokens.padding.extraLarge
		Layout.leftMargin: Tokens.spacing.extraLarge
		Layout.topMargin: Tokens.padding.large
		Layout.preferredWidth: Config.sidebar.sizes.width * 2
		Layout.fillWidth: true
		Layout.fillHeight: true

		ChatHost {
			id: convHost

			anchors.top: parent.top
			anchors.bottom: parent.bottom
			anchors.horizontalCenter: parent.horizontalCenter
			implicitWidth: Math.min(parent.width, 800)
			clip: true

			onImplicitWidthChanged: console.log(implicitWidth)
		}

		ColumnLayout {
			id: noChatLayout
			anchors.centerIn: parent
			opacity: ChatState.chatSession ? 0 : 1
			visible: opacity > 0

			Behavior on opacity {
				Anim {}
			}

			MaterialIcon {
				Layout.alignment: Qt.AlignCenter
				text: "chat_bubble_off"
				font.pointSize: Tokens.font.size.extraLarge
				color: Colors.tPalette.m3onSurfaceVariant
			}

			CustomText {
				Layout.alignment: Qt.AlignCenter
				text: qsTr("Start or create a chat")
				color: Colors.tPalette.m3onSurfaceVariant
			}
		}
	}

	Component {
		id: conversationView

		ChatContent {}
	}
}