pragma ComponentBehavior: Bound

import Quickshell
import QtQuick
import QtQuick.Layouts
import ZShell.Llm
import ZShell.Config
import qs.Services
import qs.Components

Item {
	id: root

	property alias list: list
	property alias model: list.model
	property bool highlight: false

	signal deleteChatRequest(content: ChatSession)
	signal loadChatRequest(content: ChatSession, index: int)
	signal newChatRequest

	CustomText {
		id: header

		anchors.left: parent.left
		anchors.margins: Tokens.padding.extraSmall
		anchors.right: parent.right
		anchors.top: parent.top
		color: Colors.palette.m3outline
		font.family: "CaskaydiaCove NF"
		font.pointSize: 13
		font.weight: 500
		text: qsTr("%1 Chat%2").arg(list.count).arg(list.count > 1 ? "s" : "")
	}

	CustomListView {
		id: list

		anchors.bottom: parent.bottom
		anchors.left: parent.left
		anchors.right: parent.right
		anchors.top: header.bottom
		anchors.topMargin: Tokens.spacing.medium
		clip: true
		spacing: Tokens.spacing.medium

		add: Transition {
			Anim {
				from: list.width
				property: "x"
			}
		}
		remove: Transition {
			Anim {
				to: list.width
				property: "x"
			}

			Anim {
				to: 0
				property: "opacity"
			}
		}
		displaced: Transition {
			Anim {
				property: "y"
			}
		}
		move: Transition {
			Anim {
				property: "y"
			}
		}

		delegate: ChatDelegate {
			id: chat

			required property int index

			implicitWidth: ListView.view.width
			highlighted: root.highlight && ChatState.chatSession === modelData

			onHighlightedChanged: if (highlighted)
				list.currentIndex = index
			onClicked: content => root.loadChatRequest(content, index)
			onRemove: content => root.deleteChatRequest(content)
		}
	}

	IconButton {
		id: newChatBtn

		anchors.bottom: parent.bottom
		anchors.right: parent.right
		anchors.margins: Tokens.padding.small
		padding: 8
		font.pointSize: Math.round(18 * 1.2)
		icon: "add"
		isRound: true

		onClicked: {
			root.newChatRequest();
		}

		Elevation {
			anchors.fill: parent
			level: newChatBtn.stateLayer.containsMouse ? 4 : 3
			radius: parent.radius
			z: -1
		}
	}
}