<div className="space-y-6">
  <h1 className="font-bold text-2xl text-foreground">Waitlist</h1>
  {props.summary && (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
      <div className="rounded-lg border border-border bg-card p-5">
        <p className="font-medium text-muted-foreground text-sm">
          Waiting
        </p>
        <p className="mt-1 font-semibold text-2xl text-foreground">
          {props.summary.totalWaiting}
        </p>
      </div>
      <div className="rounded-lg border border-border bg-card p-5">
        <p className="font-medium text-muted-foreground text-sm">
          Notified
        </p>
        <p className="mt-1 font-semibold text-2xl text-foreground">
          {props.summary.totalNotified}
        </p>
      </div>
      <div className="rounded-lg border border-border bg-card p-5">
        <p className="font-medium text-muted-foreground text-sm">
          Most Requested Products
        </p>
        <p className="mt-1 font-semibold text-2xl text-foreground">
          {props.summary.topProducts.length}
        </p>
      </div>
    </div>
  )}

  {props.summary && props.summary.topProducts.length > 0 && (
    <div className="rounded-lg border border-border bg-card">
      <div className="border-border border-b px-5 py-3">
        <h3 className="font-semibold text-foreground text-sm">
          Most Requested Products
        </h3>
      </div>
      <div className="divide-y divide-border">
        {props.summary.topProducts.map((product) => (
          <div
            key={product.productId}
            className="flex items-center justify-between px-5 py-3"
          >
            <span className="text-foreground text-sm">
              {product.productName}
            </span>
            <div className="flex items-center gap-3">
              <span className="rounded-full bg-muted px-2.5 py-0.5 font-medium text-muted-foreground text-xs">
                {product.count} {product.count === 1 ? "request" : "requests"}
              </span>
              {props.notifyConfirm === product.productId ? (
                <span className="space-x-2">
                  <button
                    type="button"
                    onClick={() => props.onNotify(product.productId)}
                    className="font-medium text-blue-600 text-xs hover:opacity-80 dark:text-blue-400"
                  >
                    Confirm Notify
                  </button>
                  <button
                    type="button"
                    onClick={() => props.onNotifyConfirm(null)}
                    className="text-muted-foreground text-xs hover:text-foreground"
                  >
                    Cancel
                  </button>
                </span>
              ) : (
                <button
                  type="button"
                  onClick={() => props.onNotifyConfirm(product.productId)}
                  className="text-blue-600 text-xs hover:opacity-80 dark:text-blue-400"
                >
                  Notify All
                </button>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  )}

  {props.error && (
    <div className="rounded-lg bg-destructive/10 p-3 text-destructive text-sm">
      {props.error}
    </div>
  )}

  <div className="rounded-lg border border-border bg-card">
    <div className="flex items-center justify-between border-border border-b px-5 py-3">
      <h3 className="font-semibold text-foreground text-sm">
        All Waitlist Entries
      </h3>
      <select
        value={props.statusFilter}
        onChange={(e) => props.onStatusChange(e.target.value)}
        className="rounded border border-border bg-background px-2 py-1 text-foreground text-xs"
      >
        <option value="">All statuses</option>
        <option value="waiting">Waiting</option>
        <option value="notified">Notified</option>
        <option value="purchased">Purchased</option>
        <option value="cancelled">Cancelled</option>
      </select>
    </div>

    {props.itemsContent}
  </div>
</div>
