<script lang="ts">
  const reportTabs = [
    {
      id: "internal-review",
      label: "Internal Review",
      icon: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4",
      description:
        "View opportunities currently in internal review, with reviewer assignments and time in review.",
    },
    {
      id: "loss",
      label: "Loss Report",
      icon: "M13 17h8m0 0V9m0 8l-8-8-4 4-6-6",
      description:
        "Analyze lost opportunities by reason, rep, time period, and revenue impact.",
    },
    {
      id: "cancelled",
      label: "Cancelled",
      icon: "M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636",
      description:
        "Track cancelled opportunities with cancellation reasons and patterns.",
    },
    {
      id: "won",
      label: "Won Report",
      icon: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
      description:
        "Review won opportunities, win rates, revenue captured, and sales cycle metrics.",
    },
    {
      id: "follow-up-lateness",
      label: "Follow-Up Lateness",
      icon: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z",
      description:
        "Monitor overdue follow-up activities, stale opportunities, and SLA compliance.",
    },
  ] as const;

  type ReportTab = (typeof reportTabs)[number]["id"];
  let activeReport: ReportTab = "internal-review";
</script>

<div class="reports-page">
  <div class="reports-header">
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      width="20"
      height="20"
    >
      <path
        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
      />
    </svg>
    <h3 class="reports-title">Workflow Reports</h3>
  </div>

  <!-- Report sub-tabs -->
  <div class="reports-subtabs" role="tablist">
    {#each reportTabs as tab}
      <button
        class="reports-subtab"
        class:active={activeReport === tab.id}
        role="tab"
        aria-selected={activeReport === tab.id}
        on:click={() => (activeReport = tab.id)}
      >
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          width="14"
          height="14"
        >
          <path d={tab.icon} />
        </svg>
        {tab.label}
      </button>
    {/each}
  </div>

  <!-- Report content -->
  <div class="reports-content">
    {#each reportTabs as tab}
      {#if activeReport === tab.id}
        <div class="report-panel">
          <div class="report-placeholder">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              width="48"
              height="48"
              class="report-placeholder-icon"
            >
              <path d={tab.icon} />
            </svg>
            <h4 class="report-placeholder-title">{tab.label}</h4>
            <p class="report-placeholder-desc">{tab.description}</p>
            <p class="report-placeholder-note">
              Report endpoints are being built. This view will populate
              automatically when the API is ready.
            </p>
          </div>
        </div>
      {/if}
    {/each}
  </div>
</div>

<style>
  .reports-page {
    padding: 0;
  }

  .reports-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--text-primary);
  }

  .reports-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
  }

  .reports-subtabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--nav-hover-bg);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
  }

  .reports-subtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition:
      background 0.15s,
      color 0.15s;
  }

  .reports-subtab:hover {
    background: var(--nav-active-bg);
    color: var(--text-primary);
  }

  .reports-subtab.active {
    background: var(--card-bg);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .reports-content {
    min-height: 300px;
  }

  .report-panel {
    animation: reportFadeIn 0.2s ease;
  }

  @keyframes reportFadeIn {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .report-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
  }

  .report-placeholder-icon {
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 16px;
  }

  .report-placeholder-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
  }

  .report-placeholder-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 16px;
    max-width: 400px;
    line-height: 1.5;
  }

  .report-placeholder-note {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
    padding: 8px 16px;
    background: var(--bg-inset);
    border-radius: 6px;
  }

  @media (max-width: 768px) {
    .reports-subtabs {
      flex-wrap: nowrap;
    }

    .reports-subtab {
      font-size: 11px;
      padding: 6px 10px;
    }
  }
</style>
