import { Component, signal, computed, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Router, RouterModule } from '@angular/router';

interface Employee {
  id: number;
  adId: string;
  name: string;
  initials: string;
  role: string;
  department: string;
  contractType: string;
  rating: number;
  clients: number;
  rate: number;
  tags: string[];
  email: string;
  phone: string;
  joinedDate: string;
  avatarColor: string;
  avatarTextColor: string;
  status: string;
}

@Component({
  selector: 'app-directorio',
  standalone: true,
  imports: [CommonModule, FormsModule, RouterModule],
  template: `
    <div class="dir-shell">
      
      <!-- ═══════════════════════════════ TIMI PEOPLE NAVBAR ═══════════════════════════════ -->
      <nav class="dir-topbar">
        <div class="dir-topbar__left">
          <div class="dir-topbar__logo">
            <span class="dir-topbar__logo-icon">✨</span>
            <span class="dir-topbar__logo-text">App <strong>People</strong></span>
          </div>
          <ul class="dir-topbar__menu">
            <li class="dir-topbar__menu-item dir-topbar__menu-item--active">Employee</li>
            <li class="dir-topbar__menu-item">Contract</li>
            <li class="dir-topbar__menu-item">Department</li>
            <li class="dir-topbar__menu-item">Manpower Planning</li>
            <li class="dir-topbar__menu-item">Organization Structure</li>
          </ul>
        </div>
        
        <div class="dir-topbar__right">
          <button class="dir-topbar__btn-add" (click)="resetFilters()">+</button>
          <button class="dir-topbar__btn-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="11" cy="11" r="8"></circle>
              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
          </button>
          <button class="dir-topbar__btn-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
              <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
            </svg>
          </button>
          <div class="dir-topbar__user-avatar">JM</div>
        </div>
      </nav>

      <!-- ═══════════════════════════════ MAIN CONTENT ═══════════════════════════════ -->
      <main class="dir-main">
        
        <!-- Header: Employee Title and Import/Export/Add Buttons -->
        <div class="dir-content-header">
          <div class="dir-content-header__left">
            <h1 class="dir-content-header__title">Employee</h1>
            <div class="dir-content-header__stats">
              <span class="dir-content-header__stat-active">● Active 28</span>
              <span class="dir-content-header__stat-inactive">● Inactive 4</span>
            </div>
          </div>
          <div class="dir-content-header__right">
            <button class="dir-btn-secondary">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="7 10 12 15 17 10"></polyline>
                <line x1="12" y1="15" x2="12" y2="3"></line>
              </svg>
              Import
            </button>
            <button class="dir-btn-secondary">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="17 8 12 3 7 8"></polyline>
                <line x1="12" y1="3" x2="12" y2="15"></line>
              </svg>
              Export
            </button>
            <button class="dir-btn-primary">
              <span class="dir-btn-primary__icon">+</span>
              Add Employee
            </button>
          </div>
        </div>

        <!-- Filters & Search Bar -->
        <div class="dir-filters-bar">
          <div class="dir-filters-bar__left">
            <div class="dir-search-input">
              <svg class="dir-search-input__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              </svg>
              <input 
                type="text" 
                placeholder="Search" 
                [(ngModel)]="searchQuery"
                (ngModelChange)="onSearch($event)"
                class="dir-search-input__field"
              />
            </div>
            
            <div class="dir-filter-dropdown">
              <button class="dir-filter-dropdown__trigger">
                Type
                <span class="dir-filter-dropdown__arrow">▼</span>
              </button>
            </div>
            
            <div class="dir-filter-dropdown">
              <button class="dir-filter-dropdown__trigger">
                Status
                <span class="dir-filter-dropdown__arrow">▼</span>
              </button>
            </div>
            
            <div class="dir-filter-dropdown">
              <button class="dir-filter-dropdown__trigger">
                Role
                <span class="dir-filter-dropdown__arrow">▼</span>
              </button>
            </div>
            
            <button class="dir-btn-advanced">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
              </svg>
              Advance Filter
            </button>
          </div>

          <div class="dir-filters-bar__right">
            <button class="dir-btn-transfer">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M17 2.1l4 4-4 4M3 6h18M7 21.9l-4-4 4-4M21 18H3"></path>
              </svg>
              Transfer Employee
            </button>
            
            <div class="dir-view-toggle">
              <button class="dir-view-toggle__btn dir-view-toggle__btn--active">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <rect x="3" y="3" width="7" height="7"></rect>
                  <rect x="14" y="3" width="7" height="7"></rect>
                  <rect x="14" y="14" width="7" height="7"></rect>
                  <rect x="3" y="14" width="7" height="7"></rect>
                </svg>
              </button>
              <button class="dir-view-toggle__btn">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <line x1="8" y1="6" x2="21" y2="6"></line>
                  <line x1="8" y1="12" x2="21" y2="12"></line>
                  <line x1="8" y1="18" x2="21" y2="18"></line>
                  <line x1="3" y1="6" x2="3.01" y2="6"></line>
                  <line x1="3" y1="12" x2="3.01" y2="12"></line>
                  <line x1="3" y1="18" x2="3.01" y2="18"></line>
                </svg>
              </button>
            </div>
          </div>
        </div>

        <!-- Employee Grid -->
        <div class="dir-grid">
          @for (emp of filteredEmployees(); track emp.id) {
            <article class="dir-card">
              <!-- Top bar with Active badge & Options -->
              <div class="dir-card__top">
                <span class="dir-card__status-badge" 
                  [ngClass]="{
                    'dir-card__status-badge--active': emp.status === 'Active',
                    'dir-card__status-badge--invited': emp.status === 'Invited'
                  }">
                  {{ emp.status }}
                </span>
                <button class="dir-card__options">···</button>
              </div>

              <!-- Avatar & Identity -->
              <div class="dir-card__body">
                <div class="dir-card__avatar-container">
                  <div class="dir-card__avatar" [style.background]="emp.avatarColor" [style.color]="emp.avatarTextColor">
                    {{ emp.initials }}
                  </div>
                </div>
                <h3 class="dir-card__name">{{ emp.name }}</h3>
                <span class="dir-card__role">{{ emp.role }}</span>
              </div>

              <!-- Divider -->
              <div class="dir-card__divider"></div>

              <!-- Detailed Info Block -->
              <div class="dir-card__details">
                <div class="dir-card__detail-item">
                  <span class="dir-card__detail-label">#{{ emp.adId }}</span>
                </div>
                
                <div class="dir-card__detail-item">
                  <svg class="dir-card__detail-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
                  </svg>
                  <span class="dir-card__detail-text">{{ emp.department }} - {{ emp.contractType }}</span>
                </div>
                
                <div class="dir-card__detail-item">
                  <svg class="dir-card__detail-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                    <polyline points="22,6 12,13 2,6"></polyline>
                  </svg>
                  <span class="dir-card__detail-text text-truncate">{{ emp.email }}</span>
                </div>
                
                <div class="dir-card__detail-item">
                  <svg class="dir-card__detail-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                  </svg>
                  <span class="dir-card__detail-text">{{ emp.phone }}</span>
                </div>
              </div>

              <!-- Divider -->
              <div class="dir-card__divider"></div>

              <!-- Footer info -->
              <div class="dir-card__footer">
                <span class="dir-card__joined">Joined on {{ emp.joinedDate }}</span>
                <button class="dir-card__btn-details" (click)="contact(emp)">
                  View details &gt;
                </button>
              </div>
            </article>
          }
        </div>

        <!-- Empty state -->
        @if (filteredEmployees().length === 0) {
          <div class="dir-empty">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="22" cy="22" r="14"></circle>
              <line x1="32" y1="32" x2="42" y2="42"></line>
            </svg>
            <p class="dir-empty__text">No se encontraron resultados para <strong>"{{ searchQuery }}"</strong></p>
            <button (click)="resetFilters()" class="dir-empty__btn">Limpiar filtros</button>
          </div>
        }

      </main>

      <!-- Contact toast -->
      @if (contactToast()) {
        <div class="dir-toast">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          Sincronizando canal AD para <strong>{{ contactToast() }}</strong>...
        </div>
      }

    </div>
  `,
  styleUrls: ['./directorio.component.css']
})
export class DirectorioComponent implements OnInit {
  contactToast = signal('');
  searchQuery = '';

  private _searchSignal = signal('');

  employees = signal<Employee[]>([
    {
      id: 1,
      adId: 'EMP01',
      name: 'Bagus Fikri',
      initials: 'BF',
      role: 'CEO',
      department: 'Managerial',
      contractType: 'Fulltime',
      rating: 4.9,
      clients: 85,
      rate: 150,
      tags: ['Leadership', 'Strategy', 'Active Directory'],
      email: 'bagusfikri@gmail.com',
      phone: '+62 123 456 789',
      joinedDate: '29 Oct, 2020',
      avatarColor: '#DEF7EC', 
      avatarTextColor: '#03543F',
      status: 'Active'
    },
    {
      id: 2,
      adId: 'EMP02',
      name: 'Indrapm',
      initials: 'IP',
      role: 'Illustrator',
      department: 'Design',
      contractType: 'Fulltime',
      rating: 4.8,
      clients: 64,
      rate: 65,
      tags: ['Illustration', 'Vector', 'Figma'],
      email: 'indrapm@gmail.com',
      phone: '+62 765 432 109',
      joinedDate: '1 Feb, 2019',
      avatarColor: '#E1EFFE', 
      avatarTextColor: '#1E429F',
      status: 'Active'
    },
    {
      id: 3,
      adId: 'EMP03',
      name: 'Mufti Hidayat',
      initials: 'MH',
      role: 'Project Manager',
      department: 'Managerial',
      contractType: 'Fulltime',
      rating: 4.7,
      clients: 42,
      rate: 90,
      tags: ['Agile', 'Scrum', 'Planning'],
      email: 'mufti@gmail.com',
      phone: '+62 112 233 445',
      joinedDate: '15 Feb, 2022',
      avatarColor: '#FDF2F2', 
      avatarTextColor: '#9B1C1C',
      status: 'Active'
    },
    {
      id: 4,
      adId: 'EMP04',
      name: 'Fauzan Arditianyah',
      initials: 'FA',
      role: 'UI Designer',
      department: 'Design',
      contractType: 'Fulltime',
      rating: 4.9,
      clients: 75,
      rate: 80,
      tags: ['UI Design', 'Wireframing', 'Prototyping'],
      email: 'fauzan@gmail.com',
      phone: '+62 998 877 665',
      joinedDate: '22 Sep, 2018',
      avatarColor: '#F0F5FF', 
      avatarTextColor: '#5850EC',
      status: 'Active'
    },
    {
      id: 5,
      adId: 'EMP05',
      name: 'Raihan Fikri',
      initials: 'RF',
      role: 'QC & Research',
      department: 'Human Resources',
      contractType: 'Fulltime',
      rating: 4.6,
      clients: 20,
      rate: 70,
      tags: ['Quality', 'Testing', 'Research'],
      email: 'raihan@gmail.com',
      phone: '+62 555 666 777',
      joinedDate: '10 Oct, 2020',
      avatarColor: '#EDEBFE', 
      avatarTextColor: '#5521B5',
      status: 'Invited'
    },
    {
      id: 6,
      adId: 'EMP06',
      name: 'Panji Dwi',
      initials: 'PD',
      role: 'UI Designer',
      department: 'Design',
      contractType: 'Fulltime',
      rating: 4.8,
      clients: 58,
      rate: 75,
      tags: ['UI/UX', 'Figma', 'Responsive'],
      email: 'panji@gmail.com',
      phone: '+62 333 444 555',
      joinedDate: '5 May, 2021',
      avatarColor: '#E3F2FD', 
      avatarTextColor: '#0D47A1',
      status: 'Invited'
    },
    {
      id: 7,
      adId: 'EMP07',
      name: 'Bagas',
      initials: 'B',
      role: 'UI Designer',
      department: 'Design',
      contractType: 'Fulltime',
      rating: 4.8,
      clients: 60,
      rate: 75,
      tags: ['UI Design', 'Design Systems'],
      email: 'bagas@gmail.com',
      phone: '+62 888 999 000',
      joinedDate: '12 Aug, 2022',
      avatarColor: '#FCE8E6', 
      avatarTextColor: '#C53030',
      status: 'Active'
    },
    {
      id: 8,
      adId: 'EMP08',
      name: 'Luqito Raymorley',
      initials: 'LR',
      role: 'Project Manager',
      department: 'Administration',
      contractType: 'Fulltime',
      rating: 4.9,
      clients: 90,
      rate: 110,
      tags: ['Management', 'Delivery', 'Budgets'],
      email: 'luqito@gmail.com',
      phone: '+62 444 333 222',
      joinedDate: '30 Nov, 2017',
      avatarColor: '#E8F5E9', 
      avatarTextColor: '#1B5E20',
      status: 'Active'
    }
  ]);

  filteredEmployees = computed(() => {
    const q = this._searchSignal().toLowerCase().trim();

    return this.employees().filter(emp => {
      return !q ||
        emp.name.toLowerCase().includes(q) ||
        emp.role.toLowerCase().includes(q) ||
        emp.department.toLowerCase().includes(q) ||
        emp.adId.toLowerCase().includes(q);
    });
  });

  ngOnInit(): void { }

  onSearch(value: string): void {
    this._searchSignal.set(value);
  }

  clearSearch(): void {
    this.searchQuery = '';
    this._searchSignal.set('');
  }

  resetFilters(): void {
    this.searchQuery = '';
    this._searchSignal.set('');
  }

  contact(emp: Employee): void {
    this.contactToast.set(emp.name);
    setTimeout(() => this.contactToast.set(''), 3500);
  }
}
