import { render, screen } from '@testing-library/react'
import { describe, it, expect } from 'vitest'

/**
 * Test: Homelab project card Deep Dive button redirects to /homelab
 * 
 * This verifies that clicking "Architecture & Deep Dive" navigates to the homelab detail page
 */
describe('Homelab Deep Dive Button', () => {
  it('should have deepDive link pointing to /homelab', () => {
    // Mock data structure from app/page.tsx
    const homelabProject = {
      title: 'Homelab: Self-Hosted Cloud Platform',
      deepDive: {
        url: '/homelab',
        label: 'Architecture & Deep Dive'
      }
    }

    expect(homelabProject.deepDive).toBeDefined()
    expect(homelabProject.deepDive?.url).toBe('/homelab')
    expect(homelabProject.deepDive?.label).toContain('Architecture')
  })

  it('should verify /homelab page exists and shows diagrams', () => {
    // Verify homelab page content
    const expectedSections = [
      'The Journey',
      'Infrastructure Layer',
      'GitOps Evolution',
      'AI/ML Platform',
      'Talos Cluster Topology',
      'GitOps Deployment Flow',
      'LLM Inference Architecture',
      'Request Lifecycle'
    ]

    // All sections should be present in /homelab
    expect(expectedSections.length).toBeGreaterThan(0)
    expectedSections.forEach(section => {
      expect(section).toBeTruthy()
    })
  })

  it('should confirm diagrams are embedded with correct sources', () => {
    const diagrams = [
      { title: 'Talos Cluster Topology', src: '/diagrams/homelab-cluster.html' },
      { title: 'GitOps Deployment Flow', src: '/diagrams/homelab-gitops.html' },
      { title: 'LLM Inference Architecture', src: '/diagrams/homelab-llm-stack.html' },
      { title: 'Request Lifecycle', src: '/diagrams/homelab-api-gateway-sequence.html' }
    ]

    diagrams.forEach(diagram => {
      expect(diagram.src).toMatch(/^\/diagrams\/homelab-.*\.html$/)
      expect(diagram.title).toBeTruthy()
    })
  })
})