'use client'
import { usePolling } from '@/hooks/usePolling'
import { ToggleLeft, ToggleRight, Star } from 'lucide-react'
import styles from './page.module.css'

interface Therapist {
  id: string; employeeId: string; rating: number; totalSessions: number; totalReviews: number
  experienceYears: number; isAvailable: boolean; commissionRate: number
  user: { name: string; email: string; phone: string; isActive: boolean }
  _count: { bookings: number }
}

export default function TherapistsPage() {
  const { data: therapists, loading, refetch } = usePolling<Therapist[]>('/api/admin/therapists', 15000)

  async function toggleAvailability(id: string, current: boolean) {
    await fetch('/api/admin/therapists', { method:'PATCH', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ id, isAvailable: !current }) })
    refetch()
  }

  return (
    <div className={styles.page}>
      <div className={styles.topBar}>
        <div>
          <h1 className={styles.pageTitle}>Manajemen Terapis</h1>
          <p className={styles.pageSub}>{therapists?.length ?? 0} terapis terdaftar</p>
        </div>
      </div>

      {loading ? <div className={styles.loading}>Memuat terapis...</div> : (
        <div className={styles.grid}>
          {(therapists ?? []).map(t => (
            <div key={t.id} className={`${styles.card} ${!t.isAvailable ? styles.cardInactive : ''}`}>
              <div className={styles.cardTop}>
                <div className={styles.avatar}>{t.user.name[0]}</div>
                <div className={styles.nameBlock}>
                  <div className={styles.name}>{t.user.name}</div>
                  <div className={styles.empId}>{t.employeeId}</div>
                </div>
                <button className={styles.toggleBtn} onClick={() => toggleAvailability(t.id, t.isAvailable)} title={t.isAvailable ? 'Set Tidak Tersedia' : 'Set Tersedia'}>
                  {t.isAvailable ? <ToggleRight size={24} color="var(--sage-500)"/> : <ToggleLeft size={24} color="var(--sage-300)"/>}
                </button>
              </div>

              <div className={styles.statusRow}>
                <span className={`badge ${t.isAvailable ? 'badge-confirmed' : 'badge-cancelled'}`}>{t.isAvailable ? 'Tersedia' : 'Tidak Tersedia'}</span>
                <span className={`badge ${t.user.isActive ? 'badge-confirmed' : 'badge-pending'}`}>{t.user.isActive ? 'Aktif' : 'Nonaktif'}</span>
              </div>

              <div className={styles.stats}>
                <div className={styles.stat}>
                  <Star size={13} fill="var(--sage-500)" stroke="none"/>
                  <span className={styles.statVal}>{t.rating.toFixed(2)}</span>
                  <span className={styles.statLabel}>Rating ({t.totalReviews} ulasan)</span>
                </div>
                <div className={styles.stat}>
                  <span className={styles.statVal}>{t.totalSessions}</span>
                  <span className={styles.statLabel}>Total Sesi</span>
                </div>
                <div className={styles.stat}>
                  <span className={styles.statVal}>{t.experienceYears} thn</span>
                  <span className={styles.statLabel}>Pengalaman</span>
                </div>
                <div className={styles.stat}>
                  <span className={styles.statVal}>{(t.commissionRate * 100).toFixed(0)}%</span>
                  <span className={styles.statLabel}>Komisi</span>
                </div>
              </div>

              <div className={styles.contact}>
                <div>{t.user.email}</div>
                <div>{t.user.phone}</div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}