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

  export let workspace: ProjectWorkspace;
  export let onInspect: (item: InspectorItem) => void;

  const metrics = (workspace: ProjectWorkspace) => [
    { label: 'Inbox', value: workspace.inbox.length, description: 'Messages waiting for review' },
    { label: 'Tasks', value: workspace.tasks.length, description: 'Work plan records' },
    { label: 'AI Sessions', value: workspace.aiSessions.length, description: 'Saved conversations' },
    { label: 'Notes & Sources', value: workspace.notesSources.length, description: 'Project reference records' },
    { label: 'Cron Plans', value: workspace.cronPlans.length, description: 'Scheduled task records' },
  ];
</script>

<section class="channel-page overview-channel">
  <header class="channel-header">
    <div>
      <p>{workspace.project.name}</p>
      <h1>Overview</h1>
    </div>
    <div class="overview-tools" aria-label="Overview filters">
      <span>2026-07-20</span>
      <button type="button" aria-label="More overview actions">...</button>
    </div>
  </header>
  <div class="metric-list">
    {#each metrics(workspace) as metric}
      <button class="metric-card" on:click={() => onInspect({ title: metric.label, type: 'Workspace metric', description: metric.description, properties: [{ label: 'Records', value: String(metric.value) }] })}>
        <strong>{metric.value}</strong>
        <span>{metric.label}</span>
      </button>
    {/each}
  </div>

  <div class="overview-grid">
    <section class="overview-section">
      <header>
        <h2>Inbox 待处理</h2>
        <a href="/" on:click|preventDefault>查看全部</a>
      </header>
      <div class="overview-rows">
        {#each workspace.inbox as message}
          <button
            type="button"
            class="overview-row"
            on:click={() => onInspect({
              title: message.title,
              type: 'Inbox message',
              description: message.summary,
              properties: [
                { label: 'Source', value: message.source },
                { label: 'Status', value: message.status },
                { label: 'Tag', value: message.tag },
              ],
            })}
          >
            <span>{message.title}</span>
            <small>来源 {message.source} · #{message.tag}</small>
            <time>{message.time}</time>
          </button>
        {/each}
      </div>
    </section>

    <section class="overview-section">
      <header>
        <h2>进行中的任务</h2>
        <a href="/" on:click|preventDefault>查看全部</a>
      </header>
      <div class="overview-rows">
        {#each workspace.tasks as task}
          <button
            type="button"
            class="overview-row"
            on:click={() => onInspect({
              title: task.title,
              type: 'Task',
              description: task.summary,
              properties: [
                { label: 'Status', value: task.completed ? 'Done' : 'Open' },
                { label: 'Owner', value: task.owner },
                { label: 'Due', value: task.due },
              ],
            })}
          >
            <span>{task.title}</span>
            <small>负责人 {task.owner} · #{task.tag}</small>
            <time>{task.due}</time>
          </button>
        {/each}
      </div>
    </section>

    <section class="overview-section">
      <header>
        <h2>AI 会话</h2>
        <a href="/" on:click|preventDefault>查看全部</a>
      </header>
      <div class="overview-rows">
        {#each workspace.aiSessions as session}
          <button
            type="button"
            class="overview-row"
            on:click={() => onInspect({
              title: session.title,
              type: 'AI session',
              description: session.summary,
              properties: session.references.map((reference) => ({ label: 'Reference', value: reference })),
            })}
          >
            <span>{session.title}</span>
            <small>{session.summary}</small>
            <time>{session.updatedAt}</time>
          </button>
        {/each}
      </div>
    </section>

    <section class="overview-section">
      <header>
        <h2>最近笔记资料</h2>
        <a href="/" on:click|preventDefault>查看全部</a>
      </header>
      <div class="overview-rows">
        {#each workspace.notesSources as item}
          <button
            type="button"
            class="overview-row"
            on:click={() => onInspect({
              title: item.title,
              type: item.kind,
              description: `${item.source} · ${item.tag}`,
              properties: [
                { label: 'Updated', value: item.updatedAt },
                { label: 'Tag', value: item.tag },
              ],
            })}
          >
            <span>{item.title}</span>
            <small>{item.source} · #{item.tag}</small>
            <time>{item.updatedAt}</time>
          </button>
        {/each}
      </div>
    </section>
  </div>
</section>
