'use client'
import { usePolling } from '@/hooks/usePolling'
import { TrendingUp, TrendingDown, DollarSign, CalendarCheck, Users, Star, Clock, RefreshCw } from 'lucide-react'
import styles from './page.module.css'

interface Stats {
  totalBookings: number; pendingBookings: number; completedBookings: number; cancelledBookings: number
  todayBookings: number; todayInProgress: number; todayCompleted: number; todayPending: number
  revenueMonth: number; revenueTotal: number; activeCustomers: number; activeTherapists: number
  avgRating: number; totalReviews: number; pendingQrisCount?: number
}

interface Booking {
  id: string; bookingCode: string; status: string; createdAt: string; finalPrice: number
  customer: { name: string }
  items: { service: { name: string } }[]
}

interface BookingsResp { bookings: Booking[]; total: number }
interface Revenue {
  revenueByMonth: { label: string; value: number }[]
  bookingByMonth: { label: string; value: number }[]
  topServices?: { name: string; count: number; revenue: number }[]
}

function fmtRp(n: number) {
  if (n >= 1_000_000) return `Rp ${(n / 1_000_000).toFixed(1)} Jt`
  if (n >= 1_000) return `Rp ${(n / 1_000).toFixed(0)} Rb`
  return `Rp ${n.toLocaleString('id-ID')}`
}

const statusBadge: Record<string, string> = {
  PENDING: 'badge-pending', CONFIRMED: 'badge-confirmed', IN_PROGRESS: 'badge-inprogress',
  COMPLETED: 'badge-done', CANCELLED: 'badge-cancelled', ASSIGNED: 'badge-confirmed',
}
const statusLabel: Record<string, string> = {
  PENDING: 'Menunggu', CONFIRMED: 'Dikonfirmasi', IN_PROGRESS: 'Berlangsung',
  COMPLETED: 'Selesai', CANCELLED: 'Dibatalkan', ASSIGNED: 'Assigned',
}

export default function AdminDashboard() {
  const { data: stats, loading: sLoad, lastUpdated, hasNewData: newStats, refetch } = usePolling<Stats>('/api/admin/stats', 5000)
  const { data: recent, hasNewData: newOrders } = usePolling<BookingsResp>('/api/admin/bookings?status=PENDING&limit=5', 5000)
  const { data: rev } = usePolling<Revenue>('/api/admin/revenue', 30000)

  const today = new Date().toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
  const maxRev = rev ? Math.max(...rev.revenueByMonth.map(r => r.value), 1) : 1

  const kpiCards = stats ? [
    { icon: DollarSign, label: 'Revenue Bulan Ini', value: fmtRp(stats.revenueMonth), sub: `Total: ${fmtRp(stats.revenueTotal)}`, up: true, warn: false },
    { icon: CalendarCheck, label: 'Total Booking', value: stats.totalBookings.toString(), sub: `Selesai: ${stats.completedBookings}`, up: true, warn: false },
    { icon: Users, label: 'Pelanggan Aktif', value: stats.activeCustomers.toString(), sub: `Terapis: ${stats.activeTherapists}`, up: true, warn: false },
    { icon: Star, label: 'Rating Rata-rata', value: `${stats.avgRating} ★`, sub: `${stats.totalReviews} ulasan`, up: true, warn: false },
    { icon: Clock, label: 'QRIS Pending', value: (stats.pendingQrisCount ?? 0).toString(), sub: 'Perlu dikonfirmasi', up: false, warn: (stats.pendingQrisCount ?? 0) > 0 },
  ] : []

  return (
    <div className={styles.page}>
      {/* Toast for new orders */}
      {newOrders && (
        <div className={styles.toast}>
          🔔 Pesanan baru masuk! Segera dikonfirmasi.
        </div>
      )}

      {/* Top Bar */}
      <div className={styles.topBar}>
        <div>
          <h1 className={styles.pageTitle}>Dashboard</h1>
          <p className={styles.pageDate}>{today}</p>
        </div>
        <div className={styles.topRight}>
          <div className={`${styles.liveIndicator} ${newStats ? styles.liveFlash : ''}`}>
            <span className={styles.liveDot} />
            <span className={styles.liveText}>Live</span>
          </div>
          <span className={styles.lastUpdated}>
            {lastUpdated ? `Diperbarui ${lastUpdated.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}` : '—'}
          </span>
          <button className={styles.refreshBtn} onClick={() => refetch()} title="Refresh">
            <RefreshCw size={14} />
          </button>
        </div>
      </div>

      {/* KPI Cards */}
      {sLoad ? (
        <div className={styles.loadingRow}>
          {[1,2,3,4].map(i => <div key={i} className={styles.skeletonCard} />)}
        </div>
      ) : (
        <div className={styles.kpiGrid}>
          {kpiCards.map((c, i) => (
            <div key={i} className={`${styles.kpiCard} ${c.warn ? styles.kpiCardWarn : ''}`}>
              <div className={styles.kpiTop}>
                <div className={styles.kpiIcon}><c.icon size={20} strokeWidth={1.5} /></div>
                {c.up ? <TrendingUp size={14} className={styles.trendUp} /> : <TrendingDown size={14} className={styles.trendDown} />}
              </div>
              <div className={styles.kpiValue}>{c.value}</div>
              <div className={styles.kpiLabel}>{c.label}</div>
              <div className={styles.kpiSub}>{c.sub}</div>
            </div>
          ))}
        </div>
      )}

      <div className={styles.gridTwo}>
        {/* Revenue Chart */}
        <div className={styles.card}>
          <div className={styles.cardHeader}>
            <h3 className={styles.cardTitle}>Revenue Bulanan</h3>
            <span className="badge badge-confirmed">6 Bulan Terakhir</span>
          </div>
          <div className={styles.barChart}>
            {(rev?.revenueByMonth ?? []).map((r, i) => (
              <div key={i} className={styles.barCol}>
                <span className={styles.barVal}>{r.value >= 1000000 ? `${(r.value/1000000).toFixed(1)}Jt` : r.value >= 1000 ? `${(r.value/1000).toFixed(0)}Rb` : r.value}</span>
                <div className={styles.barWrap}>
                <div className={styles.bar} ref={el => { el?.style.setProperty('--bar-h', `${Math.round((r.value / maxRev) * 100)}%`) }} />
                </div>
                <span className={styles.barLabel}>{r.label}</span>
              </div>
            ))}
            {!rev && [0,0,0,0,0,0].map((_, i) => (
              <div key={i} className={styles.barCol}>
                <div className={styles.barWrap}><div className={styles.barSkeleton} /></div>
                <span className={styles.barLabel}>—</span>
              </div>
            ))}
          </div>
        </div>

        {/* Hari Ini */}
        <div className={styles.card}>
          <div className={styles.cardHeader}>
            <h3 className={styles.cardTitle}>Hari Ini</h3>
            <Clock size={16} strokeWidth={1.5} color="var(--sage-300)" />
          </div>
          {stats ? (
            <div className={styles.todayGrid}>
              {[
                ['Jadwal', stats.todayBookings, 'badge-confirmed'],
                ['Selesai', stats.todayCompleted, 'badge-done'],
                ['Berlangsung', stats.todayInProgress, 'badge-inprogress'],
                ['Pending', stats.todayPending, 'badge-pending'],
              ].map(([label, val, badge]) => (
                <div key={label as string} className={styles.todayStat}>
                  <div className={styles.todayVal}>{val as number}</div>
                  <div className={`badge ${badge}`}>{label as string}</div>
                </div>
              ))}
            </div>
          ) : <div className={styles.skeletonCard} />}

          {/* Top Services */}
          {rev && (
            <div className={styles.topServices}>
              <div className={styles.topServicesTitle}>Top Layanan</div>
              {rev.topServices?.map((s, i) => {
                const maxCount = Math.max(...(rev.topServices?.map(x => x.count) ?? [1]))
                return (
                  <div key={i} className={styles.topServiceRow}>
                    <span className={styles.topServiceName}>{s.name}</span>
                    <div className={styles.progressBar}>
                      <div className={styles.progressFill} ref={el => { el?.style.setProperty('--fill-w', `${Math.round((s.count / maxCount) * 100)}%`) }} />
                    </div>
                    <span className={styles.pct}>{s.count}x</span>
                  </div>
                )
              })}
            </div>
          )}
        </div>
      </div>

      {/* Pesanan Menunggu */}
      <div className={styles.card}>
        <div className={styles.cardHeader}>
          <h3 className={styles.cardTitle}>
            Pesanan Menunggu Konfirmasi
            {stats?.pendingBookings ? <span className={styles.pendingBadge}>{stats.pendingBookings}</span> : null}
          </h3>
          <a href="/admin/bookings" className="btn btn-ghost btn-sm">Lihat Semua →</a>
        </div>
        {!recent?.bookings?.length ? (
          <div className={styles.emptyState}>✅ Tidak ada pesanan yang menunggu konfirmasi</div>
        ) : (
          <div className={styles.tableWrap}>
            <table className="table">
              <thead><tr>
                <th>Kode</th><th>Pelanggan</th><th>Layanan</th><th>Waktu</th><th>Total</th><th>Status</th><th>Aksi</th>
              </tr></thead>
              <tbody>
                {recent.bookings.map((b) => (
                  <tr key={b.id} className={styles.newRow}>
                    <td className="td-primary">{b.bookingCode}</td>
                    <td>{b.customer.name}</td>
                    <td>{b.items[0]?.service?.name ?? '—'}</td>
                    <td>{new Date(b.createdAt).toLocaleString('id-ID', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' })}</td>
                    <td className="td-primary">{fmtRp(b.finalPrice)}</td>
                    <td><span className={`badge ${statusBadge[b.status]}`}>{statusLabel[b.status]}</span></td>
                    <td><a href={`/admin/bookings/${b.id}`} className="btn btn-primary btn-sm">Konfirmasi</a></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  )
}