import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-typography-showcase',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="typography-showcase">
      <div class="section">
        <h2 class="text-h2 text-primary">🎨 Sistema de Tipografia IDT</h2>
        <p class="text-body-1 text-secondary">
          Demonstração completa do sistema de tipografia com todas as variações disponíveis.
        </p>
      </div>

      <!-- Display e Títulos -->
      <div class="section">
        <h3 class="text-h3 text-primary">📊 Display e Títulos</h3>
        <div class="examples">
          <h1 class="text-display-1">Display 1 - Extra Grande</h1>
          <h2 class="text-display-2">Display 2 - Grande</h2>
          <h1 class="text-h1">Heading 1 - Principal</h1>
          <h2 class="text-h2">Heading 2 - Secundário</h2>
          <h3 class="text-h3">Heading 3 - Terciário</h3>
          <h4 class="text-h4">Heading 4 - Quaternário</h4>
        </div>
      </div>

      <!-- Texto do Corpo -->
      <div class="section">
        <h3 class="text-h3 text-primary">📝 Texto do Corpo</h3>
        <div class="examples">
          <p class="text-body-1">
            <strong>Body 1:</strong> Este é o texto principal do corpo, usado para a maioria dos conteúdos. 
            Tem boa legibilidade e espaçamento adequado para leitura prolongada.
          </p>
          <p class="text-body-2">
            <strong>Body 2:</strong> Texto secundário menor, ideal para descrições, 
            legendas e informações complementares.
          </p>
          <small class="text-caption">
            <strong>Caption:</strong> Texto de legenda para informações auxiliares e metadados.
          </small>
        </div>
      </div>

      <!-- Labels e UI -->
      <div class="section">
        <h3 class="text-h3 text-primary">🏷️ Labels e Interface</h3>
        <div class="examples">
          <label class="text-label-large">Label Grande - Formulários principais</label>
          <label class="text-label-medium">Label Médio - Campos secundários</label>
          <label class="text-label-small">Label Pequeno - Indicadores</label>
        </div>
      </div>

      <!-- Cores de Texto -->
      <div class="section">
        <h3 class="text-h3 text-primary">🎨 Cores de Texto</h3>
        <div class="examples">
          <p class="text-primary">Texto Primário - Principal</p>
          <p class="text-secondary">Texto Secundário - Informações</p>
          <p class="text-tertiary">Texto Terciário - Detalhes</p>
          <p class="text-quaternary">Texto Quaternário - Sutil</p>
          <p class="text-disabled">Texto Desabilitado</p>
          <p class="text-link">Texto de Link - Interativo</p>
          <p class="text-error">Texto de Erro - Atenção</p>
          <p class="text-success">Texto de Sucesso - Positivo</p>
          <p class="text-warning">Texto de Aviso - Cuidado</p>
        </div>
      </div>

      <!-- Pesos de Fonte -->
      <div class="section">
        <h3 class="text-h3 text-primary">⚖️ Pesos de Fonte</h3>
        <div class="examples">
          <p class="font-light">Font Light (300) - Texto leve</p>
          <p class="font-normal">Font Normal (400) - Texto padrão</p>
          <p class="font-medium">Font Medium (500) - Texto médio</p>
          <p class="font-semibold">Font Semibold (600) - Texto semi-negrito</p>
          <p class="font-bold">Font Bold (700) - Texto negrito</p>
        </div>
      </div>

      <!-- Famílias de Fonte -->
      <div class="section">
        <h3 class="text-h3 text-primary">🔤 Famílias de Fonte</h3>
        <div class="examples">
          <p class="font-primary">Font Primary - Inter (Principal)</p>
          <p class="font-secondary">Font Secondary - Roboto (Secundária)</p>
          <p class="font-mono">Font Mono - SF Mono (Código)</p>
        </div>
      </div>

      <!-- Utilitários -->
      <div class="section">
        <h3 class="text-h3 text-primary">🔧 Utilitários</h3>
        
        <h4 class="text-h4 text-secondary">Alinhamento</h4>
        <div class="examples">
          <p class="text-left">Texto alinhado à esquerda</p>
          <p class="text-center">Texto centralizado</p>
          <p class="text-right">Texto alinhado à direita</p>
        </div>

        <h4 class="text-h4 text-secondary">Transformação</h4>
        <div class="examples">
          <p class="text-uppercase">texto em maiúscula</p>
          <p class="text-lowercase">TEXTO EM MINÚSCULA</p>
          <p class="text-capitalize">texto com primeira maiúscula</p>
        </div>

        <h4 class="text-h4 text-secondary">Line Height</h4>
        <div class="examples">
          <p class="leading-tight">
            Texto com altura de linha compacta (1.2). Lorem ipsum dolor sit amet, 
            consectetur adipiscing elit, sed do eiusmod tempor.
          </p>
          <p class="leading-normal">
            Texto com altura de linha normal (1.4). Lorem ipsum dolor sit amet, 
            consectetur adipiscing elit, sed do eiusmod tempor.
          </p>
          <p class="leading-relaxed">
            Texto com altura de linha relaxada (1.6). Lorem ipsum dolor sit amet, 
            consectetur adipiscing elit, sed do eiusmod tempor.
          </p>
        </div>

        <h4 class="text-h4 text-secondary">Letter Spacing</h4>
        <div class="examples">
          <p class="tracking-tight">Texto com espaçamento compacto</p>
          <p class="tracking-normal">Texto com espaçamento normal</p>
          <p class="tracking-wide">Texto com espaçamento amplo</p>
          <p class="tracking-wider">Texto com espaçamento mais amplo</p>
        </div>
      </div>

      <!-- Responsividade -->
      <div class="section">
        <h3 class="text-h3 text-primary">📱 Teste de Responsividade</h3>
        <p class="text-body-1 text-secondary">
          Redimensione a janela para ver como o texto se adapta automaticamente 
          aos diferentes tamanhos de tela.
        </p>
        <div class="responsive-example">
          <h1 class="text-display-1">Título Responsivo</h1>
          <h2 class="text-h1">Subtítulo Adaptativo</h2>
          <p class="text-body-1">
            Este texto mantém sua legibilidade em todos os dispositivos, 
            ajustando automaticamente os tamanhos conforme necessário.
          </p>
        </div>
      </div>

      <!-- Exemplos Práticos -->
      <div class="section">
        <h3 class="text-h3 text-primary">💡 Exemplos Práticos</h3>
        
        <!-- Card Exemplo -->
        <div class="practical-example card-example">
          <h4 class="text-h3 text-primary">Card de Produto</h4>
          <p class="text-body-2 text-secondary">Descrição do produto com informações relevantes</p>
          <span class="text-label-large text-success">R$ 299,90</span>
          <button class="btn-primary">
            <span class="text-label-medium">Comprar Agora</span>
          </button>
        </div>

        <!-- Formulário Exemplo -->
        <div class="practical-example form-example">
          <h4 class="text-h3 text-primary">Formulário</h4>
          <div class="form-field">
            <label class="text-label-large text-secondary">Nome Completo</label>
            <input type="text" placeholder="Digite seu nome">
            <small class="text-caption text-tertiary">Campo obrigatório</small>
          </div>
          <div class="form-field">
            <label class="text-label-large text-secondary">Email</label>
            <input type="email" placeholder="seu@email.com">
            <small class="text-caption text-error">Email inválido</small>
          </div>
        </div>
      </div>

      <!-- Controle de Tema -->
      <div class="section">
        <h3 class="text-h3 text-primary">🌙 Controle de Tema</h3>
        <p class="text-body-1 text-secondary">
          Teste a tipografia em modo claro e escuro:
        </p>
        <div class="theme-controls">
          <button (click)="toggleTheme()" class="theme-toggle">
            {{ isDarkTheme ? '☀️ Tema Claro' : '🌙 Tema Escuro' }}
          </button>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .typography-showcase {
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
      background: var(--surface);
      color: var(--text-primary);
    }

    .section {
      margin-bottom: 3rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid var(--divider);

      &:last-child {
        border-bottom: none;
      }
    }

    .examples {
      margin-top: 1rem;
      
      > * {
        margin-bottom: 1rem;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .practical-example {
      background: var(--card-bg);
      border: 1px solid var(--divider);
      border-radius: 8px;
      padding: 1.5rem;
      margin: 1rem 0;
    }

    .card-example {
      .btn-primary {
        margin-top: 1rem;
        padding: 0.5rem 1rem;
        background: var(--idt-primary-color);
        color: var(--idt-primary-contrast);
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
    }

    .form-example {
      .form-field {
        margin-bottom: 1.5rem;
        
        label {
          display: block;
          margin-bottom: 0.5rem;
        }
        
        input {
          width: 100%;
          padding: 0.75rem;
          border: 1px solid var(--divider);
          border-radius: 4px;
          font-family: var(--font-primary);
          font-size: var(--font-size-sm);
          
          &:focus {
            outline: 2px solid var(--idt-primary-color);
            outline-offset: 2px;
          }
        }
        
        small {
          display: block;
          margin-top: 0.25rem;
        }
      }
    }

    .responsive-example {
      background: var(--surface-variant-subtle);
      padding: 2rem;
      border-radius: 8px;
      margin-top: 1rem;
    }

    .theme-controls {
      margin-top: 1rem;
    }

    .theme-toggle {
      padding: 0.75rem 1.5rem;
      background: var(--idt-primary-color);
      color: var(--idt-primary-contrast);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-family: var(--font-primary);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      transition: all 0.2s ease;

      &:hover {
        background: var(--idt-primary-shade);
      }
    }
  `]
})
export class TypographyShowcaseComponent {
  isDarkTheme = false;

  toggleTheme() {
    this.isDarkTheme = !this.isDarkTheme;
    
    if (this.isDarkTheme) {
      document.documentElement.classList.add('dark-theme');
    } else {
      document.documentElement.classList.remove('dark-theme');
    }
  }
} 