<script setup lang="ts">
import { useClaudeHooksStore, type HookNotification } from '../stores/claude-hooks'

const store = useClaudeHooksStore()

function iconForEvent(n: HookNotification) {
  switch (n.event) {
    case 'SessionStart': return 'session'
    case 'UserPromptSubmit': return 'prompt'
    case 'PreToolUse': return 'tool'
    case 'PostToolUse': return 'result'
    case 'PermissionRequest': return 'permission'
    case 'Notification': return 'bell'
    case 'Stop': return 'check'
    default: return 'info'
  }
}

function typeClass(n: HookNotification) {
  return `toast--${n.type}`
}
</script>

<template>
  <Teleport to="body">
    <TransitionGroup name="toast" tag="div" class="hook-toasts">
      <div
        v-for="n in store.visible"
        :key="n.id"
        class="hook-toast"
        :class="[typeClass(n), { 'hook-toast--permission': n.event === 'PermissionRequest' }]"
      >
        <!-- Icon -->
        <div class="toast-icon">
          <!-- Session -->
          <svg v-if="iconForEvent(n) === 'session'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="3"/>
            <ellipse cx="12" cy="12" rx="9" ry="4" stroke-dasharray="4 2" transform="rotate(-30 12 12)"/>
            <ellipse cx="12" cy="12" rx="9" ry="4" stroke-dasharray="4 2" transform="rotate(30 12 12)"/>
          </svg>
          <!-- Prompt (user message) -->
          <svg v-else-if="iconForEvent(n) === 'prompt'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
          </svg>
          <!-- Tool -->
          <svg v-else-if="iconForEvent(n) === 'tool'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="4 17 10 11 4 5"/>
            <line x1="12" y1="19" x2="20" y2="19"/>
          </svg>
          <!-- Result (PostToolUse) -->
          <svg v-else-if="iconForEvent(n) === 'result'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
            <polyline points="14 2 14 8 20 8"/>
            <line x1="16" y1="13" x2="8" y2="13"/>
            <line x1="16" y1="17" x2="8" y2="17"/>
          </svg>
          <!-- Permission -->
          <svg v-else-if="iconForEvent(n) === 'permission'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
            <line x1="12" y1="9" x2="12" y2="13"/>
            <line x1="12" y1="17" x2="12.01" y2="17"/>
          </svg>
          <!-- Bell -->
          <svg v-else-if="iconForEvent(n) === 'bell'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
            <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
          </svg>
          <!-- Check -->
          <svg v-else-if="iconForEvent(n) === 'check'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="20 6 9 17 4 12"/>
          </svg>
          <!-- Info fallback -->
          <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="16" x2="12" y2="12"/>
            <line x1="12" y1="8" x2="12.01" y2="8"/>
          </svg>
        </div>

        <!-- Content -->
        <div class="toast-body">
          <span class="toast-title">{{ n.title }}</span>
          <span v-if="n.detail" class="toast-detail">{{ n.detail }}</span>
        </div>

        <!-- Permission buttons -->
        <div v-if="n.event === 'PermissionRequest' && n.requestId" class="toast-actions">
          <button class="toast-btn toast-btn--allow" @click="store.respondPermission(n.id, n.requestId!, 'allow')">Allow</button>
          <button class="toast-btn toast-btn--deny" @click="store.respondPermission(n.id, n.requestId!, 'deny')">Deny</button>
        </div>

        <!-- Dismiss -->
        <button v-else class="toast-close" @click="store.remove(n.id)">&times;</button>
      </div>
    </TransitionGroup>
  </Teleport>
</template>

<style scoped>
.hook-toasts {
  position: fixed;
  top: 40px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 380px;
  width: 100%;
}

.hook-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(22, 22, 29, 0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  pointer-events: auto;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary, #e4e4e7);
  min-width: 260px;
}

/* Type colors - left accent */
.hook-toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
}
.hook-toast { position: relative; }

.toast--info::before { background: var(--accent, #6366f1); }
.toast--success::before { background: #10b981; }
.toast--warning::before { background: #f59e0b; }
.toast--error::before { background: #ef4444; }

/* Permission toast - emphasized */
.hook-toast--permission {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(30, 15, 15, 0.9);
  animation: permission-glow 2s ease-in-out infinite;
}

@keyframes permission-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.15); }
  50% { box-shadow: 0 4px 24px rgba(239, 68, 68, 0.35); }
}

/* Icon */
.toast-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.toast--info .toast-icon { background: rgba(99,102,241,0.15); color: #818cf8; }
.toast--success .toast-icon { background: rgba(16,185,129,0.15); color: #34d399; }
.toast--warning .toast-icon { background: rgba(245,158,11,0.15); color: #fbbf24; }
.toast--error .toast-icon { background: rgba(239,68,68,0.15); color: #f87171; }

/* Body */
.toast-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toast-title {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}

.toast-detail {
  color: var(--text-secondary, #a1a1aa);
  font-size: 11.5px;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

/* Dismiss */
.toast-close {
  background: none;
  border: none;
  color: var(--text-muted, #52525b);
  cursor: pointer;
  font-size: 16px;
  padding: 0 2px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.hook-toast:hover .toast-close { opacity: 1; }

/* Permission action buttons */
.toast-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
}

.toast-btn {
  padding: 4px 12px;
  border-radius: 6px;
  border: none;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.02em;
}

.toast-btn--allow {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.toast-btn--allow:hover {
  background: rgba(16, 185, 129, 0.3);
}

.toast-btn--deny {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.toast-btn--deny:hover {
  background: rgba(239, 68, 68, 0.3);
}

/* Transitions */
.toast-enter-active {
  animation: toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast-leave-active {
  animation: toast-out 0.2s ease-in forwards;
}
.toast-move {
  transition: transform 0.25s ease;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .hook-toasts {
    right: 8px;
    left: 8px;
    max-width: none;
    top: 36px;
  }
}
</style>
