import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BadgeComponent } from '../../../../../ui-essentials/src/lib/components/data-display/badge/badge.component';

@Component({
  selector: 'ui-badge-demo',
  standalone: true,
  imports: [
    CommonModule,
    BadgeComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="padding: 2rem;">
      <h2>Badge Component Showcase</h2>
      
      <!-- Size Variants -->
      <section style="margin-bottom: 3rem;">
        <h3>Size Variants</h3>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
          <div style="text-align: center;">
            <ui-badge size="xs" variant="primary">Extra Small</ui-badge>
            <p style="font-size: 12px; margin: 0.5rem 0;">XS</p>
          </div>
          <div style="text-align: center;">
            <ui-badge size="sm" variant="primary">Small</ui-badge>
            <p style="font-size: 12px; margin: 0.5rem 0;">Small</p>
          </div>
          <div style="text-align: center;">
            <ui-badge size="md" variant="primary">Medium</ui-badge>
            <p style="font-size: 12px; margin: 0.5rem 0;">Medium</p>
          </div>
          <div style="text-align: center;">
            <ui-badge size="lg" variant="primary">Large</ui-badge>
            <p style="font-size: 12px; margin: 0.5rem 0;">Large</p>
          </div>
        </div>
      </section>

      <!-- Variant Colors -->
      <section style="margin-bottom: 3rem;">
        <h3>Color Variants</h3>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
          <ui-badge variant="default">Default</ui-badge>
          <ui-badge variant="primary">Primary</ui-badge>
          <ui-badge variant="secondary">Secondary</ui-badge>
          <ui-badge variant="success">Success</ui-badge>
          <ui-badge variant="warning">Warning</ui-badge>
          <ui-badge variant="danger">Danger</ui-badge>
          <ui-badge variant="info">Info</ui-badge>
        </div>
      </section>

      <!-- Shape Variants -->
      <section style="margin-bottom: 3rem;">
        <h3>Shape Variants</h3>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
          <div style="text-align: center;">
            <ui-badge shape="pill" variant="primary">Pill Shape</ui-badge>
            <p style="font-size: 12px; margin: 0.5rem 0;">Pill</p>
          </div>
          <div style="text-align: center;">
            <ui-badge shape="rounded" variant="success">Rounded</ui-badge>
            <p style="font-size: 12px; margin: 0.5rem 0;">Rounded</p>
          </div>
          <div style="text-align: center;">
            <ui-badge shape="square" variant="warning">Square</ui-badge>
            <p style="font-size: 12px; margin: 0.5rem 0;">Square</p>
          </div>
        </div>
      </section>

      <!-- Dot Badges -->
      <section style="margin-bottom: 3rem;">
        <h3>Dot Badges</h3>
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
          <ui-badge variant="success" [isDot]="true"></ui-badge>
          <ui-badge variant="warning" [isDot]="true"></ui-badge>
          <ui-badge variant="danger" [isDot]="true"></ui-badge>
          <ui-badge variant="info" [isDot]="true"></ui-badge>
          <ui-badge variant="primary" [isDot]="true"></ui-badge>
        </div>
      </section>

      <!-- Usage Examples -->
      <section style="margin-bottom: 3rem;">
        <h3>Usage Examples</h3>
        <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; border-left: 4px solid #007bff;">
          <h4>Basic Badge:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-badge variant="success" size="md"&gt;
  Active
&lt;/ui-badge&gt;</code></pre>
          
          <h4>Dot Badge:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-badge 
  variant="warning"
  [isDot]="true"
  ariaLabel="Warning status"&gt;
&lt;/ui-badge&gt;</code></pre>

          <h4>Custom Shape:</h4>
          <pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;ui-badge 
  variant="danger"
  shape="square"
  size="lg"
  title="Critical status"&gt;
  Critical
&lt;/ui-badge&gt;</code></pre>
        </div>
      </section>
    </div>
  `,
  styles: [`
    h2 {
      color: hsl(279, 14%, 11%);
      font-size: 2rem;
      margin-bottom: 2rem;
      border-bottom: 2px solid hsl(258, 100%, 47%);
      padding-bottom: 0.5rem;
    }
    
    h3 {
      color: hsl(279, 14%, 25%);
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    
    h4 {
      color: hsl(287, 12%, 35%);
      font-size: 1.125rem;
      margin-bottom: 0.75rem;
    }
    
    section {
      border: 1px solid hsl(289, 14%, 90%);
      border-radius: 8px;
      padding: 1.5rem;
      background: hsl(286, 20%, 99%);
    }
    
    pre {
      font-size: 0.875rem;
      line-height: 1.5;
      margin: 0.5rem 0;
    }
    
    code {
      font-family: 'JetBrains Mono', monospace;
      color: #d63384;
    }
  `]
})
export class BadgeDemoComponent {
  // Simple demo with no interactive functionality for now
}