<script lang="ts">
  import type { AISessionItem, InspectorItem } from '../types';

  export let sessions: AISessionItem[];
  export let onInspect: (item: InspectorItem) => void;
  let selectedSessionID = sessions[0]?.id;

  $: selectedSession = sessions.find((session) => session.id === selectedSessionID) ?? sessions[0];

  function inspectSession(session: AISessionItem) {
    onInspect({ title: session.title, type: 'AI session', description: session.summary, properties: [{ label: 'Updated', value: session.updatedAt }, { label: 'References', value: session.references.join(', ') }] });
  }
</script>

<section class="channel-page ai-sessions-channel">
  <header class="channel-header"><p>Project intelligence</p><h1>AI Sessions</h1></header>
  <div class="session-layout">
    <div class="session-list">
      {#each sessions as session}
        <button class:active={selectedSession?.id === session.id} on:click={() => (selectedSessionID = session.id)}>{session.title}<small>{session.updatedAt}</small></button>
      {/each}
    </div>
    {#if selectedSession}
      <article class="conversation-summary"><h2>{selectedSession.title}</h2><p>{selectedSession.summary}</p><p>References: {selectedSession.references.join(', ')}</p><button aria-label={`Inspect ${selectedSession.title}`} on:click={() => inspectSession(selectedSession)}>Inspect</button></article>
    {/if}
  </div>
</section>
