import { Link, useSearchParams } from 'react-router-dom'
import { AcademicFilterBar } from '../discounts/AcademicFilterBar'

/** Landing for WhatsApp admin tools — detail screens call `/api/v1/administrator/whatsapp/*` via JWT (`api/whatsapp.ts`). */
export function WhatsappHubPage() {
  const [searchParams] = useSearchParams()
  const q = searchParams.toString()
  const qs = q ? `?${q}` : ''

  return (
    <div className="container-fluid py-3">
      <h2 className="text-center mt-3 mb-2">WhatsApp</h2>
      <p className="text-muted text-center small mb-4">
        Group links, parent contacts, and membership updates use the authenticated administrator WhatsApp API.
      </p>

      <AcademicFilterBar />

      <div className="card mb-4">
        <div className="card-header">Tools</div>
        <div className="card-body row g-2">
          <div className="col-md-6 col-lg-4">
            <Link className="btn btn-outline-primary w-100" to={`/app/whatsapp/manage-links${qs}`}>
              Manage group links
            </Link>
          </div>
          <div className="col-md-6 col-lg-4">
            <Link className="btn btn-outline-primary w-100" to={`/app/whatsapp/parent-contacts${qs}`}>
              Parent contacts
            </Link>
          </div>
          <div className="col-md-6 col-lg-4">
            <Link
              className="btn btn-outline-primary w-100"
              to={`/app/whatsapp/parent-contacts-by-class${qs}`}
            >
              Parent contacts by class
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}
