<template>
  <ResizablePanelGroup :direction="props.isFullscreen ? 'horizontal' : 'vertical'">
    <ResizablePanel class="pl-0 flex flex-col">
      <!-- TODO: each panel section should be it's own component -->
      <div class="panel-header">
        Attributes
        <Tooltip :delay-duration="500">
          <TooltipTrigger as-child>
            <div class="expand-toggle" @click="toggleExpansion('attributes')">
              <ListCollapse :size="16" />
            </div>
          </TooltipTrigger>
          <TooltipContent side="bottom" class="z-[2000]">{{
            expansionDepth.attributes === 9999 ? 'Collapse all' : 'Expand all'
          }}</TooltipContent>
        </Tooltip>
      </div>
      <NodeEmptyState v-if="isAllEmpty(displayNode?.attributes)" />
      <vue-json-pretty
        v-else
        class="font-xs overflow-auto"
        :data="parseDeep(displayNode?.attributes)"
        :deep="expansionDepth.attributes"
        show-icon
        show-length
      />
    </ResizablePanel>
    <ResizableHandle with-handle />
    <ResizablePanel class="pl-0 flex flex-col">
      <div class="panel-header">
        Inputs
        <Tooltip :delay-duration="500">
          <TooltipTrigger as-child>
            <div class="expand-toggle" @click="toggleExpansion('inputs')">
              <ListCollapse :size="16" />
            </div>
          </TooltipTrigger>
          <TooltipContent side="bottom" class="z-[2000]">{{
            expansionDepth.inputs === 9999 ? 'Collapse all' : 'Expand all'
          }}</TooltipContent>
        </Tooltip>
      </div>
      <NodeEmptyState v-if="isAllEmpty(displayNode?.inputs)" />
      <div v-else class="flex-1 min-h-0 overflow-auto">
        <vue-json-pretty
          class="font-xs"
          :data="parseDeep(displayNode?.inputs)"
          :deep="expansionDepth.inputs"
          show-icon
          show-length
        />
      </div>
    </ResizablePanel>
    <ResizableHandle with-handle />
    <ResizablePanel class="pl-0 flex flex-col">
      <div class="panel-header">
        Outputs
        <Tooltip :delay-duration="500">
          <TooltipTrigger as-child>
            <div class="expand-toggle" @click="toggleExpansion('outputs')">
              <ListCollapse :size="16" />
            </div>
          </TooltipTrigger>
          <TooltipContent side="bottom" class="z-[2000]">{{
            expansionDepth.outputs === 9999 ? 'Collapse all' : 'Expand all'
          }}</TooltipContent>
        </Tooltip>
      </div>
      <NodeEmptyState v-if="isAllEmpty(displayNode?.outputs)" />
      <div v-else class="flex-1 min-h-0 overflow-auto">
        <vue-json-pretty
          class="font-xs"
          :data="parseDeep(displayNode?.outputs)"
          :deep="expansionDepth.outputs"
          show-icon
          show-length
        />
      </div>
    </ResizablePanel>
    <ResizableHandle with-handle v-if="shouldMetadataDisplay" />
    <ResizablePanel class="!overflow-auto" v-if="shouldMetadataDisplay">
      <div class="panel-header" v-if="shouldMetadataDisplay">
        Usage Metadata
        <Tooltip :delay-duration="500">
          <TooltipTrigger as-child>
            <div class="expand-toggle" @click="toggleExpansion('usageMetaData')">
              <ListCollapse :size="16" />
            </div>
          </TooltipTrigger>
          <TooltipContent side="bottom" class="z-[2000]">{{
            expansionDepth.usageMetaData === 9999 ? 'Collapse all' : 'Expand all'
          }}</TooltipContent>
        </Tooltip>
      </div>
      <NodeEmptyState v-if="isAllEmpty(displayNode?.usageMetadata) && shouldMetadataDisplay" />
      <vue-json-pretty
        v-else
        class="font-xs"
        :data="parseDeep(displayNode?.usageMetadata)"
        :deep="expansionDepth.usageMetaData"
        show-icon
        show-length
      />
    </ResizablePanel>
  </ResizablePanelGroup>
</template>

<script setup lang="ts">
import { onMounted, ref, type Ref } from 'vue'
import type { TraceNode } from '@/common/interface/trace'
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { ListCollapse } from 'lucide-vue-next'
import VueJsonPretty from 'vue-json-pretty'
import { parseDeep } from '@/utils/nodeJson.ts'
import NodeEmptyState from './NodeEmptyState.vue'
import { usePanelSelectionStore } from '@/stores/panelSelection'
import type { JsonPanelExpansions } from '@/common/interface/panelSelection'

const panelSelectionStore = usePanelSelectionStore()
const shouldMetadataDisplay: Ref<boolean> = ref(false)

const props = defineProps<{
  isFullscreen: boolean
  displayNode: TraceNode | undefined
}>()

const expansionDepth: Ref<Record<string, number>> = ref({
  // We don't use v-model directly from the store because we only want to
  // maintain if something is fully expanded or minimally collapsed not individual item expansion
  attributes: 2,
  inputs: 2,
  outputs: 2,
  usageMetaData: 2
})

onMounted(() => {
  for (const k in panelSelectionStore.jsonExpansions) {
    expansionDepth.value[k] = panelSelectionStore.jsonExpansions[k as keyof JsonPanelExpansions]
      ? 9999
      : 2
  }
  shouldMetadataDisplay.value = !!props.displayNode?.usageMetadata
})

function toggleExpansion(key: keyof JsonPanelExpansions & string) {
  expansionDepth.value[key] = expansionDepth.value[key] === 9999 ? 2 : 9999
  panelSelectionStore.toggleJsonSelection(key)
}

function isAllEmpty(nodeObj: any) {
  return !nodeObj || (typeof nodeObj === 'object' && Object.keys(nodeObj).length === 0)
}
</script>

<style scoped>
.expand-toggle {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  background-color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 0.5rem;
}

.panel-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 0.25rem;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--color-border);
  background-color: var(--color-muted);

  font-family: var(--font-sans, sans-serif);
  font-size: 1rem; /* ~16px */
  font-weight: 500; /* medium */
  line-height: 1.5rem; /* consistent vertical rhythm */
}

</style>
