'use client'
import { useState, useEffect, useCallback } from 'react'
import { MapPin, Phone, ChevronRight, CheckCircle, RefreshCw, Clock, DollarSign } from 'lucide-react'
import { FontAwesomeIcon } from '@/lib/fa'
import styles from './page.module.css'

// ─── Types ────────────────────────────────────────────────────────────────────
interface Booking {
  id: string
  dbId: string
  customer: string
  service: string
  duration: string
  time: string
  address: string
  phone: string
  status: string
  commission: number
  therapistName: string
}

// ─── Constants ────────────────────────────────────────────────────────────────
const today = new Date()
const dates = Array.from({ length: 5 }, (_, i) => {
  const d = new Date(today)
  d.setDate(today.getDate() + i)
  return {
    label: i === 0 ? 'Hari Ini' : i === 1 ? 'Besok' : d.toLocaleDateString('id-ID', { weekday: 'short', day: 'numeric' }),
    value: d.toISOString().slice(0, 10),
    idx: i,
  }
})

const actionsByStatus: Record<string, { label: string; color: string }> = {
  pending:    { label: 'Belum Dikonfirmasi', color: '#6b7280' },
  confirmed:  { label: 'Mulai Perjalanan', color: 'var(--sage-500)' },
  ontheway:   { label: 'Saya Sudah Sampai', color: '#f59e0b' },
  arrived:    { label: 'Mulai Sesi', color: 'var(--sage-500)' },
  inprogress: { label: 'Sesi Selesai', color: '#22c55e' },
  done:       { label: 'Selesai', color: '#6b7280' },
}

const statusLabel: Record<string, string> = {
  pending:    'Menunggu',
  confirmed:  'Dikonfirmasi',
  ontheway:   'Dalam Perjalanan',
  arrived:    'Sudah Sampai',
  inprogress: 'Berlangsung',
  done:       'Selesai',
}

function fmtRp(n: number) { return `Rp ${Number(n).toLocaleString('id-ID')}` }

// ─── Component ────────────────────────────────────────────────────────────────
export default function TerapisPage() {
  const [activeDate, setActiveDate] = useState(0)
  const [bookings, setBookings] = useState<Booking[]>([])
  const [loading, setLoading] = useState(true)
  const [updating, setUpdating] = useState<string | null>(null)
  const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
  const [localStatuses, setLocalStatuses] = useState<Record<string, string>>({})

  const fetchSchedule = useCallback(async (dateVal: string) => {
    try {
      const res = await fetch(`/api/terapis/schedule?date=${dateVal}`, { cache: 'no-store' })
      if (!res.ok) return
      const json = await res.json()
      setBookings(json.bookings ?? [])
      setLocalStatuses(prev => {
        const fresh: Record<string, string> = {}
        ;(json.bookings ?? []).forEach((b: Booking) => {
          fresh[b.id] = prev[b.id] ?? b.status
        })
        return fresh
      })
      setLastUpdated(new Date())
    } catch {
      // Silent fail on polling
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    const dateVal = dates[activeDate]?.value ?? today.toISOString().slice(0, 10)
    setLoading(true)
    fetchSchedule(dateVal)
    const id = setInterval(() => fetchSchedule(dateVal), 15000)
    return () => clearInterval(id)
  }, [activeDate, fetchSchedule])

  async function advanceStatus(booking: Booking) {
    const cur = localStatuses[booking.id] ?? booking.status
    if (cur === 'done') return
    setUpdating(booking.id)
    try {
      const res = await fetch('/api/terapis/update-status', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ bookingId: booking.dbId, currentStatus: cur }),
      })
      if (res.ok) {
        const next = actionsByStatus[cur]
        if (cur === 'confirmed') setLocalStatuses(p => ({ ...p, [booking.id]: 'ontheway' }))
        else if (cur === 'ontheway' || cur === 'arrived') setLocalStatuses(p => ({ ...p, [booking.id]: 'inprogress' }))
        else if (cur === 'inprogress') setLocalStatuses(p => ({ ...p, [booking.id]: 'done' }))
        void next
      }
    } catch { /* ignore */ }
    finally { setUpdating(null) }
  }

  const totalCommission = bookings.reduce((s, b) =>
    (localStatuses[b.id] ?? b.status) === 'done' ? s + b.commission : s, 0)

  const activeBookings = bookings.filter(b => {
    const s = localStatuses[b.id] ?? b.status
    return s !== 'done'
  }).length

  return (
    <div className={styles.page}>
      {/* Header */}
      <div className={styles.header}>
        <div>
          <div className={styles.greetingName}>
            Selamat Datang <FontAwesomeIcon icon="leaf" style={{ color: 'var(--sage-500)', marginLeft: 4 }} aria-hidden="true" />
          </div>
          <div className={styles.greetingMeta}>
            {bookings[0]?.therapistName || 'Terapis Kembali SPA'}
          </div>
        </div>
        <div className={styles.statsRow}>
          <div className={styles.statChip}>
            <Clock size={12} />
            <span>{activeBookings} aktif</span>
          </div>
          <div className={styles.statChip}>
            <DollarSign size={12} />
            <span>{fmtRp(totalCommission)}</span>
          </div>
        </div>
      </div>

      {/* Date Tabs */}
      <div className={styles.dateTabs}>
        {dates.map((d) => (
          <button
            key={d.idx}
            ref={el => { el?.setAttribute('aria-pressed', String(activeDate === d.idx)) }}
            className={`${styles.dateTab} ${activeDate === d.idx ? styles.dateTabActive : ''}`}
            onClick={() => setActiveDate(d.idx)}
            aria-label={`Lihat jadwal ${d.label}`}
          >
            {d.label}
          </button>
        ))}
      </div>

      {/* Refresh bar */}
      <div className={styles.refreshBar}>
        <span className={styles.refreshText}>
          {lastUpdated
            ? `Diperbarui ${lastUpdated.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}`
            : 'Memuat jadwal...'}
        </span>
        <button
          className={styles.refreshBtn}
          onClick={() => fetchSchedule(dates[activeDate]?.value ?? today.toISOString().slice(0, 10))}
          aria-label="Refresh jadwal"
        >
          <RefreshCw size={12} />
        </button>
      </div>

      {/* Booking List */}
      <div className={styles.list}>
        {loading ? (
          Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className={styles.skeletonCard} />
          ))
        ) : bookings.length === 0 ? (
          <div className={styles.empty}>
            <div className={styles.emptyIcon}>
              <FontAwesomeIcon icon="spa" style={{ fontSize: '2rem', color: 'var(--sage-300)' }} aria-hidden="true" />
            </div>
            <div className={styles.emptyText}>Tidak ada jadwal untuk hari ini</div>
          </div>
        ) : (
          bookings.map((b) => {
            const curStatus = localStatuses[b.id] ?? b.status
            const action = actionsByStatus[curStatus]
            const isDone = curStatus === 'done'
            return (
              <div key={b.id} className={`${styles.card} ${isDone ? styles.cardDone : ''}`}>
                {/* Card Header */}
                <div className={styles.cardTop}>
                  <div className={styles.cardId}>{b.id}</div>
                  <span className={`${styles.statusBadge} ${styles[`badge_${curStatus}`]}`}>
                    {statusLabel[curStatus] ?? curStatus}
                  </span>
                </div>

                {/* Customer & Service */}
                <div className={styles.cardCustomer}>{b.customer}</div>
                <div className={styles.cardService}>
                  <FontAwesomeIcon icon="spa" style={{ marginRight: 5, color: 'var(--sage-400)' }} aria-hidden="true" />
                  {b.service} · {b.duration}
                </div>
                <div className={styles.cardTime}>
                  <FontAwesomeIcon icon="clock" style={{ marginRight: 5 }} aria-hidden="true" />
                  {b.time}
                </div>

                {/* Address */}
                <div className={styles.cardDetail}>
                  <MapPin size={13} className={styles.detailIcon} aria-hidden="true" />
                  <span>{b.address}</span>
                </div>
                <a href={`tel:${b.phone}`} className={styles.cardDetail}>
                  <Phone size={13} className={styles.detailIcon} aria-hidden="true" />
                  <span>{b.phone}</span>
                </a>

                {/* Commission */}
                {isDone && (
                  <div className={styles.commissionTag}>
                    <CheckCircle size={13} aria-hidden="true" />
                    Komisi: {fmtRp(b.commission)}
                  </div>
                )}

                {/* CTA Button */}
                {!isDone && (
                  <button
                    className={styles.ctaBtn}
                    onClick={() => advanceStatus(b)}
                    disabled={updating === b.id || curStatus === 'pending'}
                    aria-label={action.label}
                    ref={el => { el?.style.setProperty('--cta-color', action.color) }}
                  >
                    {updating === b.id ? (
                      <span className={styles.spinner} />
                    ) : (
                      <>
                        {action.label}
                        {curStatus !== 'pending' && <ChevronRight size={16} aria-hidden="true" />}
                      </>
                    )}
                  </button>
                )}
              </div>
            )
          })
        )}
      </div>
    </div>
  )
}