import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
interface JobCard {
  id: number;
  title: string;
  company: string;
  salary: string;
  location: string;
  tags: string[];
  logo: string;
  match: number;
}

@Component({
  selector: 'app-job-recommendations',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './job-recommendations.html',
  styleUrls: ['./job-recommendations.scss']
})
export class JobRecommendations {
  currentIndex = 0;
  cards: JobCard[] = [
    {
      id: 1,
      title: '高级前端工程师',
      company: '量子科技',
      salary: '30-50K·15薪',
      location: '上海·徐汇区',
      tags: ['React', 'Angular', 'TypeScript'],
      logo: 'assets/company-logos/quantum.png',
      match: 92
    },
    {
      id: 2,
      title: 'AI算法工程师',
      company: '神经矩阵',
      salary: '40-60K·16薪',
      location: '北京·海淀区',
      tags: ['Python', 'TensorFlow', 'PyTorch'],
      logo: 'assets/company-logos/neural.png',
      match: 88
    },
    {
      id: 3,
      title: '全栈开发工程师',
      company: '数据视野',
      salary: '35-45K·14薪',
      location: '深圳·南山区',
      tags: ['Node.js', 'Vue', 'MongoDB'],
      logo: 'assets/company-logos/datavision.png',
      match: 85
    },
    {
      id: 4,
      title: 'UX设计师',
      company: '界面未来',
      salary: '25-40K·13薪',
      location: '杭州·余杭区',
      tags: ['Figma', 'Sketch', '用户研究'],
      logo: 'assets/company-logos/uifuture.png',
      match: 78
    },
    {
      id: 5,
      title: '区块链开发',
      company: '链芯科技',
      salary: '45-65K·16薪',
      location: '上海·浦东新区',
      tags: ['Solidity', 'Ethereum', '智能合约'],
      logo: 'assets/company-logos/chaincore.png',
      match: 83
    }
  ];
  constructor(private router: Router){}

  nextCard() {
    this.currentIndex = (this.currentIndex + 1) % this.cards.length;
  }

  prevCard() {
    this.currentIndex = (this.currentIndex - 1 + this.cards.length) % this.cards.length;
  }

  getTransformStyle(index: number): string {
    const offset = index - this.currentIndex;
    const baseZ = 100;
    const baseScale = 0.9;
    const scaleIncrement = 0.05;
    
    if (offset === 0) {
      return `translateX(0) scale(1) z-index: ${baseZ + 2};`;
    } else if (offset > 0) {
      const scale = baseScale - (offset * scaleIncrement);
      const translateX = `${offset * 30}px`;
      return `translateX(${translateX}) scale(${scale}) z-index: ${baseZ - offset}; opacity: ${1 - (offset * 0.2)};`;
    } else {
      const scale = baseScale - (Math.abs(offset) * scaleIncrement);
      const translateX = `${offset * 30}px`;
      return `translateX(${translateX}) scale(${scale}) z-index: ${baseZ - Math.abs(offset)}; opacity: ${1 - (Math.abs(offset) * 0.2)};`;
    }
  }
  start()
  {
     this.router.navigate(['/intervieweeauth/home/interviewer']);
  }
}