<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  import AnalysisDisplay from './AnalysisDisplay.svelte';
  import type { AnalysisGradient } from '../types';

  export let recommendation: any = null;
  export let isShortForm: boolean;
  export let completedGradients: number;
  export let allAnalysisGradients: AnalysisGradient[];

  const dispatch = createEventDispatcher<{
    switchToLongForm: void;
    jumpToExport: void;
    updateAnalysis: { index: number; value: number | null };
    updateAnalysisNotes: { index: number; notes: string };
  }>();

  $: hasRecommendation = recommendation?.recommendedForm === 'long';

  let showAllAnalysis = false;

  function handleSwitchToLongForm() {
    dispatch('switchToLongForm');
  }

  function handleJumpToExport() {
    dispatch('jumpToExport');
  }

  function toggleAllAnalysis() {
    showAllAnalysis = !showAllAnalysis;
  }
</script>

<div class="transition-banner">
  <div class="banner-content">
    <div class="banner-header">
      <div class="completion-icon">✓</div>
      <div class="header-text">
        <h3>Diagnostics Complete</h3>
        <p class="subtext">Analysis calculated from {completedGradients} gradient{completedGradients !== 1 ? 's' : ''}</p>
      </div>
    </div>

    <!-- Recommendation Alert (if applicable) -->
    {#if isShortForm && hasRecommendation && recommendation}
      <div class="recommendation-alert">
        <div class="alert-header">
          <span class="alert-icon">⚠</span>
          <strong>Long Form Recommended</strong>
        </div>
        <div class="alert-body">
          <p class="alert-message">
            {#if recommendation.confidence < 60}
              • Low classification confidence ({recommendation.confidence}%)<br>
            {/if}
            {#if recommendation.completeness < 50}
              • Incomplete data ({recommendation.completeness}% of dimensions)<br>
            {/if}
            {#if recommendation.distanceToBoundary < 0.5}
              • Protocol near boundary between families<br>
            {/if}
            {#if recommendation.coverage < 75}
              • Missing key dimensions for reliable short-form classification ({recommendation.coverage}% coverage)<br>
            {/if}
          </p>
        </div>
      </div>
    {/if}

    <!-- Action Buttons -->
    <div class="action-buttons">
      <button class="action-btn view-analysis-btn" on:click={toggleAllAnalysis}>
        {showAllAnalysis ? '▼' : '▶'} {showAllAnalysis ? 'Hide' : 'View'} Analysis
      </button>
      <button class="action-btn export-btn" on:click={handleJumpToExport}>
        Export Readings →
      </button>
      {#if isShortForm}
        <button class="action-btn longform-btn" on:click={handleSwitchToLongForm}>
          Switch to Long Form & Restart →
        </button>
      {/if}
    </div>

    <!-- All Analysis Gradients (expandable) -->
    {#if showAllAnalysis}
      <div class="all-analysis-section">
        <div class="analysis-header">Analysis Gradients</div>
        {#each allAnalysisGradients as gradient, index}
          {#if index !== 3}
            <div class="analysis-item">
              <AnalysisDisplay
                {gradient}
                focusedMode={false}
                on:change={(e) => dispatch('updateAnalysis', { index, value: e.detail })}
                on:notes={(e) => dispatch('updateAnalysisNotes', { index, notes: e.detail })}
              />
            </div>
          {/if}
        {/each}
      </div>
    {/if}
  </div>
</div>

<style>
  .transition-banner {
    margin-bottom: 2rem;
    animation: fadeInSlide 0.5s ease-out;
  }

  @keyframes fadeInSlide {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .banner-content {
    border: 2px solid var(--border-color);
    background: var(--input-bg);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
  }

  .banner-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--fg-color) 20%,
      var(--fg-color) 80%,
      transparent 100%);
    opacity: 0.3;
    animation: shimmer 2s ease-in-out;
  }

  @keyframes shimmer {
    0% {
      opacity: 0;
      transform: translateX(-100%);
    }
    50% {
      opacity: 0.3;
    }
    100% {
      opacity: 0;
      transform: translateX(100%);
    }
  }

  .banner-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
  }

  .completion-icon {
    font-size: 2rem;
    color: #4ade80;
    animation: checkPop 0.5s ease-out 0.2s both;
  }

  @keyframes checkPop {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  .header-text h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.05rem;
  }

  .subtext {
    margin: 0.25rem 0 0 0;
    font-size: 0.85rem;
    opacity: 0.7;
  }

  .recommendation-alert {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(251, 191, 36, 0.1);
    border: 2px solid #fbbf24;
    border-radius: 4px;
  }

  .alert-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .alert-icon {
    font-size: 1.2rem;
    color: #fbbf24;
  }

  .alert-header strong {
    font-size: 1rem;
    color: #fbbf24;
  }

  .alert-body {
    padding-left: 1.7rem;
  }

  .alert-message {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .action-btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.95rem;
    font-weight: bold;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 3px;
    background: var(--bg-color);
    color: var(--fg-color);
  }

  .action-btn:hover {
    transform: translateY(-1px);
    border-color: var(--fg-color);
  }

  .export-btn {
    background: var(--fg-color);
    color: var(--bg-color);
    border-color: var(--fg-color);
  }

  .export-btn:hover {
    opacity: 0.9;
  }

  .longform-btn {
    background: #fbbf24;
    color: #1a1a2e;
    border-color: #fbbf24;
  }

  .longform-btn:hover {
    background: #f59e0b;
    border-color: #f59e0b;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
  }

  .view-analysis-btn {
    text-align: left;
  }

  .all-analysis-section {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    animation: slideDown 0.3s ease-out;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      max-height: 0;
      padding: 0 1rem;
    }
    to {
      opacity: 1;
      max-height: 2000px;
      padding: 1rem;
    }
  }

  .analysis-header {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
  }

  .analysis-item {
    margin-bottom: 1rem;
  }

  .analysis-item:last-child {
    margin-bottom: 0;
  }

  @media (max-width: 768px) {
    .banner-content {
      padding: 1rem;
    }

    .banner-header {
      gap: 0.75rem;
    }

    .completion-icon {
      font-size: 1.5rem;
    }

    .header-text h3 {
      font-size: 1rem;
    }

    .subtext {
      font-size: 0.8rem;
    }

    .alert-body {
      padding-left: 1rem;
    }

    .action-btn {
      font-size: 0.9rem;
      padding: 0.6rem;
    }

    .all-analysis-section {
      padding: 0.75rem;
    }
  }
</style>
