<script lang="ts">
  import { onMount } from 'svelte';
  import SegmentsView from './SegmentsView.svelte';
  import SegmentDetail from './SegmentDetail.svelte';

  export let base: string = '/';

  let segmentId: string | null = null;
  let mounted = false;

  onMount(() => {
    // /segments/{id}/ → last non-empty path part is the ID
    // /segments/      → last part is 'segments', no detail view
    // /segments/new/  → skip (handled by its own page)
    const parts = window.location.pathname.replace(/\/$/, '').split('/').filter(Boolean);
    const last = parts[parts.length - 1];
    if (last && last !== 'segments' && last !== 'new') {
      segmentId = last;
    }
    mounted = true;
  });
</script>

{#if mounted}
  {#if segmentId}
    <SegmentDetail {base} {segmentId} />
  {:else}
    <div class="flex flex-col" style="height: calc(100vh - 48px);">
      <SegmentsView {base} />
    </div>
  {/if}
{/if}
