'use client'
import { useState } from 'react'
import { usePolling } from '@/hooks/usePolling'
import { Search } from 'lucide-react'
import styles from './page.module.css'

interface Customer {
  id: string; name: string; email: string; phone: string; isActive: boolean; createdAt: string
  customerProfile: { totalBookings: number; totalSpent: number; loyaltyPoints: number } | null
  _count: { bookingsAsCustomer: number }
}
function fmtRp(n: number) { return `Rp ${Number(n).toLocaleString('id-ID')}` }

export default function CustomersPage() {
  const { data: customers, loading } = usePolling<Customer[]>('/api/admin/customers', 15000)
  const [search, setSearch] = useState('')

  const filtered = (customers ?? []).filter(c =>
    c.name.toLowerCase().includes(search.toLowerCase()) ||
    c.email.toLowerCase().includes(search.toLowerCase()) ||
    c.phone.includes(search)
  )

  return (
    <div className={styles.page}>
      <div className={styles.topBar}>
        <div>
          <h1 className={styles.pageTitle}>Manajemen Pelanggan</h1>
          <p className={styles.pageSub}>{customers?.length ?? 0} pelanggan terdaftar</p>
        </div>
        <div className={styles.searchBox}>
          <Search size={15} className={styles.searchIcon}/>
          <input className={styles.searchInput} placeholder="Cari nama, email, HP..." value={search} onChange={e => setSearch(e.target.value)}/>
        </div>
      </div>

      {loading ? <div className={styles.loading}>Memuat pelanggan...</div> : (
        <div className={styles.tableScrollWrap}>
          <table className="table">
            <thead><tr><th>#</th><th>Nama</th><th>Email</th><th>No. HP</th><th>Total Booking</th><th>Total Belanja</th><th>Poin</th><th>Status</th><th>Bergabung</th></tr></thead>
            <tbody>
              {filtered.map((c, i) => (
                <tr key={c.id}>
                  <td>{i + 1}</td>
                  <td className="td-primary"><div>{c.name}</div></td>
                  <td>{c.email}</td>
                  <td>{c.phone}</td>
                  <td><span className={styles.countBadge}>{c._count.bookingsAsCustomer}x</span></td>
                  <td>{fmtRp(c.customerProfile?.totalSpent ?? 0)}</td>
                  <td>{c.customerProfile?.loyaltyPoints ?? 0} poin</td>
                  <td><span className={`badge ${c.isActive ? 'badge-confirmed' : 'badge-cancelled'}`}>{c.isActive ? 'Aktif' : 'Nonaktif'}</span></td>
                  <td>{new Date(c.createdAt).toLocaleDateString('id-ID')}</td>
                </tr>
              ))}
            </tbody>
          </table>
          {filtered.length === 0 && <div className={styles.empty}>Pelanggan tidak ditemukan</div>}
        </div>
      )}
    </div>
  )
}