<template>
  <section class="dashboard-workspace">
    <div class="page-header compact-header">
      <div>
        <span class="eyebrow">COMMAND SURFACE</span>
        <h2>Good {{ dayPart }}, {{ firstName }}.</h2>
        <p>Arrange, resize, and collapse the operational cards that matter to your workflow.</p>
      </div>
      <div class="page-actions">
        <button class="ghost-button compact" type="button" @click="$emit('toggle-edit')">
          <SlidersHorizontal :size="16" />{{ dashboardEditMode ? 'Done' : 'Customize' }}
        </button>
        <button class="primary-action compact" type="button" @click="$emit('open-library')">
          <ListPlus :size="16" />Widget library
        </button>
        <button v-if="dashboardEditMode" class="ghost-button compact" type="button" @click="$emit('reset-layout')">
          <RotateCcw :size="14" />Reset
        </button>
      </div>
    </div>

    <div class="dashboard-command-strip glass-panel">
      <div>
        <LayoutDashboard :size="18" />
        <span>{{ visibleDashboardWidgets.length }} active cards</span>
        <small>{{ hiddenDashboardWidgets.length }} available in library</small>
      </div>
      <strong :class="['dashboard-mode-chip', { active: dashboardEditMode }]">{{ dashboardEditMode ? 'DRAG / RESIZE ENABLED' : 'VIEW MODE' }}</strong>
    </div>

    <div class="widget-grid">
      <DashboardWidget
        v-for="widget in visibleDashboardWidgets"
        :key="widget.id"
        :widget="widget"
        :editing="dashboardEditMode"
        :dragging="draggedDashboardWidgetId === widget.id"
        :execution-trend="executionTrend"
        :jobs="jobs"
        :health-gauge="healthGauge"
        :job-status-stats="jobStatusStats"
        :dashboard-settings-preview="dashboardSettingsPreview"
        :host-transport-stats="hostTransportStats"
        :script-visibility-stats="scriptVisibilityStats"
        :run-plan-target-stats="runPlanTargetStats"
        :setting-label="settingLabel"
        @drag-start="$emit('drag-start', $event)"
        @drop-on="$emit('drop-on', $event)"
        @toggle-collapse="$emit('toggle-collapse', $event)"
        @resize="(...args) => $emit('resize', ...args)"
        @set-visible="(...args) => $emit('set-visible', ...args)"
        @open-job="$emit('open-job', $event)"
        @navigate="$emit('navigate', $event)"
        @quick-new-script="$emit('quick-new-script')"
      />
    </div>

    <WidgetLibraryModal
      :open="dashboardWidgetLibraryOpen"
      :widgets="hiddenDashboardWidgets"
      @close="$emit('close-library')"
      @add="$emit('set-visible', $event, true)"
    />
  </section>
</template>

<script setup>
import { LayoutDashboard, ListPlus, RotateCcw, SlidersHorizontal } from '@lucide/vue';
import DashboardWidget from '../components/dashboard/DashboardWidget.vue';
import WidgetLibraryModal from '../components/dashboard/WidgetLibraryModal.vue';

defineProps({
  dayPart: { type: String, required: true },
  firstName: { type: String, required: true },
  dashboardEditMode: Boolean,
  dashboardWidgetLibraryOpen: Boolean,
  draggedDashboardWidgetId: { type: String, default: '' },
  visibleDashboardWidgets: { type: Array, required: true },
  hiddenDashboardWidgets: { type: Array, required: true },
  executionTrend: { type: Array, required: true },
  jobs: { type: Array, required: true },
  healthGauge: { type: Number, required: true },
  jobStatusStats: { type: Array, required: true },
  dashboardSettingsPreview: { type: Array, required: true },
  hostTransportStats: { type: Array, required: true },
  scriptVisibilityStats: { type: Array, required: true },
  runPlanTargetStats: { type: Array, required: true },
  settingLabel: { type: Function, required: true }
});

defineEmits([
  'toggle-edit',
  'open-library',
  'close-library',
  'reset-layout',
  'drag-start',
  'drop-on',
  'toggle-collapse',
  'resize',
  'set-visible',
  'open-job',
  'navigate',
  'quick-new-script'
]);
</script>
