// SPDX-License-Identifier: LicenseRef-Commercial
<script lang="ts">
  import {
    proExportSession,
    proExportProjectSummary,
    type SessionReport,
    type ProjectSummaryReport,
  } from './pro-bridge';

  interface Props {
    projectId: string;
    sessionId?: string;
  }

  let { projectId, sessionId }: Props = $props();

  type Mode = 'session' | 'project';
  const SUMMARY_PERIODS = [7, 30, 90] as const;
  type SummaryPeriod = (typeof SUMMARY_PERIODS)[number];

  let mode = $state<Mode>(sessionId ? 'session' : 'project');
  let summaryDays = $state<SummaryPeriod>(30);
  let loading = $state(false);
  let error = $state<string | null>(null);
  let markdown = $state<string | null>(null);
  let copied = $state(false);

  async function generate() {
    loading = true;
    error = null;
    markdown = null;
    try {
      if (mode === 'session' && sessionId) {
        const report: SessionReport = await proExportSession(projectId, sessionId);
        markdown = report.markdown;
      } else {
        const report: ProjectSummaryReport = await proExportProjectSummary(projectId, summaryDays);
        markdown = report.markdown;
      }
    } catch (e) {
      error = e instanceof Error ? e.message : String(e);
    } finally {
      loading = false;
    }
  }

  async function copyToClipboard() {
    if (!markdown) return;
    try {
      await navigator.clipboard.writeText(markdown);
      copied = true;
      setTimeout(() => (copied = false), 2000);
    } catch {
      error = 'Failed to copy to clipboard';
    }
  }
</script>

<div class="exporter-root">
  <div class="mode-bar">
    <button
      class="mode-btn"
      class:active={mode === 'session'}
      disabled={!sessionId}
      onclick={() => (mode = 'session')}
    >Session</button>
    <button
      class="mode-btn"
      class:active={mode === 'project'}
      onclick={() => (mode = 'project')}
    >Project Summary</button>
  </div>

  {#if mode === 'project'}
    <div class="period-bar">
      {#each SUMMARY_PERIODS as p}
        <button
          class="period-btn"
          class:active={summaryDays === p}
          onclick={() => (summaryDays = p)}
        >{p}d</button>
      {/each}
    </div>
  {/if}

  <div class="actions">
    <button class="btn-primary" onclick={generate} disabled={loading || (mode === 'session' && !sessionId)}>
      {loading ? 'Generating...' : 'Generate Report'}
    </button>
    {#if markdown}
      <button class="btn-secondary" onclick={copyToClipboard}>
        {copied ? 'Copied!' : 'Copy to Clipboard'}
      </button>
    {/if}
  </div>

  {#if error}
    <div class="state-msg error">{error}</div>
  {/if}

  {#if markdown}
    <pre class="preview">{markdown}</pre>
  {/if}
</div>

<style>
  .exporter-root {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    color: var(--ctp-text);
    font-family: var(--ui-font-family, system-ui, sans-serif);
    font-size: var(--ui-font-size, 0.8125rem);
    overflow-y: auto;
    height: 100%;
  }

  .mode-bar, .period-bar {
    display: flex;
    gap: 0.25rem;
  }

  .mode-btn, .period-btn {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--ctp-surface1);
    border-radius: 0.25rem;
    background: var(--ctp-surface0);
    color: var(--ctp-subtext0);
    cursor: pointer;
    font-size: 0.75rem;
  }

  .mode-btn:hover:not(:disabled), .period-btn:hover {
    background: var(--ctp-surface1);
    color: var(--ctp-text);
  }

  .mode-btn.active, .period-btn.active {
    background: var(--ctp-blue);
    color: var(--ctp-base);
    border-color: var(--ctp-blue);
  }

  .mode-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .actions {
    display: flex;
    gap: 0.5rem;
  }

  .btn-primary, .btn-secondary {
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    cursor: pointer;
    border: 1px solid transparent;
  }

  .btn-primary {
    background: var(--ctp-blue);
    color: var(--ctp-base);
  }

  .btn-primary:hover:not(:disabled) {
    opacity: 0.9;
  }

  .btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .btn-secondary {
    background: var(--ctp-surface0);
    color: var(--ctp-text);
    border-color: var(--ctp-surface1);
  }

  .btn-secondary:hover {
    background: var(--ctp-surface1);
  }

  .state-msg.error {
    color: var(--ctp-red);
    font-size: 0.75rem;
  }

  .preview {
    background: var(--ctp-mantle);
    border: 1px solid var(--ctp-surface0);
    border-radius: 0.375rem;
    padding: 0.75rem;
    font-family: monospace;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--ctp-subtext1);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-y: auto;
    max-height: 24rem;
  }
</style>
