import { CommonModule } from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
  input,
  output,
} from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'lib-user-card',
  imports: [
    CommonModule,
    RouterModule,
    MatCardModule,
    MatButtonModule,
    MatIconModule,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <mat-card class="user-card">
      <button
        mat-icon-button
        color="warn"
        class="delete-btn"
        (click)="deleteUser.emit(user().id)"
      >
        <mat-icon>delete</mat-icon>
      </button>
      <mat-card-header>
        <mat-card-title>
          <a [routerLink]="['/users', user().id]" class="user-link">{{
            user().name
          }}</a>
        </mat-card-title>
        <mat-card-subtitle>{{ user().email }}</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <div class="user-meta">
          <span>
            <mat-icon class="meta-icon">assignment</mat-icon>
            {{ taskCount() }} Tasks
          </span>
          <span>
            <mat-icon class="meta-icon">comment</mat-icon>
            {{ commentCount() }} Comments
          </span>
        </div>
      </mat-card-content>
    </mat-card>
  `,
  styles: [
    `
      .user-card {
        position: relative;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
        transition: all 0.2s ease;
        padding-bottom: 0.5rem;
        overflow: hidden;
      }
      .user-card:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-3px);
      }
      .user-link {
        text-decoration: none;
        color: #1976d2;
        font-weight: 600;
        font-size: 1.1rem;
      }
      .user-link:hover {
        text-decoration: underline;
      }
      .delete-btn {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        z-index: 2;
      }
      .user-meta {
        display: flex;
        gap: 1rem;
        margin-top: 0.5rem;
        font-size: 0.9rem;
        color: #555;
      }
      .meta-icon {
        vertical-align: middle;
        margin-right: 0.2em;
        color: #1976d2;
      }
    `,
  ],
})
export class UserCardComponent {
  readonly user = input.required<{ id: number; name: string; email: string }>();
  readonly taskCount = input<number>(0);
  readonly commentCount = input<number>(0);
  readonly deleteUser = output<number>();
}