import { usePosStore } from '../store/usePosStore'
import { fmt, fmtMoney, statusPill, today } from '../utils/helpers'

export default function Dashboard() {
  const bookings = usePosStore((s) => s.bookings)
  const rooms = usePosStore((s) => s.rooms)
  const transactions = usePosStore((s) => s.transactions)
  const dives = usePosStore((s) => s.dives)
  const setPage = usePosStore((s) => s.setPage)
  const viewBooking = usePosStore((s) => s.viewBooking)

  const td = today()
  const todayBk = bookings.filter((b) => b.checkin === td && b.status === 'confirmed')
  const todayCo = bookings.filter((b) => b.checkout === td && b.status === 'checked-in')
  const occupied = rooms.filter((r) => r.status === 'occupied').length
  const available = rooms.filter((r) => r.status === 'available').length
  const todayRev = transactions.filter((t) => t.date === td).reduce((s, t) => s + t.amount, 0)
  const todayDives = dives.filter((d) => d.date === td)

  const recent = [...bookings].reverse().slice(0, 5)

  return (
    <>
      <div className="page-header">
        <div>
          <div className="page-title">
            Good Morning, <span>Admin</span> 👋
          </div>
          <div className="page-sub">Here&apos;s what&apos;s happening at The One Tenggol Island Resort today</div>
        </div>
        <div className="flex gap8">
          <button type="button" className="btn btn-ghost btn-sm" title="Data updates automatically">
            🔄 Refresh
          </button>
          <button type="button" className="btn btn-primary btn-sm" onClick={() => setPage('booking')}>
            + New Booking
          </button>
        </div>
      </div>

      <div className="stats-row">
        <div className="stat ocean">
          <div className="stat-label">Total Rooms</div>
          <div className="stat-val ocean">{rooms.length}</div>
          <div className="stat-sub">{occupied} occupied</div>
        </div>
        <div className="stat green">
          <div className="stat-label">Available</div>
          <div className="stat-val green">{available}</div>
          <div className="stat-sub">rooms ready</div>
        </div>

        <div className="stat teal">
          <div className="stat-label">Check-ins Today</div>
          <div className="stat-val teal">{todayBk.length}</div>
          <div className="stat-sub">arriving</div>
        </div>
        <div className="stat coral">
          <div className="stat-label">Check-outs Today</div>
          <div className="stat-val coral">{todayCo.length}</div>
          <div className="stat-sub">departing</div>
        </div>
        <div className="stat purple">
          <div className="stat-label">Dives Today</div>
          <div className="stat-val" style={{ color: 'var(--purple)' }}>
            {todayDives.length}
          </div>
          <div className="stat-sub">scheduled</div>
        </div>
      </div>

      <div className="g2 mb16">
        <div className="card">
          <div className="card-title">
            <span className="ct-icon">📅</span> Today&apos;s Check-ins
          </div>
          {todayBk.length ? (
            <table className="tbl">
              <thead>
                <tr>
                  <th>Guest</th>
                  <th>Room</th>
                  <th>Pax</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                {todayBk.map((b) => (
                  <tr key={b.id}>
                    <td>{b.guestName}</td>
                    <td>{b.room || '-'}</td>
                    <td>
                      {(b.pax?.adult || 0) + (b.pax?.kid || 0) + (b.pax?.elderly || 0)}
                    </td>
                    <td>
                      <button type="button" className="btn btn-primary btn-xs" onClick={() => viewBooking(b.id)}>
                        View
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          ) : (
            <div className="text-muted text-center" style={{ padding: 16 }}>
              No check-ins today
            </div>
          )}
        </div>
        <div className="card">
          <div className="card-title">
            <span className="ct-icon">🚪</span> Today&apos;s Check-outs
          </div>
          {todayCo.length ? (
            <table className="tbl">
              <thead>
                <tr>
                  <th>Guest</th>
                  <th>Room</th>
                  <th>Balance</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                {todayCo.map((b) => (
                  <tr key={b.id}>
                    <td>{b.guestName}</td>
                    <td>{b.room || '-'}</td>
                    <td>{fmtMoney(b.totalAmount)}</td>
                    <td>
                      <button type="button" className="btn btn-coral btn-xs" onClick={() => viewBooking(b.id)}>
                        Check Out
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          ) : (
            <div className="text-muted text-center" style={{ padding: 16 }}>
              No check-outs today
            </div>
          )}
        </div>
      </div>

      <div className="g2">
        <div className="card">
          <div className="card-title">
            <span className="ct-icon">🤿</span> Today&apos;s Dive Schedule
          </div>
          {todayDives.length ? (
            todayDives.map((d) => (
              <div key={d.id} className="activity-item">
                <div className="act-icon" style={{ background: 'rgba(14,159,142,.2)' }}>
                  🤿
                </div>
                <div className="act-body">
                  <div className="act-title">{d.type}</div>
                  <div className="act-sub">
                    {d.time} · {d.boat} · {d.instructor}
                  </div>
                </div>
                <span className="pill pill-teal">
                  {d.divers || 0}/{d.maxDivers} pax
                </span>
              </div>
            ))
          ) : (
            <div className="text-muted text-center" style={{ padding: 16 }}>
              No dives scheduled
            </div>
          )}
        </div>
        <div className="card">
          <div className="card-title">
            <span className="ct-icon">⚡</span> Recent Activity
          </div>
          {recent.length ? (
            recent.map((b) => (
              <div key={b.id} className="activity-item">
                <div className="act-icon" style={{ background: 'rgba(26,143,196,.2)' }}>📋</div>
                <div className="act-body">
                  <div className="act-title">{b.guestName}</div>
                  <div className="act-sub">
                    {b.packageType} · {fmt(b.checkin)}
                  </div>
                </div>
                <span className={`pill ${statusPill(b.status)}`}>{b.status}</span>
              </div>
            ))
          ) : (
            <div className="text-muted text-center" style={{ padding: 16 }}>
              No recent bookings
            </div>
          )}
        </div>
      </div>
    </>
  )
}
