{% extends "base.html" %}

{% block title %}Dream Journal{% endblock %}
{% block page_title %}Dream Journal{% endblock %}

{% block head %}
<style>
  .dream-bg {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }
  .star {
    position: absolute;
    width: 2px; height: 2px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: twinkle var(--duration) ease-in-out var(--delay) infinite;
  }
  @keyframes twinkle {
    0%, 100% { opacity: 0; }
    50% { opacity: var(--max-opacity); }
  }
  @keyframes floatUp {
    0% { opacity: 0; transform: translateY(20px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  .dream-card {
    animation: floatUp 0.6s ease-out forwards;
    opacity: 0;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  }
  .dream-card:hover {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.12);
    transform: translateY(-2px);
  }
  .insight-glow {
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
  }
  .connection-line {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.6), rgba(99, 102, 241, 0.3));
    height: 1px;
    position: relative;
  }
  .connection-line::after {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent);
    animation: shimmer 3s ease-in-out infinite;
  }
  @keyframes shimmer {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
  }
  .night-divider {
    position: relative;
    text-align: center;
    margin: 2rem 0 1.5rem;
  }
  .night-divider::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
  }
  .night-divider span {
    position: relative;
    background: #030712;
    padding: 0 1rem;
  }
</style>
{% endblock %}

{% block content %}
<!-- Star background -->
<div class="dream-bg" id="star-field"></div>

<!-- Stats header -->
<div class="relative z-10 grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6">
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 text-center">
    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-2">Total Dreams</div>
    <div class="text-3xl font-display font-bold text-indigo-300" id="stat-total">--</div>
  </div>
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 text-center">
    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-2">Insights Generated</div>
    <div class="text-3xl font-display font-bold text-violet-300" id="stat-insights">--</div>
  </div>
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 text-center sm:col-span-1 col-span-2">
    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-2">Sleep Entries</div>
    <div class="text-3xl font-display font-bold text-slate-300" id="stat-sleep">--</div>
  </div>
</div>

<!-- Dream Timeline -->
<div class="relative z-10 mb-8" id="dream-timeline">
  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4 flex items-center gap-2">
    <svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
    Dream Timeline
  </h2>
  <div id="dreams-container" class="space-y-1">
    <div class="text-xs text-slate-600 text-center py-12">Loading dream data...</div>
  </div>
</div>

<!-- Sleep Diary -->
<div class="relative z-10" id="sleep-section">
  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4 flex items-center gap-2">
    <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
    Sleep Diary
  </h2>
  <div id="sleep-container" class="space-y-3">
    <div class="text-xs text-slate-600 text-center py-8">Loading sleep entries...</div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  const REFRESH_MS = 60000;

  // Generate star field
  function createStars() {
    const field = document.getElementById('star-field');
    for (let i = 0; i < 80; i++) {
      const star = document.createElement('div');
      star.className = 'star';
      star.style.left = Math.random() * 100 + '%';
      star.style.top = Math.random() * 100 + '%';
      star.style.setProperty('--duration', (2 + Math.random() * 4) + 's');
      star.style.setProperty('--delay', (Math.random() * 3) + 's');
      star.style.setProperty('--max-opacity', (0.2 + Math.random() * 0.5).toString());
      const size = 1 + Math.random() * 2;
      star.style.width = size + 'px';
      star.style.height = size + 'px';
      field.appendChild(star);
    }
  }

  function groupByNight(dreams) {
    const groups = {};
    for (const d of dreams) {
      const date = (d.created_at || '').split(/[T ]/)[0] || 'Unknown';
      if (!groups[date]) groups[date] = [];
      groups[date].push(d);
    }
    return groups;
  }

  function renderDreamCard(d, idx) {
    const insight = d.insight_content || d.insight || 'No insight recorded';
    const memA = d.memory_a_content || `Memory #${d.memory_a_id || '?'}`;
    const memB = d.memory_b_content || `Memory #${d.memory_b_id || '?'}`;
    const created = d.created_at ? relativeTime(d.created_at) : '';
    const delay = idx * 0.1;

    return `<div class="dream-card bg-slate-900/50 border border-indigo-500/20 rounded-xl p-5 mb-3" style="animation-delay:${delay}s">
      <div class="flex items-center justify-between mb-3">
        <div class="flex items-center gap-2">
          <svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
          <span class="text-xs text-indigo-400 font-medium">Dream Connection</span>
        </div>
        <span class="text-[10px] text-slate-600 font-mono">${escapeHtml(created)}</span>
      </div>

      <!-- Two memories connected -->
      <div class="flex items-stretch gap-0 mb-4">
        <div class="flex-1 bg-slate-800/50 border border-slate-700/50 rounded-lg p-3">
          <div class="text-[10px] uppercase tracking-wider text-slate-500 mb-1">Memory A</div>
          <p class="text-xs text-slate-300 leading-relaxed">${escapeHtml(typeof memA === 'string' ? (memA.length > 120 ? memA.substring(0, 120) + '...' : memA) : String(memA))}</p>
        </div>
        <div class="flex flex-col items-center justify-center px-3">
          <div class="w-8 connection-line"></div>
          <svg class="w-4 h-4 text-violet-400 my-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
          <div class="w-8 connection-line"></div>
        </div>
        <div class="flex-1 bg-slate-800/50 border border-slate-700/50 rounded-lg p-3">
          <div class="text-[10px] uppercase tracking-wider text-slate-500 mb-1">Memory B</div>
          <p class="text-xs text-slate-300 leading-relaxed">${escapeHtml(typeof memB === 'string' ? (memB.length > 120 ? memB.substring(0, 120) + '...' : memB) : String(memB))}</p>
        </div>
      </div>

      <!-- Insight -->
      <div class="bg-violet-500/5 border border-violet-500/20 rounded-lg p-3">
        <div class="text-[10px] uppercase tracking-wider text-violet-400 font-semibold mb-1">Insight</div>
        <p class="text-sm text-violet-200 leading-relaxed insight-glow">${escapeHtml(insight)}</p>
      </div>
    </div>`;
  }

  function renderSleepEntry(entry) {
    const content = entry.content || entry.summary || 'Sleep cycle completed';
    const created = entry.created_at ? relativeTime(entry.created_at) : '';
    return `<div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 transition-all hover:border-slate-700/50">
      <div class="flex items-center justify-between mb-2">
        <span class="text-[10px] px-1.5 py-0.5 rounded bg-slate-700 text-slate-400 font-medium">sleep</span>
        <span class="text-[10px] text-slate-600 font-mono">${escapeHtml(created)}</span>
      </div>
      <p class="text-sm text-slate-300 leading-relaxed">${escapeHtml(content)}</p>
    </div>`;
  }

  async function loadDreams() {
    const data = await fetchJSON('/api/dreams');
    if (!data) return;

    const dreams = data.dreams || [];
    const sleepEntries = data.sleep_entries || [];

    // Stats
    document.getElementById('stat-total').textContent = formatNumber(dreams.length);
    document.getElementById('stat-insights').textContent = formatNumber(dreams.filter(d => d.insight_content || d.insight_id).length);
    document.getElementById('stat-sleep').textContent = formatNumber(sleepEntries.length);

    // Timeline grouped by night
    const container = document.getElementById('dreams-container');
    if (dreams.length === 0) {
      container.innerHTML = '<div class="text-center py-12"><div class="text-2xl mb-2">&#127769;</div><div class="text-sm text-slate-500">No dreams recorded yet. Dreams are generated during deep sleep cycles.</div></div>';
      return;
    }

    const groups = groupByNight(dreams);
    let html = '';
    let cardIdx = 0;
    for (const [night, nightDreams] of Object.entries(groups).sort((a, b) => b[0].localeCompare(a[0]))) {
      const d = new Date(night + 'T00:00:00');
      const label = isNaN(d.getTime()) ? night : d.toLocaleDateString('en', { weekday: 'long', month: 'short', day: 'numeric' });
      html += `<div class="night-divider"><span class="text-xs text-indigo-400/60 font-mono">${escapeHtml(label)} &mdash; ${nightDreams.length} dream${nightDreams.length > 1 ? 's' : ''}</span></div>`;
      for (const dream of nightDreams) {
        html += renderDreamCard(dream, cardIdx++);
      }
    }
    container.innerHTML = html;

    // Sleep entries
    const sleepContainer = document.getElementById('sleep-container');
    sleepContainer.innerHTML = sleepEntries.length === 0
      ? '<div class="text-xs text-slate-600 text-center py-6">No sleep diary entries</div>'
      : sleepEntries.map(renderSleepEntry).join('');
  }

  // Init
  createStars();
  loadDreams();
  setInterval(loadDreams, REFRESH_MS);
</script>
{% endblock %}