<script lang="ts">
  import { sessions, loadSessions, loadSessionMessages, deleteSession, currentSession } from '$lib/stores/chat'
  import { onMount } from 'svelte'
  import Trash2Icon from '@lucide/svelte/icons/trash-2'

  onMount(() => {
    loadSessions()
  })

  let confirmDelete = $state<string | null>(null)

  function handleDelete(e: MouseEvent, id: string) {
    e.stopPropagation()
    if (confirmDelete === id) {
      deleteSession(id)
      confirmDelete = null
    } else {
      confirmDelete = id
      setTimeout(() => { if (confirmDelete === id) confirmDelete = null }, 3000)
    }
  }
</script>

<div class="sessions-page">
  <h2>Sessions</h2>
  <div class="session-list">
    {#each $sessions as session (session.id)}
      <div
        class="session-card group"
        class:active={$currentSession === session.id}
      >
        <button
          class="session-content"
          onclick={() => {
            loadSessionMessages(session.id)
            location.hash = '#/chat'
          }}
        >
          <div class="session-title">{session.title || 'Untitled'}</div>
          <div class="session-meta">
            {new Date(session.last_active_at).toLocaleString()}
          </div>
        </button>
        <button
          class="session-delete"
          onclick={(e) => handleDelete(e, session.id)}
          title={confirmDelete === session.id ? 'Click again to confirm delete' : 'Delete session'}
          aria-label="Delete session"
        >
          {#if confirmDelete === session.id}
            <span class="confirm-text">Delete?</span>
          {:else}
            <Trash2Icon class="icon" />
          {/if}
        </button>
      </div>
    {:else}
      <div class="empty">No sessions yet. Start chatting with Nomos.</div>
    {/each}
  </div>
</div>

<style>
  .sessions-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1rem;
  }

  h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text);
  }

  .session-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .session-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.875rem;
    transition: border-color 0.15s;
  }

  .session-card:hover {
    border-color: var(--accent-blue);
  }

  .session-card.active {
    border-color: var(--accent-blue);
    background: var(--bg-hover);
  }

  .session-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
  }

  .session-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 4px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
  }

  .group:hover .session-delete {
    opacity: 1;
  }

  .session-delete:hover {
    background: var(--destructive-bg-subtle, rgba(239, 68, 68, 0.1));
    color: var(--destructive, #ef4444);
  }

  .confirm-text {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--destructive, #ef4444);
  }

  .icon {
    width: 16px;
    height: 16px;
  }

  .session-title {
    font-weight: 500;
  }

  .session-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  .empty {
    color: var(--text-muted);
    font-size: 0.875rem;
    padding: 2rem 0;
    text-align: center;
  }
</style>
