<template>
  <div class="dialog-examples">
    <h2>{{ $t('dialogExamples.title') }}</h2>
    
    <div class="example-section">
      <h3>{{ $t('dialogExamples.modalDialogs') }}</h3>
      <div class="button-group">
        <button @click="openSimpleModal" class="btn-primary">{{ $t('dialogExamples.simpleModal') }}</button>
        <button @click="openLargeModal" class="btn-primary">{{ $t('dialogExamples.largeModal') }}</button>
        <button @click="openFullscreenModal" class="btn-primary">{{ $t('dialogExamples.fullscreenModal') }}</button>
      </div>
    </div>

    <div class="example-section">
      <h3>{{ $t('dialogExamples.nonModalDialogs') }}</h3>
      <div class="button-group">
        <button @click="openNonModalDialog" class="btn-primary">{{ $t('dialogExamples.nonModalDialog') }}</button>
        <button @click="openMultipleDialogs" class="btn-primary">{{ $t('dialogExamples.multipleDialogs') }}</button>
      </div>
    </div>

    <div class="example-section">
      <h3>{{ $t('dialogExamples.infoDialogs') }}</h3>
      <div class="button-group">
        <button @click="showInfoDialog" class="btn-primary">{{ $t('dialogExamples.info') }}</button>
        <button @click="showSuccessDialog" class="btn-success">{{ $t('dialogExamples.success') }}</button>
        <button @click="showWarningDialog" class="btn-warning">{{ $t('dialogExamples.warning') }}</button>
        <button @click="showErrorDialog" class="btn-danger">{{ $t('dialogExamples.error') }}</button>
      </div>
    </div>

    <div class="example-section">
      <h3>{{ $t('dialogExamples.confirmDialogs') }}</h3>
      <div class="button-group">
        <button @click="showInfoConfirm" class="btn-primary">{{ $t('dialogExamples.info') }}</button>
        <button @click="showWarningConfirm" class="btn-warning">{{ $t('dialogExamples.warning') }}</button>
        <button @click="showDangerConfirm" class="btn-danger">{{ $t('common.delete') }}</button>
      </div>
    </div>

    <div class="example-section">
      <h3>{{ $t('dialogExamples.composableUsage') }}</h3>
      <div class="button-group">
        <button @click="composableDialog.open()" class="btn-primary">{{ $t('dialogExamples.useDialogExample') }}</button>
        <button @click="showComposableConfirm" class="btn-primary">{{ $t('dialogExamples.useConfirmExample') }}</button>
      </div>
    </div>

    <!-- Einfacher Modal Dialog -->
    <BaseDialog
      v-model="simpleModal.isOpen"
      :title="$t('dialogExamples.simpleModalTitle')"
      size="medium"
    >
      <p>{{ $t('dialogExamples.simpleModalText') }}</p>
      <p>{{ $t('dialogExamples.simpleModalText2') }}</p>
    </BaseDialog>

    <!-- Großer Modal Dialog -->
    <BaseDialog
      v-model="largeModal.isOpen"
      :title="$t('dialogExamples.largeModalTitle')"
      size="large"
    >
      <p>{{ $t('dialogExamples.largeModalText') }}</p>
      <p>{{ $t('dialogExamples.largeModalText2') }}</p>
      <div class="example-scroll-area">
        {{ $t('dialogExamples.scrollArea') }}
      </div>
    </BaseDialog>

    <!-- Fullscreen Modal Dialog -->
    <BaseDialog
      v-model="fullscreenModal.isOpen"
      :title="$t('dialogExamples.fullscreenModalTitle')"
      size="fullscreen"
    >
      <p>{{ $t('dialogExamples.fullscreenModalText') }}</p>
      <p>{{ $t('dialogExamples.fullscreenModalText2') }}</p>
    </BaseDialog>

    <!-- Nicht-modaler Dialog -->
    <BaseDialog
      v-model="nonModal.isOpen"
      :title="$t('dialogExamples.nonModalTitle')"
      :is-modal="false"
      :position="nonModal.position"
      @update:position="nonModal.position = $event"
      size="medium"
      :draggable="true"
      :minimizable="true"
      @minimize="handleMinimize('nonModal')"
    >
      <p>{{ $t('dialogExamples.nonModalText') }}</p>
      <p>{{ $t('dialogExamples.nonModalText2') }}</p>
      <template #footer>
        <button @click="nonModal.isOpen = false" class="btn-secondary">{{ $t('common.close') }}</button>
      </template>
    </BaseDialog>

    <!-- Zweiter nicht-modaler Dialog -->
    <BaseDialog
      v-model="nonModal2.isOpen"
      :title="$t('dialogExamples.secondNonModalTitle')"
      :is-modal="false"
      :position="nonModal2.position"
      @update:position="nonModal2.position = $event"
      size="small"
      :draggable="true"
      :z-index="1001"
    >
      <p>{{ $t('dialogExamples.secondNonModalText') }}</p>
    </BaseDialog>

    <!-- Informations-Dialoge -->
    <InfoDialog
      v-model="infoDialog.isOpen"
      :title="$t('dialogExamples.information')"
      :message="$t('dialogExamples.infoMessage')"
      type="info"
      @ok="infoDialog.isOpen = false"
    />

    <InfoDialog
      v-model="successDialog.isOpen"
      :title="$t('dialogExamples.success')"
      :message="$t('dialogExamples.successMessage')"
      :details="$t('dialogExamples.successDetails')"
      type="success"
      @ok="successDialog.isOpen = false"
    />

    <InfoDialog
      v-model="warningDialog.isOpen"
      :title="$t('dialogExamples.warning')"
      :message="$t('dialogExamples.warningMessage')"
      :details="$t('dialogExamples.warningDetails')"
      type="warning"
      @ok="warningDialog.isOpen = false"
    />

    <InfoDialog
      v-model="errorDialog.isOpen"
      :title="$t('dialogExamples.error')"
      :message="$t('dialogExamples.errorMessage')"
      :details="$t('dialogExamples.errorDetails')"
      type="error"
      @ok="errorDialog.isOpen = false"
    />

    <!-- Bestätigungs-Dialoge -->
    <ConfirmDialog
      v-model="infoConfirm.isOpen"
      :title="$t('dialogExamples.information')"
      :message="$t('dialogExamples.infoMessage')"
      type="info"
      :show-cancel="false"
      @confirm="infoConfirm.isOpen = false"
    />

    <ConfirmDialog
      v-model="warningConfirm.isOpen"
      :title="$t('dialogExamples.warning')"
      :message="$t('dialogExamples.confirmWarningMessage')"
      :details="$t('dialogExamples.confirmWarningDetails')"
      type="warning"
      @confirm="handleWarningConfirm"
      @cancel="warningConfirm.isOpen = false"
    />

    <ConfirmDialog
      v-model="dangerConfirm.isOpen"
      :title="$t('dialogExamples.confirmDeleteTitle')"
      :message="$t('dialogExamples.confirmDeleteMessage')"
      type="danger"
      :confirm-text="$t('common.delete')"
      @confirm="handleDelete"
      @cancel="dangerConfirm.isOpen = false"
    />

    <!-- Composable Dialog -->
    <BaseDialog
      v-model="composableDialog.isOpen"
      :title="$t('dialogExamples.composableDialogTitle')"
      size="medium"
    >
      <p>{{ $t('dialogExamples.composableDialogText') }}</p>
      <p>{{ $t('dialogExamples.composableDialogText2') }}</p>
      <template #footer>
        <button @click="composableDialog.close()" class="btn-primary">{{ $t('common.close') }}</button>
      </template>
    </BaseDialog>

    <!-- Composable Confirm Dialog -->
    <ConfirmDialog
      v-model="confirmComposable.isOpen"
      :title="confirmComposable.config.title"
      :message="confirmComposable.config.message"
      :type="confirmComposable.config.type"
      @confirm="confirmComposable.handleConfirm"
      @cancel="confirmComposable.handleCancel"
    />

    <!-- Minimierte Dialoge Anzeige -->
    <div v-if="minimizedDialogs.length > 0" class="minimized-section">
      <h4>{{ $t('dialogExamples.minimizedDialogs') }}</h4>
      <button
        v-for="(dialog, index) in minimizedDialogs"
        :key="index"
        @click="restoreDialog(dialog)"
        class="minimized-btn"
      >
        {{ dialog }}
      </button>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue';
import BaseDialog from './BaseDialog.vue';
import ConfirmDialog from './ConfirmDialog.vue';
import InfoDialog from './InfoDialog.vue';
import { useDialog, useConfirm } from '../composables/useDialog.js';

export default {
  name: 'DialogExamples',
  components: {
    BaseDialog,
    ConfirmDialog,
    InfoDialog
  },
  setup() {
    // Modale Dialoge
    const simpleModal = reactive({ isOpen: false });
    const largeModal = reactive({ isOpen: false });
    const fullscreenModal = reactive({ isOpen: false });

    // Nicht-modale Dialoge
    const nonModal = reactive({
      isOpen: false,
      position: { x: 100, y: 100 }
    });

    const nonModal2 = reactive({
      isOpen: false,
      position: { x: 600, y: 150 }
    });

    // Informations-Dialoge
    const infoDialog = reactive({ isOpen: false });
    const successDialog = reactive({ isOpen: false });
    const warningDialog = reactive({ isOpen: false });
    const errorDialog = reactive({ isOpen: false });

    // Bestätigungs-Dialoge
    const infoConfirm = reactive({ isOpen: false });
    const warningConfirm = reactive({ isOpen: false });
    const dangerConfirm = reactive({ isOpen: false });

    // Composables
    const composableDialog = useDialog();
    const confirmComposable = useConfirm();

    // Minimierte Dialoge
    const minimizedDialogs = ref([]);

    return {
      simpleModal,
      largeModal,
      fullscreenModal,
      nonModal,
      nonModal2,
      infoDialog,
      successDialog,
      warningDialog,
      errorDialog,
      infoConfirm,
      warningConfirm,
      dangerConfirm,
      composableDialog,
      confirmComposable,
      minimizedDialogs
    };
  },
  methods: {
    openSimpleModal() {
      this.simpleModal.isOpen = true;
    },
    
    openLargeModal() {
      this.largeModal.isOpen = true;
    },
    
    openFullscreenModal() {
      this.fullscreenModal.isOpen = true;
    },
    
    openNonModalDialog() {
      this.nonModal.isOpen = true;
    },
    
    openMultipleDialogs() {
      this.nonModal.isOpen = true;
      this.nonModal2.isOpen = true;
    },
    
    showInfoConfirm() {
      this.infoConfirm.isOpen = true;
    },
    
    showWarningConfirm() {
      this.warningConfirm.isOpen = true;
    },
    
    showDangerConfirm() {
      this.dangerConfirm.isOpen = true;
    },
    
    async showComposableConfirm() {
      const result = await this.confirmComposable.confirm({
        title: this.$t('dialogExamples.composableConfirmTitle'),
        message: this.$t('dialogExamples.composableConfirmMessage'),
        details: this.$t('dialogExamples.composableConfirmDetails'),
        type: 'info'
      });
      
      if (result) {
        // Hier kann ein nutzerfreundlicher Hinweis (z. B. Toast) implementiert werden
      } else {
        // Hier kann ein nutzerfreundlicher Hinweis (z. B. Toast) implementiert werden
      }
    },
    
    handleWarningConfirm() {
      // Hier kann ein nutzerfreundlicher Hinweis (z. B. Toast) implementiert werden
      this.warningConfirm.isOpen = false;
    },
    
    handleDelete() {
      // Hier kann nach erfolgreicher Aktion ein Hinweis angezeigt werden
      this.dangerConfirm.isOpen = false;
    },
    
    handleMinimize(dialogName) {
      this.minimizedDialogs.push(dialogName);
      this[dialogName].isOpen = false;
    },
    
    restoreDialog(dialogName) {
      this[dialogName].isOpen = true;
      const index = this.minimizedDialogs.indexOf(dialogName);
      if (index > -1) {
        this.minimizedDialogs.splice(index, 1);
      }
    }
  }
};
</script>

<style scoped>
.dialog-examples {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.example-section {
  margin-bottom: 2rem;
  padding: 1rem;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.example-section h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.button-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.example-scroll-area {
  height: 400px;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  background: var(--surface-muted);
  color: var(--text-muted);
}

.btn-primary,
.btn-secondary,
.btn-warning,
.btn-danger {
  padding: 0.5rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: var(--text-on-primary);
}

.btn-primary:hover {
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

.btn-secondary:hover {
  background: var(--surface-muted);
  border-color: var(--primary-soft);
}

.btn-warning {
  background: rgba(181, 110, 65, 0.14);
  border-color: rgba(181, 110, 65, 0.24);
  color: #8a4f28;
}

.btn-warning:hover {
  background: rgba(181, 110, 65, 0.2);
}

.btn-danger {
  background: rgba(200, 74, 56, 0.12);
  border-color: rgba(200, 74, 56, 0.24);
  color: #8b3327;
}

.btn-danger:hover {
  background: rgba(200, 74, 56, 0.18);
}

.minimized-section {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.minimized-section h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.minimized-btn {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--surface-color);
  color: var(--primary-strong);
  border: 1px solid var(--primary-soft);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.875rem;
}

.minimized-btn:hover {
  background: rgba(47, 122, 95, 0.1);
}
</style>
