pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Shapes
import qs.widgets.theme

// Chamfered panel chrome for the dense status rail: outline, corner accent
// lines, and the optional header strip (id chip / title / meta / tick marks).
// Content is supplied as children by the call site.
//
// Colors and fonts both come from the Theme singleton.
Item {
    id: panel

    property string panelId: ""
    property string title: ""
    property string meta: ""
    property bool showHeader: true
    property int chamfer: 13
    property int offsetY: 2
    property int accentLineThickness: 3

    Shape {
        id: panelShape
        anchors.fill: parent
        preferredRendererType: Shape.CurveRenderer

        ShapePath {
            fillColor: Theme.surface
            strokeColor: Theme.hair
            strokeWidth: 1
            startX: 0; startY: panel.offsetY
            PathLine { x: panelShape.width - panel.chamfer; y: panel.offsetY }
            PathLine { x: panelShape.width; y: panel.chamfer }
            PathLine { x: panelShape.width; y: panelShape.height }
            PathLine { x: panel.chamfer; y: panelShape.height }
            PathLine { x: 0; y: panelShape.height - panel.chamfer }
            PathLine { x: 0; y: panel.offsetY }
        }

        // Upper left accent line
        ShapePath {
            fillColor: Theme.accent
            strokeWidth: 0
            startX: 0; startY: 0
            PathLine { x: Math.min(49, panelShape.width / 3); y: 0 }
            PathLine { x: Math.min(49, panelShape.width / 3); y: panel.accentLineThickness }
            PathLine { x: 0; y: panel.accentLineThickness }
            PathLine { x: 0; y: 0 }
        }

        // Lower right accent line
        ShapePath {
            fillColor: Theme.accent
            strokeWidth: 0
            startX: panelShape.width; startY: panelShape.height
            PathLine { x: panelShape.width - Math.min(49, panelShape.width / 3); y: panelShape.height }
            PathLine { x: panelShape.width - Math.min(49, panelShape.width / 3); y: panelShape.height - panel.accentLineThickness }
            PathLine { x: panelShape.width; y: panelShape.height - panel.accentLineThickness }
            PathLine { x: panelShape.width; y: panelShape.height }
        }
    }

    Rectangle {
        visible: panel.showHeader
        x: 1; y: 22
        width: parent.width - 2
        height: 1
        color: Theme.text
        opacity: 0.12
    }

    Rectangle {
        visible: panel.showHeader
        x: 5; y: 7
        width: panel.panelId.length > 2 ? 29 : 24
        height: 11
        color: Theme.accent
        Text {
            anchors.centerIn: parent
            text: panel.panelId
            color: Theme.surface
            font.family: Theme.microFont
            font.pixelSize: 8
            font.bold: true
        }
    }

    Text {
        visible: panel.showHeader
        x: 40; y: 7
        width: parent.width - 105
        text: panel.title
        color: Theme.text
        font.family: Theme.displayFont
        font.pixelSize: 9
        font.bold: true
        font.letterSpacing: 1.1
        elide: Text.ElideRight
    }

    // Inlined rather than reusing DenseBarContent's MicroText, which is an
    // inline component and therefore not visible from another file.
    Text {
        visible: panel.showHeader && panel.meta.length > 0
        anchors.right: parent.right
        anchors.rightMargin: 12
        y: 6
        text: panel.meta
        width: Math.min(80, parent.width / 4)
        color: Theme.muted
        font.family: Theme.microFont
        font.pixelSize: 6
        font.letterSpacing: 0.7
        horizontalAlignment: Text.AlignRight
        elide: Text.ElideRight
    }

    Row {
        visible: panel.showHeader
        anchors.right: parent.right
        anchors.rightMargin: 10
        y: 14
        spacing: 2
        Repeater {
            model: 5
            Rectangle { required property int index; width: 4; height: 2; color: Theme.accent }
        }
    }
}