import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-metric-card',
  standalone: true,
  template: `
    <article class="metric-card" [class.is-warning]="tone === 'warning'" [class.is-success]="tone === 'success'">
      <span>{{ label }}</span>
      <strong>{{ value }}</strong>
      @if (hint) {
        <small>{{ hint }}</small>
      }
    </article>
  `,
  styles: [`
    .metric-card {
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid #e4e9f2;
      border-radius: 8px;
      box-shadow: 0 16px 32px rgba(17, 24, 39, 0.045);
      display: grid;
      gap: 8px;
      min-height: 128px;
      padding: 20px;
      position: relative;
      overflow: hidden;
      transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    }

    .metric-card::before {
      background: #2864c9;
      border-radius: 999px;
      content: "";
      height: 8px;
      position: absolute;
      right: 18px;
      top: 18px;
      width: 8px;
    }

    .metric-card:hover {
      border-color: #bfd0ee;
      box-shadow: 0 20px 38px rgba(37, 99, 235, 0.09);
      transform: translateY(-2px);
    }

    .metric-card.is-warning {
      border-color: #fed7aa;
      background: linear-gradient(135deg, #fff 0%, #fff7ed 100%);
    }

    .metric-card.is-warning::before {
      background: #f97316;
    }

    .metric-card.is-success {
      border-color: #bbf7d0;
      background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
    }

    .metric-card.is-success::before {
      background: #16a34a;
    }

    span {
      color: #6b7280;
      font-size: 14px;
    }

    strong {
      color: #111827;
      font-size: 32px;
      line-height: 1;
    }

    small {
      color: #6b7280;
      line-height: 1.45;
    }
  `]
})
export class MetricCardComponent {
  @Input({ required: true }) label = '';
  @Input({ required: true }) value = '';
  @Input() hint = '';
  @Input() tone: 'default' | 'warning' | 'success' = 'default';
}