//Service
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { RewardTypeViewModel } from '../shared/reward-type';
import { Observable } from 'rxjs';
import { RewardPostViewModel, RewardRedeemViewModel, RewardSetViewModel, RewardViewModel } from '../shared/reward';

@Injectable({
  providedIn: 'root'
})
export class RewardService {

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  };
  
  constructor(private http: HttpClient) {}
  apiUrl: string = "https://localhost:7185/api/Reward";

  //RewardType endpoints
  createRewardType(rewardType: RewardTypeViewModel): Observable<RewardTypeViewModel> {
    return this.http.post<RewardTypeViewModel>(`${this.apiUrl}/createRewardType`, rewardType, this.httpOptions);
  }

  getAllRewardTypes(): Observable<RewardTypeViewModel[]> {
    return this.http.get<RewardTypeViewModel[]>(`${this.apiUrl}/getAllRewardTypes`, this.httpOptions);
  }

  getRewardTypeById(id: number): Observable<RewardTypeViewModel> {
    return this.http.get<RewardTypeViewModel>(`${this.apiUrl}/getRewardTypeById/${id}`, this.httpOptions);
  }

  updateRewardType(rewardTypeId: number, rewardTypeName: string, rewardCriteria: string): Observable<void> {
    const body = { reward_Type_Name: rewardTypeName, reward_Criteria: rewardCriteria }; // Correctly format the body as JSON
    return this.http.put<void>(`${this.apiUrl}/updateRewardType/${rewardTypeId}`, body, this.httpOptions);
  }

  deleteRewardType(id: number): Observable<void> {
    return this.http.delete<void>(`${this.apiUrl}/deleteRewardType/${id}`, this.httpOptions);
  }

  //Reward endpoints
  getRewardById(id: number): Observable<RewardViewModel> {
    return this.http.get<RewardViewModel>(`${this.apiUrl}/getRewardById/${id}`, this.httpOptions);
  }  

  getAllRewards(): Observable<RewardViewModel[]> {
    return this.http.get<RewardViewModel[]>(`${this.apiUrl}/getAllRewards`, this.httpOptions);
  }

  setReward(reward: RewardSetViewModel): Observable<RewardViewModel> {
    return this.http.post<RewardViewModel>(`${this.apiUrl}/setReward`, reward, this.httpOptions);
  }

  redeemReward(request: RewardRedeemViewModel): Observable<any> {
    return this.http.post<any>(`${this.apiUrl}/redeemReward`, request, this.httpOptions);
  }

  postReward(request: RewardPostViewModel): Observable<any> {
    return this.http.post<any>(`${this.apiUrl}/postReward`, request, this.httpOptions);
  }

}

//Models
export class RewardViewModel{
    reward_ID!: number;
    reward_Issue_Date!: Date;
    reward_Type_ID!: number;
    isPosted!: boolean;
}

export class RewardRedeemViewModel {
    MemberId!: number;
    RewardId!: number;
}

export class RewardSetViewModel {
    reward_Issue_Date!: Date;
    reward_Type_ID!: number;
    isPosted: boolean = false;
}

export class RewardPostViewModel {
    RewardId!: number;
}

//Component
//TS
import { Component } from '@angular/core';
import { RewardViewModel } from '../shared/reward';
import { RewardService } from '../Services/reward.service';
import { CommonModule, Location } from '@angular/common';

@Component({
  selector: 'app-reward',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './reward.component.html',
  styleUrl: './reward.component.css'
})
export class RewardComponent {
  unlistedRewards: RewardViewModel[] = [];
  listedRewards: RewardViewModel[] = [];

  constructor(private rewardService: RewardService, private location:Location) {}

  ngOnInit(): void {
    this.loadUnlistedRewards();

    this.loadListedRewards();
  }

  loadUnlistedRewards(): void {
    this.rewardService.getAllRewards().subscribe(rewards => {
      this.unlistedRewards = rewards.filter(reward => !reward.isPosted);
      console.log('Unlisted Rewards:', this.unlistedRewards);
    });
  }

  postReward(rewardId: number): void {
    const request = { RewardId: rewardId };
    this.rewardService.postReward(request).subscribe(() => {
      this.loadUnlistedRewards(); // Reload the unlisted rewards
    });
  }

  openSetRewardModal(): void {
    // Logic to open a modal for setting a new reward
  }

  loadListedRewards(): void {
    this.rewardService.getAllRewards().subscribe(rewards => {
      this.listedRewards = rewards.filter(reward => reward.isPosted);
      console.log('Listed Rewards:', this.listedRewards);
    });
  }

  goBack(): void {
  this.location.back();
  }
} 

//HTML
<div class="reward-container">
    <div class="back-button">
        <button class="btn btn-link" (click)="goBack()">
            <i class="bi bi-arrow-left-circle"></i>Back
        </button>
    </div>

    <div class="unlisted-reward-container">
        <div class="content">
            <div class="header">
                <h1>Unlisted Rewards</h1>
            </div>

            <button class="btn btn-primary mb-3" (click)="openSetRewardModal()">Set New Reward</button>

            <table class="table table-hover table-centered">
                <thead>
                  <tr>
                    <th>Reward ID</th>
                    <th>Issue Date</th>
                    <th>Reward Name</th>
                    <th>Posted</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let reward of unlistedRewards">
                    <td>{{ reward.reward_ID }}</td>
                    <td>{{ reward.reward_Issue_Date | date }}</td>
                    <td>{{ reward.reward_Type_ID }}</td>
                    <td>{{ reward.isPosted }}</td>
                    <td>
                      <button (click)="postReward(reward.reward_ID)">Post Reward</button>
                    </td>
                  </tr>
                </tbody>
            </table>
        </div>
    </div>

    <br/>

    <div class="listed-reward-container">
        <div class="content">
            <div class="header">
                <h1>Listed Rewards</h1>
            </div>

            <table class="table table-hover table-centered">
                <thead>
                  <tr>
                    <th>Reward ID</th>
                    <th>Issue Date</th>
                    <th>Reward Name</th>
                    <th>Posted</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let reward of listedRewards">
                    <td>{{ reward.reward_ID }}</td>
                    <td>{{ reward.reward_Issue_Date | date }}</td>
                    <td>{{ reward.reward_Type_ID }}</td>
                    <td>{{ reward.isPosted }}</td>
                  </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

//CSS
.reward-container {
    padding: 20px;
}

.back-button {
    position: absolute;
    top: 10px;
    left: 10px;
    margin-top: 70px;
}

.content {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 5px;
    margin-top: 20px; /* Adjusted to move the content up */
    text-align: center; /* Center the heading */
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.table-centered th,
.table-centered td {
  text-align: center; /* Center align table contents */
}

.table-hover tbody tr:hover {
    background-color: #f1f1f1;
}