---
import type { AStatusUpdateRecord } from '../../lib/generated/a-status-update';
import { AtprotoBrowser } from '../../lib/atproto/atproto-browser';
import { loadConfig } from '../../lib/config/site';

const config = loadConfig();
const client = new AtprotoBrowser();

// Fetch the latest status update
let latestStatus: AStatusUpdateRecord | null = null;
try {
  const records = await client.getAllCollectionRecords(config.atproto.handle, 'a.status.update', 1);
  
  if (records.length > 0) {
    latestStatus = records[0].value as AStatusUpdateRecord;
  }
} catch (error) {
  console.error('Failed to fetch status update:', error);
}
---

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4" id="status-update-container">
  {latestStatus ? (
    <div class="space-y-2">
      <p class="text-lg font-medium text-gray-900 dark:text-white leading-relaxed" id="status-text">
        {latestStatus.text}
      </p>
      <time class="text-sm text-gray-500 dark:text-gray-400 block" id="status-time" datetime={latestStatus.createdAt}>
        {new Date(latestStatus.createdAt).toLocaleDateString('en-US', {
          year: 'numeric',
          month: 'short',
          day: 'numeric',
          hour: '2-digit',
          minute: '2-digit'
        })}
      </time>
    </div>
  ) : (
    <div class="text-center py-4" id="status-placeholder">
      <p class="text-gray-500 italic">No status updates available</p>
    </div>
  )}
</div>

<script>
  import { startSharedStream, subscribeToStatusUpdates } from '../../lib/atproto/jetstream-client';
  
  // Start the shared stream
  startSharedStream();
  
  // Subscribe to status updates
  const unsubscribe = subscribeToStatusUpdates((event) => {
    if (event.commit.operation === 'create') {
      updateStatusDisplay(event.commit.record);
    }
  });
  
  function updateStatusDisplay(statusData: any) {
    const container = document.getElementById('status-update-container');
    const textEl = document.getElementById('status-text');
    const timeEl = document.getElementById('status-time');
    const placeholderEl = document.getElementById('status-placeholder');
    
    if (!container) return;
    
    // Remove placeholder if it exists
    if (placeholderEl) {
      placeholderEl.remove();
    }
    
    // Update or create text element
    if (textEl) {
      textEl.textContent = statusData.text;
    } else {
      const newTextEl = document.createElement('p');
      newTextEl.className = 'text-lg font-medium text-gray-900 dark:text-white leading-relaxed';
      newTextEl.id = 'status-text';
      newTextEl.textContent = statusData.text;
      container.appendChild(newTextEl);
    }
    
    // Update or create time element
    const formattedTime = new Date(statusData.createdAt).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
    
    if (timeEl) {
      timeEl.textContent = formattedTime;
      timeEl.setAttribute('datetime', statusData.createdAt);
    } else {
      const newTimeEl = document.createElement('time');
      newTimeEl.className = 'text-sm text-gray-500 dark:text-gray-400 block';
      newTimeEl.id = 'status-time';
      newTimeEl.setAttribute('datetime', statusData.createdAt);
      newTimeEl.textContent = formattedTime;
      container.appendChild(newTimeEl);
    }
    
    // Add a subtle animation to indicate the update
    container.style.transition = 'all 0.3s ease';
    container.style.transform = 'scale(1.02)';
    setTimeout(() => {
      container.style.transform = 'scale(1)';
    }, 300);
  }
  
  // Cleanup on page unload
  window.addEventListener('beforeunload', () => {
    unsubscribe();
  });
</script>